can anyone please tell me what is wrong in this code? I am getting {{author.name}} as output on my browser. Browser error says angular is not defined and failed to instantiate the module AuthorApp
<!DOCTYPE html>
<html ng-app="AuthorApp" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script src="Authors.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>
</head>
<body >
<div ng-controller="MyController">
<ul>
<li ng-repeat="author in authors">
{{author.name}}
</li>
</ul>
</div>
</body>
</html>
Author.js code
var AuthorApp = angular.module('AuthorApp', []);
AuthorApp.controller("MyController", function ($scope) {
$scope.authors = [
{ 'name': 'Xyz' },
{ 'name': 'abc' }
];
});
authors.js will be executed first and then angular will be loaded. Change the order of your scripts
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js">
<script src="Authors.js"></script>
</head>
The previous answer was correct, but I can't comment yet. I put your code in a plunk with the script order corrected and it works fine:
http://plnkr.co/edit/kIb0y2?p=preview
Do you have the path to the Author.js file correct? It needs to be in the same directory for referencing it without any other path info to work. Test to see if it is loading by putting an alert at the top of the file. If you don't get the alert, tinker with the path in the src attribute for the script until you get it.
//Author.js code
alert("Author.js file loaded!");
var AuthorApp = angular.module('AuthorApp', []);
AuthorApp.controller("MyController", function ($scope) {
$scope.authors = [
{ 'name': 'Xyz' },
{ 'name': 'abc' }
];
});
Related
I am new to angularjs and have written a small program but facing the error "scope.detailsForm" as undefined. Could someone help me what is the issue with the below code.
b.js file:
var app = angular.module('my-app', []);
app.controller("my-cont", function($scope) {
$scope.detailsForm.clickme.$setValidity("error1",true);
});
b.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript" src="b.js"></script>
</head>
<body ng-app="my-app" ng-controller="my-cont">
<form method="get" name="detailsForm" ng-model="detailsForm">
<button name='clickme' ng-disabled="detailsForm.clickme.$error.error1">Click Me!</button>
</form>
</body>
</html>
Your problem is that you can not get it when the controller is not built, you need to wait for the html to be processed by Angular. Here's an example.
As you'll see in the console, the first log will echo undefined, and the second will echo the form.
var app = angular.module('MyApp', []);
app.controller("MyCont", ['$scope', function($scope) {
console.log($scope.detailsForm);
$scope.onClicked = function()
{
console.log($scope.detailsForm);
}
}]);
I am learning AngularJS following the code samples in ng-book.
I have the following folder structure under the app root folder
../css
../img
../lib
../lib/angular
../js
../partials
I have angular 1.2.11 installed in the lib/angular directory (yes I know this is not the latest version..)
The following code works fine in Firefox (41.0.1) but in Chrome (45.0.2454.101 m), Edge and IE (11.0.22) I get an error message
"Argument 'MyController' is not a function, got undefined"
Code follows:
index.html in root folder:
<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<div>
{{1+1}}
</div>
<div ng-controller="MyController">
{{name}}<br/> {{clock}}
</div>
<script src="lib/angular/angular.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
in app.js in the js folder:
function MyController($scope) {
$scope.name = "in sub";
$scope.clock = new Date();
console.log = "Active";
var updateClock = function () {
$scope.clock = new Date();
};
setInterval(function () {
$scope.$apply(updateClock);
}, 1000);
updateClock();
};
If I put the app.js into the root folder it still does not work so it is not path related.
If I put the code into an inline script then it works so I don't think it is an issue with the code. Why does this work in one browser but not the others. For reference i am calling this directly from the file browser, not via http.
file:///C:/Users/aaron_000/Desktop/Programming/Angular/app/index.html
If I upgrade to a later version of angular does the problem go away?
I know that this is not the 'proper' way to construct an Angular app, but I am taking it one component at a time :)
Look js/app.js is right. Works fine for me.
var app = angular.module("App", []);
app.controller('AppController', function MyController($scope) {
$scope.name = "in sub";
$scope.clock = new Date();
console.log = "Active";
var updateClock = function() {
$scope.clock = new Date();
};
setInterval(function() {
$scope.$apply(updateClock);
}, 1000);
updateClock();
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.min.js"></script>
<!doctype html>
<html lang="en" ng-app="App">
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
</head>
<body>
<div>
{{1+1}}
</div>
<div ng-controller="AppController">
{{name}}
<br/>{{clock}}
</div>
</body>
</html>
I'm beginning to work with AngularJS and am having trouble working with a local copy of the angular.js file. Below is the sample I am trying to get to work. When I reference the CDN script, the page correctly displays 'Hello, World'. When I reference the local script, the binding does not occur. The browser is able to locate the local angular.js file, it just doesn't seem to perform the binding.
<html ng-app>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js"></script>
<!--<script src="Scripts/angular.js"></script>-->
<script>
function HelloController($scope) {
$scope.greeting = { text: "Hello" };
}
</script>
</head>
<body>
<div ng-controller="HelloController">
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
If I was starting out with 1.3.15 would do something like this:
<html ng-app="main.app">
<head>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script>
angular.module('main.app', [])
.controller('HelloController', function () {
var self = this;
this.greeting = { text: "Hello" };
})
</script>
</head>
<body ng-controller="HelloController as HelloCtrl">
<p>{{HelloCtrl.greeting.text}}, World</p>
</body>
</html>
This follows the latest styles of angular coding
I just started to use ui-bootstrap module.
Here is my code, I think, I have imported everything right, no ?
<!DOCTYPE html>
<html ng-app="mainApp">
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/angular.js"></script>
<script src="js/ui-bootstrap-tpls.js"></script>
</head>
<body ng-controller="MainCtrl">
<alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</alert>
<button class='btn btn-default' ng-click="addAlert()">Add Alert</button>
<script>
var mainApp = angular.module('mainApp', ["ui.bootstrap"]);
mainApp.controller('MainCtrl', function ($scope) {
$scope.alerts = [
{ type: 'danger', msg: 'Oh snap! Change a few things up and try submitting again.' },
{ type: 'success', msg: 'Well done! You successfully read this important alert message.' }
];
$scope.addAlert = function() {
$scope.alerts.push({msg: 'Another alert!'});
};
$scope.closeAlert = function(index) {
$scope.alerts.splice(index, 1);
};
});
</script>
</body>
</html>
I have this error, when I click on Add Alert :
Error: [$parse:syntax] http://errors.angularjs.org/1.2.19/$parse/syntax?p0=alert.type&p1=is%20unex…20expecting%20%5B%3A%5D&p2=3&p3=%7B%7Balert.type%7D%7D&p4=alert.type%7D%7D
do you have any ideas, why ?
futhermore, alert div are not displayed, maybe I cannot display the template from ui-bootstrap ?
EDIT :
We should use this type="alert.type" rather than type="{{alert.type}}"
Im not sure if its in your orginal code but in line:
mainApp.controller('MainCtrl', function ($scope) {s
you have "s" on the end of line.
I'm trying to ng-repeat over 'cols' as a starting point. But I'm getting an error when trying to consume this JSON
{
"cols":["id","name","type"],
"rows":[
["284","JAMES DEAN","Employee"],
["243","Brian J Adamms","Employee"],
["237","Test Account","Brokerage Account"],
["241","Robert Borkman","guest"]
]
}
The error appears to be in the angularJS file, but Im sure the problem is elsewhere.
Error: a.push is not a function
W#http://127.0.0.1/js/lib/angular.min.js:10
g#http://127.0.0.1/js/lib/angular-resource.min.js:7
u/</g[b]/</<#http://127.0.0.1/js/lib/angular-resource.min.js:8
o#http://127.0.0.1/js/lib/angular.min.js:7
u/</g[b]/<#http://127.0.0.1/js/lib/angular-resource.min.js:8
Rc/e/g.promise.then/i#http://127.0.0.1/js/lib/angular.min.js:79
Rc/e/g.promise.then/i#http://127.0.0.1/js/lib/angular.min.js:79
Rc/f/<.then/<#http://127.0.0.1/js/lib/angular.min.js:79
e.prototype.$eval#http://127.0.0.1/js/lib/angular.min.js:91
e.prototype.$digest#http://127.0.0.1/js/lib/angular.min.js:89
e.prototype.$apply#http://127.0.0.1/js/lib/angular.min.js:91
f#http://127.0.0.1/js/lib/angular.min.js:100
B#http://127.0.0.1/js/lib/angular.min.js:103
ad/</p.onreadystatechange#http://127.0.0.1/js/lib/angular.min.js:105
Here is a "plunker" example - run console - you'll see the same error I'm getting - and the JSON shows as an empty array.
http://plnkr.co/edit/QgNkvsOIVzrpUp5pP02p?p=preview
Thank you all for help
I don't think the error is in angular source, and it will handle that JSON just fine: http://plnkr.co/edit/knJQ0S?p=preview
Im able to get what problem you are facing see the below code
<html ng-app="myapp" >
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<script src="Scripts/Angular.js"></script>
</head>
<body >
<div ng-controller="TestCtrl" >
<div ng-repeat="data in data.cols">
{{data}}
</div>
</div>
<script>
var myapp = angular.module('myapp', []);
function TestCtrl($scope, $http,$timeout) {
$scope.data = {
"cols": ["id", "name", "type"],
"rows": [
["284", "JAMES DEAN", "Employee"],
["243", "Brian J Adamms", "Employee"],
["237", "Test Account", "Brokerage Account"],
["241", "Robert Borkman", "guest"]
]
};
}
</script>
</body>
</html>