The following code does not seem to work for me. I'm doing the official video tutorial from their website.
<!doctype html>
<html ng-app>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<script>
function TodoCtrl($scope){
$scope.totalTodos = 4;
}
</script>
</head>
<body>
<div ng-controller="TodoCtrl">
{{totalTodos}}
</div>
</body>
</html>
I also tried to do this tutorial here (http://www.ng-newsletter.com/posts/beginner2expert-how_to_start.html) and it does not work with 1.2.12 but when I changed it to 1.0.7 it did.
Am I doing something silly here or are these tutorials too old now?
I don't think this is an Angular version issue. Here is a plunker that is working with 1.2.12.
I think you are just missiong http: at the front of your source. The tutorial you reference looks like this:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
So, your code should reference angular like this:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
Related
I am new to use angular.js.
I want to use gauge module ,but after i finish my html following Angular Gauge Document,it's not working(browser shows nothing).
I guess the problem is i didnt make the module work.
Can anybody tell me what is wrong with my code.
<!DOCTYPE HTML>
<html>
<body ng-app = "myApp">
<ng-gauge size="150" type="full" thick="5"
min="0" max="120" value="68.2"
cap="round" label="Speed" append="mph"
foreground-color="#ffcc66" background-color="#EEE">
</ng-gauge>
</body>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.6.4/angular.min.js"></script>
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-gauge/dist/angularjs-gauge.min.js"></script>
<script>
angular.module('myApp', ['angularjs-gauge']);
</script>
</html>
Plus, in the document installation part,it says:
As soon as you've got all the files downloaded and included in your page you just need to declare a dependency on the chart.js module:
i didnt use chart.js module in my project,so which chart.js file this guide refer to ?
You need to include the script tags inside the body tag, also you included the angular.min.js twice.
<!DOCTYPE HTML>
<html>
<body ng-app = "myApp">
<ng-gauge size="150" type="full" thick="5"
min="0" max="120" value="68.2"
cap="round" label="Speed" append="mph"
foreground-color="#ffcc66" background-color="#EEE">
</ng-gauge>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://rawgit.com/ashish-chopra/angular-gauge/master/src/angularjs-gauge.js"></script>
<script>
angular.module('myApp', ['angularjs-gauge']);
</script>
</body>
</html>
Please tell me why this very basic plunk is not working.
[https://plnkr.co/edit/alQf2gACkYFSirjCzBFs?p=preview][1]
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app>
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
I think there isn't any errors in this code.
Please explain me how to fix this.
Also let me know if anything needs to be known about Plunker.
Thanks for help.
Hi the plunk u created evrything is correct but the library for angular you mentioned have problem
http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js
change to this
https://code.angularjs.org/1.3.20/angular.js
thats it try.
Replacing
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
with
<script data-require="angular.js#1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script>
solved my problem for my basic angular JS application.
I am only a few days into AngularJS, and have been having trouble trying to print out this simple message. I have 2 files, one is "index.html" and the other is "app.js". They are mind-numbingly simple:
<!--index.html:-->
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Testing Angular</title>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div ng-controller="maryCtrl">
<p>{{mary}}</p>
</div>
</body>
</html>
<<!--end of index-->
//app.js:
var myApp = angular.module('myApp', []);
myApp.controller('maryCtrl', function ($scope) {
$scope.mary = 'had a little lamb.';
});
//end of app.js
The output on the page should be "had a little lamb." but I get "{{mary}}" instead. What really pisses me off is that I have a separate computer where it works just fine. I figure I must have a character wrong or am missing an extension, but I find that hard to believe since I just downloaded Visual Studio 2015 on this machine which has AngularJS and Angular-intellisense pre-loaded. Any help or criticism would be greatly appreciated.
you need a reference to the angular.js code.
make sure it is at the top of your script references.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.min.js"></script>
The link I provided is for a copy of the code that is hosted on a Google CDN. There are tons of benefits for using the CDN as opposed to having a local copy of angular.js on your computer (as long as you aren't trying to test your code offline).
You can find the CDN link on angularjs.org; Just click on the big blue download button and you will see options for obtaining the most recent version or legacy versions of angular.js
as #Pankaj Parkar commented, you should have angular.js file referenced before your app.js file:
<!--index.html:-->
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Testing Angular</title>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div ng-controller="maryCtrl">
<p>{{mary}}</p>
</div>
</body>
</html>
<<!--end of index-->
//app.js:
var myApp = angular.module('myApp', []);
myApp.controller('maryCtrl', function ($scope) {
$scope.mary = 'had a little lamb.';
});
//end of app.js
you can download it from https://github.com/angular/angular.js
newbie here,
(this is important to me as i often don't have access to the internet.)
i have this strange problem where this code works fine on jsfiddle:
fiddle here ->https://jsfiddle.net/w4g71ea8/2/
but not when i try it on my own computer breaking it into seperate files (in same directory) and view with chrome.
Also I had to set no wrap-in on js fiddle for that to work.
test3.html :
<!doctype html>
<html>
Angular JS Tutorial
<head>
<script src= "file:///home/chronos/user/Downloads/angular/angular.js" > </script>
</head>
<body ng-app="myapp">
<script>
src= "script3.js"
</script>
<div ng-controller="HelloController" >
<h2>Welcome {{speak}} to the world!</h2>
</div>
</body>
</html>
script3.js :
var app = angular.module('myapp', []);
app.controller("HelloController", function($scope) {
$scope.speak = "Joe";
});
I'm not sure where did you copy this html, but it's wrong. Try like this:
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="script3.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="HelloController">
<h2>Welcome {{speak}} to the world!</h2>
</div>
</body>
</html>
And, since you said you're a newbie, it'd be a good habit to start using your code ready for future minifications:
// script3.js
var app = angular.module('myapp', []);
app.controller('HelloController', ['$scope', function($scope) {
$scope.speak = 'Joe';
}]);
On the other hand, I don't agree with some comments above; you don't have to install any webserver or something to see it's working. Just create your html and js files, drop it to the browser. Only thing you need to keep in your mind is file:// usage is not valid here. Either use full url from any CDN, or download the file and enter local path like /js/angular.js. I'm not talking about ng-view and ng-include of course, since they are making AJAX calls, you'll need some sort of webserver. But in this example, you don't need at all.
How does any body know how to divide a single html page in different view with angular.js.
I have this working :
<!doctype html>
<html lang="en" ng-app="phonecat">
<head>
....
</head>
<body>
<div ng-view></div>
</body>
</html>
But i would like to do something like this :
<!doctype html>
<html lang="en" ng-app="phonecat">
<head>
....
</head>
<body>
<div ng-view Sidebar></div>
<div ng-view></div>
<div ng-view Footer></div>
</body>
</html>
In advance thanks.
I think what you're looking for is "ng-include" : http://docs.angularjs.org/api/ng.directive:ngInclude
The Angular UI router should be a newer better way to handle this problem. At least that's its goal, and it looks very promising, but I haven't used it yet myself.
Angular UI is restructuring their site right now, so the links are a little scattered:
https://github.com/angular-ui/ui-router/wiki
http://angular-ui.github.io/ui-router/sample/#/