I'm learning Angular on Plural Sight and the first lesson gives an example of how to use the ng-app directive.
Here's a link to the Plunker editor
http://plnkr.co/edit/HIDCS8A9CR1jnAIDR0Zb?p=preview
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="2.0.0"
src="https://code.angularjs.org/2.0.0-snapshot/angular2.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app>
<h1>Hello Plunker!</h1>
{{ 843 /42 }}
</body>
</html>
The example that was given uses the expression {{ 843 / 42 }} to demonstrate how angular would render the quotient on a webpage.
I've copied the lesson script several times over and can't figure out what I'm doing wrong and why its rendering as text.
This is my first post on stackoverflow, and I'm happy to join the community!
Thanks Again.
Shamus
Your Angular is throwing an error when its running.
You need to import the system library.
See in the dev console.
Checkout this link to get yourself setup
Thanks so much for your answers! I was able to figure out that when plunker adds the angular package, the default url is pointing to Angular 2.x. instead of 1.x as mentioned by "developer033" I went to the angular site and directly borrowed the CDN link from their setup page:
https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js
And now it seems to work just fine. When you're getting started its always a bit frustrating when you spend the most time on the tiniest issues, but I'm glad I found stackoverflow to eliminate most of that guess work.
Thanks again!
Shamus
Related
I have looked through many similar questions and tried several different solutions, but I do not understand what I am doing wrong. Examining the console did not help me either.
I am new, and am attempting to use Github pages, but cannot get my page to work. I created this in codepen, and it looked fine and functional there. I assume the issue is in how I am linking my CSS and JS to the HTML.
I tried changing my CSS and JS links several times to no avail. I have no idea what I am doing wrong. Any suggestions are greatly appreciated.
Here is my HTML code:
<!DOCTYPE html>
<html lang= "en">
<head>
<meta charset= "UTF-8">
<meta name= "viewport" content="width=device-width, initial"
<title>Digital Clock:</title>
<link rel="stylesheet" type="text/css" href="/master/style.css">
</head>
<body style="background-color:#f28500;">
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<div class="clock">
<h2><strong>XENA's sundial says:</strong></h1>
<span class="clock-time"></span>
<span class="clock-ampm"></span>
</div>
<script src="/master/digitalClock.js"></script>
</body>
</html>
Here is the link to my actual repo.
******************************************************////
******************************************************////\
UPDATE: I deleted all the above code and link. Please see my answer below for an explanation as to what happened as I somewhat solved the issue.
Urls starting with / mean start at the root folder, so you need to change it to be /YOURPROJECTNAMEHERE/restofurl where YOURPROJECTNAMEHERE is your project name and restofurl is the rest of the url
should be test your project on server by tools like live server
this package related to vscode ide
after install live server
then after run head over to browser in here test address as manual
explain address
example : where address file talk.ppt
./work/project/talk.ppt
and final step deploy in github
I have figured it out. For some reason, with the code being from codepen, you must export the code to use it, not just copy/paste it (as I had done). I am still unsure as to why I could not get it to work before, however, I deleted everything, and started with a fresh repo and freshly exported code straight from codepen. I did not alter any code. It worked. Previously I copy/pasted it. Further, I uploaded the files from the "src" folder from codepen. I hope this helps somebody in the future.
I have created simple custom elements in angular in one project and created bundle using npx-build-plus and generated files as shown in the picture below,
out of these files i took out main.js file.
I created another angular cli project and included generated js file in root folder like the below
and in index.html i used like this
<!doctype html>
<html lang="en">
<head>
<title>Custom Angular Element</title>
</head>
<body>
<script src="elements/main.f23021e9a099929ed5cb.js"></script>
<h1 id="result" style="text-align: center"> Angular elements !!!</h1>
<value-button text="Value Button" value="1"></value-button>
</body>
</html>
But the element is not displaying.
I tried to give in app component html also but not working there as well
Should i give any configuraration in package.json ? Can you please tell help me?
You can try following this article https://medium.com/swlh/build-micro-frontends-using-angular-elements-the-beginners-guide-75ffeae61b58
Also if try building it without an hash so that it is easy to always read that.Also you should be adding the custom element in the index.html (e.g. ).
The article talks about setting these things up in more detail.
When i try to use AngularJs with SemanticUI.js, the console says
Uncaught ReferenceError : jQuery is not defined
Here is my example of implementation :
<html>
<head>
<!-- I'm head of the document -->
</head>
<body>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/angular.min.js"></script>
<script src="assets/js/semantic.min.js"></script>
<!-- My own script place right here -->
</body>
</html>
Am i doing the right way? I've tried to swap the script position, but my code still doesn't work.
I think the problem in the semantic.min.js, maybe the $ has been replaced by angular or something that i don't know, because when i try to remove the semantic.min.js, no one appears in the console.
I have also try another solution that i've found in stackoverflow, but yes, it still not works.
Only additional information :
AngularJs version 1.5.5
JQuery version 2.2.4
Semantic version 2.1.8
Can anyone give me a solution?
I think it's jQuery problem.
That error can only be caused by one of three things:
Your JavaScript file is not being properly loaded into your page
You have a botched version of jQuery. This could happen because someone edited the core file, or a plugin may have overwritten the $ variable.
You have JavaScript running before the page is fully loaded, and as such, before jQuery is fully loaded.
Please take a look in here for more detail.
JQuery - $ is not defined
just add a slash
<script src="/assets/js/jquery.min.js"></script>
<script src="/assets/js/angular.min.js"></script>
<script src="/assets/js/semantic.min.js"></script>
Oops, sorry, my bad.
I found the problem, it's not the jQuery problem, it's Electron problem.
Because my project use Electron, so the solution is right here :
Electron : jQuery is not defined
I know it is a little bit noob question, but I just wanted to ask, that is it a good or a bad practice if I have too many controllers. Let's say I have a web app, that has around 12 views. Each view has it's own controller (and i didn't talk about the modals controllers I have too). I'm using the ng-view directive for "templating". I just to get some advice, that is it good or just really bad way to make it.
index.html
<html ng-app="myApp">
<head>
.... <!-- Styles and others -->
</head>
<body>
<div ng-view="true">
</div>
<script src="angular/angula.min.js">
<script src="app.js">
<script src="controllers/firstController.js">
<script src="controllers/secondController.js">
<script src="controllers/thirdController.js">
.
.
<script src="controllers/eleventhController.js">
<script src="factory/mainFactory.js">
</body>
</html>
My app.js has the routing functions (Routeproviders etc.).
Thank you very much!
Breaking things down in to small components is good, but you need a way of combining things for production deployment - see for example https://egghead.io/series/angular-automation-with-gulp
Hello I'm trying to learn Angular.js and IntelliJ IDEA. I was wondering can someone tell me what I'm doing wrong. I'm trying to do a simple hello world example from a book, but it's not working for me in the IDE. I'm not sure whats really sure why it's not working, but to start the project I downloaded the AngularJS plugin. I went to the project location using the command line and did bower install angular, and copy and pasted the example from the ng-book for hello world, but it's not working for me. I tried to add the path to the html and it still didn't work. Can someone help me out?
you can see the working version of your work:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.15/angular.min.js"></script>
</head>
<body ng-app="exampleModule">
<input ng-model="dynamicName" type="text" placeholder="write your name here">
<p>Hello {{dynamicName}} !</p>
<script>
angular.module('exampleModule', []);
</script>
</body>
</html>
I dont know is you address angular correctly or not, but you need a module for your code, even an empty one like what I've just put in the script tag.
Option 1 - Move the ng-app directive to body tag of the page.
Option 2 - It could be possible that browser is rendering a cached page which had errors. Can you force refresh to GET the latest files? In most modern browsers user CTRL+F5.
Option 3 - Use the developer panel of the browser and force reload the page and notice any error.
The problem is with the file read/write permissions on your localhost file.Go to the bower_components file in your finder, right-click ->get info. Scroll down in the info window to the permissions section and change sharing and permissions to Everyone - Read/Write.
Then click the Cog drop down and select the option Apply to enclosed items
Hope this helps.
You are trying to invoke the angular file from wrong path
replace with following
<script src="../bower_components/angular/angular.js"></script>