I am starting to learn Angular and tried to repeat the "To do list" task they have on the homepage. However, I am stuck in the very beginning:
http://codepen.io/Deka87/pen/grGWqQ
Template
<div ng-app>
<div ng-controller="TodoCtrl">
<h2>{{totalItems}}</h2>
</div>
</div>
Javascript
function TodoCtrl($scope) {
$scope.totalItems = 4;
}
I seem to do the very same thing, however it doesn't work. What's wrong?
First you must import the angular library, then instantiate your app and finally create your controller, this way:
angular.module('app', [])
.controller('TodoCtrl', function($scope) {
$scope.totalItems = 4;
});
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>
<body ng-controller="TodoCtrl">
<div>
<h2>{{totalItems}}</h2>
</div>
</body>
</html>
I recommend you to check this: What is a Module?
http://codepen.io/anon/pen/EywXXQ Here is the fork of your codepen with the code working.
You need to import the angular script
Need to create an angular app like this
Inject the app in your html using ng-app
Create a controller and inject it in your html using ng-controller
angular.module('app', []).controller('TodoCtrl',
function ($scope) {
$scope.totalItems = 4;
});
Go through these tutorials that will help you understand it better
Tutorial
Related
I created a basic angular js module where I am passing the module and the controller message in a separate script file. The issue I am facing is it does not print the message defined in the called function. This seems to me might be an issue with the ng-app defined.
Here is the code :
module.html
<!doctype HTML>
<html ng-app="myModule">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src = "D:\Educational\angularJS code\script.js"></script>
</head>
<body>
<div ng-controller="myController">
{{ message }}
</div>
</body>
</html>
And here is the called script.
script.js
var myApp = angular.module("myModule",[]);
var myController = function($scope){
$scope.message = "Angular JS";
}
myApp.controller("myController", myController);
The only thing that gets printed in the format is {{message}} and NOT the actual message "Angular JS".
Any suggestions would be of great help.
Since you have your script.js in the same folder just include it simply by
<script src="script.js"></script>
make sure you have internet on your computer since you are using a CDN
Note: please check your console by pressing ctrl+j or f12 to see if there are any errors
You can also try putting your code into the markup itself for now and check if the code works fine.
<script>
var myApp = angular.module("myModule",[]);
var myController = function($scope){
$scope.message = "Angular JS";
}
myApp.controller("myController", myController);
<script>
Code:
<!DOCTYPE html>
<html>
<head>
<!-- angular -->
<script src="angular.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="MainController">
<p>{{ title }}</p>
</div>
<!-- Modules -->
<script src="app.js"></script>
<!-- Controllers -->
<script src="MainController.js"></script>
<!-- Directives -->
<script src="timelineInfo.js"></script>
</body>
</html>
All my files are in the same folder because I was having a problem doing src="js/...".
I get the error:
angular.min.js:6 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.0-rc.1/$injector/modulerr?p0=app&p1=Error%3…0%20%20at%20c%20(http%3A%2F%2Flocalhost%3A8080%2Fangular.min.js%3A20%3A42
I don't exactly understand what the website was suggesting. I'm using the angular.min.js in my index directory because linking it to the http file was giving me issues. All I'm trying to do is run a simple app so I can build from there but even that is giving me issues.
(I am running from a local machine)
Thanks!!
---------------------------------OTHER FILES----------------------
app.js:
var app = angular.module("timelineApp", []);
MainController.js:
app.controller('MainController', ['$scope', function($scope) {
$scope.title = 'this is a test';
}]);
The problem is that in your html you have app module referenced in ng-app. And in your app.js you have module name as timelineApp.
You need to sync them.
Either update your app.js
from
var app = angular.module("timelineApp", []);
to
var app = angular.module("app", []);
Or update your markup from
<body ng-app="app">
to
<body ng-app="timelineApp">
ng-app value in your html code should have the same as the angular module in your javascript.
For example in you case it should be following:-
<ng-app="timelineApp"> // in your html code
or following:-
var app=angular.module('app',[]); // in your javascript
Also, if you still face the error after that too, then you can one of my answers on the same here
The error you are getting refers to the fact that your application is not bootstrapped correctly. Hence Angular's compiler does not understand the directives it encounters; in this case, that would be ng-controller
It's important that you understand what's happening.
var app = angular.module("timelineApp, []")
and subsequently
<body ng-app="app">
ng-app should really be timelineApp since that is what you set the name of your angular module to.
The code above "bootstraps" your application. Once you application is bootstrapped, Angular's compiler will go through the page's markup. When it encounters ng-app directive, it will look at its value timelineApp and know that it is registered as an angular application.
This also help it understand that you have a controller registered on the app:
app.controller('MainController', ['$scope', function($scope) {
$scope.title = 'this is a test';
}]);
I am learning Angular.js and I am not able to figure out whats wrong with this simple code. It seems to look fine but giving me following error.
**Error**: Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.14/$injector/modulerr?p0=app&p1=Error%3A%20…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A17%3A381)
And before adding ng-app="app" (I was just keeping it as ng-app) it was giving me following errors. Why is that?
Error: [ng:areq] http://errors.angularjs.org/1.3.14/ng/areq?p0=Ctrl&p1=not%20a%20function%2C%20got%20undefined
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:6:417
at Sb (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:19:510)
at tb (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:20:78)
at $get (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:75:331)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:57:65
at s (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:7:408)
at A (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:56:443)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:51:299)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:51:316)
<!doctype html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-controller="Ctrl">
<input ng-model="name">
<h1>{{name}}</h1>
<h2>{{age}}</h2>
</div>
<script>
var Ctrl = function($scope)
{
$scope.age = 24;
};
</script>
</body>
</html>
After AngularJS version 1.3 global controller function declaration is disabled
You need to first create an AngularJS module & then attach all the components to that specific module.
CODE
function Ctrl($scope) {
$scope.age = 24;
}
angular.module('app', [])
.controller('Ctrl', ['$scope', Ctrl]);
Specifically for your case, there is some issue with AngularJS 1.3.14 (downgrade it to 1.3.13 works fine). Though I'd prefer you to use angular 1.2.27 AngularJS 1.6.X, Which is more stable version & latest release of AngularJS.
Working Plunkr
UPDATE:
You could do your current code to working state by allow global controller declaration inside angular.config. But this isn't the correct way to run angular application.
function Ctrl($scope) {
$scope.age = 24;
}
angular.module('app', [])
.config(['$controllerProvider',
function ($controllerProvider) {
$controllerProvider.allowGlobals();
}
]);
I was myself stuck in this issue for sometime. Check for following in order:-
The path to you angular.js script is correct (whether you are calling it in your HTML from a local source or as an external resource).
Next, once your angular.js is correct check if your app is initialized or not.
var app=angular.module('app',[])//in your app.js file
<body ng-app="app">//in your html
Next register your controller with the app and pass in all necessary injections
app.controller('myCtrl',function(){});
Call your javascript file in your html file
<script src="app.js"></script>
You have to define your controller
var app = angular.module('app', []);
app.controller('Ctrl', ['$scope',function($scope) {
$scope.age = 24;
}]);
Be Sure that ng-app="app_name" define must match to
var app=angular.module('app_name',[])
<html ng-app="myApp">
<body>
<div ng-controller="Ctrl">
<input ng-model="name">
<h1>{{name}}</h1>
<h2>{{age}}</h2>
</div>
<script>
var app = angular.module('myApp',[]); // same to the above define appName
app.controller('Ctrl',function($scope){
$scope.age=24; // initialize age by injecting scope
});
</script>
</body>
<html>
For more details visit Here
Check the version of angularjs in your html file.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
Call your javascript file in your HTML file
<script src="app.js"></script>
I am new to AngularJS and I am trying to understand it by studying sample codes.
Here I have one about $http.get, from the following link:
http://www.w3schools.com/angular/tryit.asp?filename=try_ng_customers_json
I just replaced url with one of my own but it did not work, and I am really confused, please help, thanks!
=========================
second edit: thanks to the answers, double ng-app is a mistake, but it is not the main reason for this problem. I think it has something to do with cross-site blocking, but I have turn it off on my API (I use codeigniter REST API and I set $config['csrf_protection'] = FALSE; ), I am not sure how to configure it.
<!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="customersCtrl">
<ul>
{{names}}
</ul>
</div>
<div ng-controller="myCtrl">
<ul>
{{names}}
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://www.w3schools.com/website/Customers_JSON.php")
.success(function (response) {$scope.names = response;});
});
app.controller('myCtrl', function($scope, $http) {
$http.get("https://manage.pineconetassel.com/index.php/api/v1/colors2.php")
.success(function (response) {$scope.names = response;});
});
</script>
</body>
</html>
The problem is that you have two "myApp" declarations.
From AngularJS documentation:
Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application.
So, you should move the ng-app="myApp" to the body element.
However, once you've done that you probably still won't see any result because you are cross-site scripting and browsers will (by default) block the second request.
Two ng-app directive on single page will execute the first one, 2nd one will get ignored.
Remove ng-app="myApp" from both div of your html and use angular.bootstrap to bootstrap angular app on html page using below code.
Code
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});
I have just started developing with AngularJS a few days ago, and this issue really bugs me.
I keep getting this error:
Error: ng:areq
Bad Argument
Argument 'NewStudentCtrl' is not a function, got undefined
All other controllers are working since I am using them in other files, just NewStudentCtrl won't work.
I have tried a lot of different things, only one worked: defining the controller using function NewStudentCtrl ($scope) {} inside the HTML file itself right before the use of the controller. The problem is that I want to split HTML and JS into seperate files.
Please note that the provided source is simplified a lot, there might be little indentation or syntax errors.
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<script>var app = angular.module('myApp',[]);</script>
</head>
<body>
<div ng-controller="NewStudentCtrl">
<div ng-controller="AccountMenuCtrl">
</div>
<script src="js/account-menu.js">
function AccountMenuCtrl ($scope) {
}
</script>
<div ng-controller="OrtsteileCtrl">
<option value="{{ortsteil.ID}}" ng-repeat="ortsteil in ortsteile">
{{ortsteil.Name}}
</option>
</div>
</div> <!-- end NewStudentCtrl -->
<!-- Loading dependencies -->
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/new-student.js">
var app = angular.module("myApp");
function NewStudentCtrl ($scope) {
}
</script>
<script src="js/plz.js">
angular.module('myApp').controller('OrtsteileCtrl', ['$scope', '$http',
function($scope, $http) {
}]);
</script>
</body>
</html>
EDIT: Scratch that, something I didn't realise is that angular is happy with mixing them.
The issue is because you are recreating your module several times:
Line 4: <script>var app = angular.module('myApp',[]);</script>
Line 28: var app = angular.module("myApp");
Line 34: angular.module('myApp').controller(...
fiddle: http://jsfiddle.net/uXpqL/