I am newly picking up angularJS, cannot figure out my situation here:
Everything goes fine when I just open official phonecat tutorial file.
However, if I create my own project, the binding never displays well, it also shows out "{{ }}".
Pictures show all I got here. I believe nothing wrong with the script referencing, just cannot figure out after tried hundred times.
It seems script referencing is not correct. Make sure that your script reference is correct.
I run the following code and it gave me the expected result.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body data-ng-app>
<p>{{1+2}}</p>
</body>
</html>
See Demo
In the browser check the source. Does angular exist in your browser.
Related
Say that an app needs to be created using AngularJS with Cordova in Visual Studio, do I require anything else besides the Google CDN to use AngularJS?
<!doctype html>
<html ng-app>
<head>
<title>My Angular App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</head>
<body>
</body>
</html>
I notice that npm is usually used to install AngularJS, though if just a simple app needs to be created, could this be sufficient.
Code from: https://docs.angularjs.org/misc/downloading
That's all you need. I find installing angular locally is great for development, since I use developer tools to disable caching and I don't want to ping the CDN everytime I update a view, but for quick projects the CDN is fine.
I am learning angularjs, and creating examples for the same,
i cannot initiate app in <head> tag, like <head ng-app="exampleApp"> can anybody please help me for the same.
<head> tag never gets rendered so you cannot initiate the app in there as you cannot have view code there either.
I recently started to learn Angularjs 2, I don't have much experience in Angular 1 and I'm following their docs.
I need to write in brazilian portuguese and I usually insert a charset of iso-8859-1 in my HTML's head. When I used my html in Angular structure the charset wasn't recognised anymore.
This is the example that I'm using to test. When I use this html in the Angular template or its main index the charset is not recognised.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="iso-8859-1">
<title>João Paulo's site</title>
</head>
<body>
<h1>João Paulo</h1>
<h2>áéíóú ÁÉÍÓÚ çõ</h2>
</body>
</html>
The problem is solved despite I'm not sure why. As my page was evolving I started to load the page's content by a external json file.
I'm still confused about utf-8 and iso-8859-1, but what solved the problem was to let the html page charset as utf-8 and I had to save the json file as iso-8859-1.
I followed the instruction on jetBrains to Installing AngularJS Manually. 1.4.x stable
Created a folder and drag it to the WebStorm icon on my El Capitan dock.
Right click on the folder and created a new file and named it index.html
Added the ng-app directive to bootstrap the application to the html element.
Trying to get the context assist to help resolve the link to angular.js file which is located as a sibiling to the folder I created in step 2 above but do not see it in the list after hitting ^Space twice.
So I just typed it by hand
<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="/../angular.js"></script>
</head>
<body>
Name: <input ng-model="username"/>{{username}}
</body>
</html>
But Chrome is showing the Binding with the expression inside it instead of evaluating it.
What am I doing wrong? Thanks
This JSFiddle works
<body ng-app>
Name: <input ng-model="username"/>{{username}}
</body>
so my assumption is that your reference to angular.js isn't being loaded in the browser because it is incorrect. You will need to link to a CDN for angular or place the angular.js file somewhere under your project directory. See the following for why External Libraries will not work as a reference. WebStorm: How can I link the HTML to an installed JS library?
I can't figure out why I'm getting the ERR_EMPTY_RESPONSES error below. I am working on Chapter 2 of Learning AngularJS by Ken Williamson. I typed in all the code exactly as it is in the book and set up the directory structure exactly as it is listed in the book. However, when I try to run the project (locally on my computer), I get the following error:
Failed to load resource: net::ERR_EMPTY_RESPONSE (22:27:47:397 | error, network)
at http://localhost:8383/AngularJsHelloWorld_chapter2/partials/main.html
Error: [$compile:tpload] http://errors.angularjs.org/1.5.0-rc.0/$compile/tpload?p0=partials%2Fmain.html&p1=-1&p2=
at Error (native)
The code for the relevant pages look like this:
Index.html:
<!DOCTYPE html>
<html lang="en" ng-app="helloWorldApp">
<head>
<title>AngularJS Hello World</title>
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="js/libs/jquery-1.11.3.min.js"></script>
<script src="js/libs/angular.min.js"></script>
<script src="js/libs/angular-route.min.js"></script>
<script src="js/libs/angular-resource.min.js"></script>
<script src="js/libs/angular-cookies.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
main.html:
<div>{{message}}</div>
I realize I might need to provide additional information. Any help is appreciated.
Here is a link to the directory structure:
https://library.oreilly.com/book/0636920035831/learning-angularjs/14.xhtml?ref=toc#idp2844416
Here is the code on Github: https://library.oreilly.com/book/0636920035831/learning-angularjs/14.xhtml?ref=toc#idp2844416
By the way, my directory is slightly different from the book in that I have the latest versions of the js framework in it.
This error is caused by a known issue in ngRoute (https://docs.angularjs.org/api/ngRoute):
If ngView is contained in an asynchronously loaded template (e.g. in another directive's templateUrl or in a template loaded using ngInclude), then you need to make sure that $route is instantiated in time to capture the initial $locationChangeStart event and load the appropriate view. One way to achieve this is to have it as a dependency in a .run block: myModule.run(['$route', function() {}]);
Adding the following code should fix the error. It did for me when opening the web page locally.
helloWorldApp.run(['$route', function() {}]);