I'm trying some initial stuff to get used to AngularJS. My current source is SoloLearn. I tried to recreate their app, which adds +1 to a counter when a button is clicked.
I have tried checking the code from their app, and I've also copied and pasted their work onto my HTML file and it still doesn't work, I tried an online tool for ascii diffs and my code should be identical, yet my inspector yields this:
http://errors.angularjs.org/1.6.4/$controller/ctrlreg?p0=clickCounter
at angular.js:38
at angular.js:10839
at ba (angular.js:9931)
at n (angular.js:9701)
at g (angular.js:9055)
at g (angular.js:9058)
at g (angular.js:9058)
at angular.js:8920
at angular.js:1919
at m.$eval (angular.js:18161)
I checked the site and as I understand, my code should still be working, yet it's not.
My code:
<div ng-app="MyApp" ng-controller="myCtrl">
<button ng-click="count=count+1">Click me!</button>
<p> {{count}} </p>
</div>
<script>
var app = angular.module('MyApp',[])
app.controller('myCtrl', function($scope) {
$scope.count=0;
});
</script>
Their code:
<div ng-app="myApp" ng-controller="clickCounter">
<button ng-click="count=count+1">Click me!</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('clickCounter', function($scope) {
$scope.count = 0;
});
</script>
Thanks for the help!
I have added both in different plunker, both are working
http://plnkr.co/edit/Pk8bY3jMiRqwiyWhxEkn?p=preview
http://plnkr.co/edit/aJZTXMQ1dATZI4XUSCmc?p=preview
<div ng-app="myApp" ng-controller="clickCounter">
<button ng-click="count=count+1">Click me!</button>
<p>{{ count }}</p>
var app = angular.module('myApp', []);
app.controller('clickCounter', function($scope) {
$scope.count = 0;
});
As #Lex mentioned, I needed to define the Angular app specifically for the app I was running and not have it all generically crammed in the same place.
The code on the first URL I posted is working now. Basically changing the body tag to this: <body ng-app=""> and naming each div app made everything work as should.
Thank you all for your help.
Related
I was trying to write a simple Angular app, when I came upon a problem. My perfectly simple and short boilerplate code runs entirely fine in a Codepen, but it fails to work in a JSFiddle. The snippet I created below works fine as well, but I cannot figure out why it does not work in JSFiddle. Could anyone point out what the problem is?
Codepen link: http://codepen.io/chalarangelo/pen/YWdvBV
JSFiddle link: https://jsfiddle.net/chalarangelo/1d12hm5f/1/
Code snippet:
var app = angular.module('myApp', []);
app.controller('myController', [
'$scope',
function($scope) {
$scope.demoText = 'AngularJS: This is some demo text!';
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myController">
<p>
{{ demoText }}
</p>
</div>
</div>
You should click the JAVASCRIPT button and select an Angular version under the FRAMEWORKS & EXTENSIONS dropdown, instead of including it as an external resource.
To fix your problem, you must select the LOAD TYPE as No wrap - in <head>.
I'm trying to add two angular apps / modules to one page.
In the fiddles below you can see that always only the first module, referenced in the html code, will work correctly, whereas the second is not recognized by angular.
In this fiddle we can only execute the doSearch2 method, whereas in this fiddle only the doSearch method works correctly.
I'm looking for the way how to correctly place two angular modules into one page.
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. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead. AngularJS applications cannot be nested within each other.
-- http://docs.angularjs.org/api/ng.directive:ngApp
See also
https://groups.google.com/d/msg/angular/lhbrIG5aBX4/4hYnzq2eGZwJ
http://docs.angularjs.org/api/angular.bootstrap
I created an alternative directive that doesn't have ngApp's limitations. It's called ngModule. This is what you code would look like when you use it:
<!DOCTYPE html>
<html>
<head>
<script src="angular.js"></script>
<script src="angular.ng-modules.js"></script>
<script>
var moduleA = angular.module("MyModuleA", []);
moduleA.controller("MyControllerA", function($scope) {
$scope.name = "Bob A";
});
var moduleB = angular.module("MyModuleB", []);
moduleB.controller("MyControllerB", function($scope) {
$scope.name = "Steve B";
});
</script>
</head>
<body>
<div ng-modules="MyModuleA, MyModuleB">
<h1>Module A, B</h1>
<div ng-controller="MyControllerA">
{{name}}
</div>
<div ng-controller="MyControllerB">
{{name}}
</div>
</div>
<div ng-module="MyModuleB">
<h1>Just Module B</h1>
<div ng-controller="MyControllerB">
{{name}}
</div>
</div>
</body>
</html>
You can get the source code at:
http://www.simplygoodcode.com/2014/04/angularjs-getting-around-ngapp-limitations-with-ngmodule/
It's essentially the same code used internally by AngularJS without the limitations.
Why do you want to use multiple [ng-app] ? Since Angular is resumed by using modules, you can use an app that use multiple dependencies.
Javascript:
// setter syntax -> initializing other module for demonstration
angular.module('otherModule', []);
angular.module('app', ['otherModule'])
.controller('AppController', function () {
// ...do something
});
// getter syntax
angular.module('otherModule')
.controller('OtherController', function () {
// ...do something
});
HTML:
<div ng-app="app">
<div ng-controller="AppController">...</div>
<div ng-controller="OtherController">...</div>
</div>
EDIT
Keep in mind that if you want to use controller inside controller you have to use the controllerAs syntax, like so:
<div ng-app="app">
<div ng-controller="AppController as app">
<div ng-controller="OtherController as other">...</div>
</div>
</div>
You can bootstrap multiple angular applications, but:
1) You need to manually bootstrap them
2) You should not use "document" as the root, but the node where the angular interface is contained to:
var todoRootNode = jQuery('[ng-controller=TodoController]');
angular.bootstrap(todoRootNode, ['TodoApp']);
This would be safe.
Manual bootstrapping both the modules will work. Look at this
<!-- IN HTML -->
<div id="dvFirst">
<div ng-controller="FirstController">
<p>1: {{ desc }}</p>
</div>
</div>
<div id="dvSecond">
<div ng-controller="SecondController ">
<p>2: {{ desc }}</p>
</div>
</div>
// IN SCRIPT
var dvFirst = document.getElementById('dvFirst');
var dvSecond = document.getElementById('dvSecond');
angular.element(document).ready(function() {
angular.bootstrap(dvFirst, ['firstApp']);
angular.bootstrap(dvSecond, ['secondApp']);
});
Here is the link to the Plunker
http://plnkr.co/edit/1SdZ4QpPfuHtdBjTKJIu?p=preview
NOTE: In html, there is no ng-app. id has been used instead.
I made a POC for an Angular application using multiple modules and router-outlets to nest sub apps in a single page app.
You can get the source code at: https://github.com/AhmedBahet/ng-sub-apps
Hope this will help
Please see relevant jsFiddle
Within this file even though I included angular.sanitize.js I am not able to bind the html elements.
HTML Code:
<div ng-app="HelloApp">
<div ng-controller="MyCtrl">
<ul ng-repeat="snippet in myHTML" ng-bind-html="snippet"></ul>
</div>
</div>
JS Code:
var app = angular.module('HelloApp', ['ngSanitize'])
app.controller('MyCtrl', function($scope) {
$scope.myHTML = [];
$scope.myHTML.push('<li>Test1</li>');
$scope.myHTML.push('<li>Test2</li>');
});
Nothing is being displayed when running the jsFiddle. When debugging I am getting an injector error.
Please let me know if you need any more relevant information
Make sure ngSanitize is loaded after Angular. Updated working fiddle: http://jsfiddle.net/36qp9ekL/444/
I'm trying to make an angularjs jfiddle for another question, but I can't get it working. Can somebody look at it and let me know what I'm doing wrong?
<div ng-app="myApp">
<div ng-conroller="MyController">
Click me: <input type="checkbox" ng-model="checked"/><br/>
<div>
{{checked}}
</div>
</div>
</div>
js:
var app = angular.module('myApp', [
'ngAnimate',
'my.controllers'
]);
var controllers = app.module('my.controllers', []);
controllers.controller('MyController', function($scope) {
$scope.checked = true;
});
fiddle link
fiddle link without external libraries
fiddle link with only ng-animate ext library
Can it be that it's because jsfiddle adds a "http://fiddle.jshell.net/_display/" in front of any external library location? Like when I try to add "ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular-animate.js" then jsfiddle changes it to "http://fiddle.jshell.net/_display/ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular-animate.js"
WHY?
You need to set option no wrap - in <body>
You should use:
var controllers = angular.module('my.controllers', []);
Instead of:
var controllers = app.module('my.controllers', []);
This fiddle works: http://jsfiddle.net/NBhn4/1/
EDIT:
To work with ng-animate you need to include external libraries in correct order and use No-Library (pure JS) option or eg. any jQuery library:
Updated fiddle: http://jsfiddle.net/NBhn4/175/
I am writing my answer for those who land on this page , I was used to use ng-module directive but in jsfiddle after half an hour I realized that ng-module is not allowed and you see no error , and when changed that ng-module to ng-app fiddle worked very well .I just wanted to share this .
<div ng-app="appX" ng-controller="appCtrl">
<p>{{greeting}}
</p>
</div>
var app=angular.module("appX",[]);
console.log(app);
app.controller("appCtrl",function($scope){
$scope.greeting="Hello World";
});
https://jsfiddle.net/furkankatman/trgrjwf1/7/
I'm trying to add two angular apps / modules to one page.
In the fiddles below you can see that always only the first module, referenced in the html code, will work correctly, whereas the second is not recognized by angular.
In this fiddle we can only execute the doSearch2 method, whereas in this fiddle only the doSearch method works correctly.
I'm looking for the way how to correctly place two angular modules into one page.
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. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead. AngularJS applications cannot be nested within each other.
-- http://docs.angularjs.org/api/ng.directive:ngApp
See also
https://groups.google.com/d/msg/angular/lhbrIG5aBX4/4hYnzq2eGZwJ
http://docs.angularjs.org/api/angular.bootstrap
I created an alternative directive that doesn't have ngApp's limitations. It's called ngModule. This is what you code would look like when you use it:
<!DOCTYPE html>
<html>
<head>
<script src="angular.js"></script>
<script src="angular.ng-modules.js"></script>
<script>
var moduleA = angular.module("MyModuleA", []);
moduleA.controller("MyControllerA", function($scope) {
$scope.name = "Bob A";
});
var moduleB = angular.module("MyModuleB", []);
moduleB.controller("MyControllerB", function($scope) {
$scope.name = "Steve B";
});
</script>
</head>
<body>
<div ng-modules="MyModuleA, MyModuleB">
<h1>Module A, B</h1>
<div ng-controller="MyControllerA">
{{name}}
</div>
<div ng-controller="MyControllerB">
{{name}}
</div>
</div>
<div ng-module="MyModuleB">
<h1>Just Module B</h1>
<div ng-controller="MyControllerB">
{{name}}
</div>
</div>
</body>
</html>
You can get the source code at:
http://www.simplygoodcode.com/2014/04/angularjs-getting-around-ngapp-limitations-with-ngmodule/
It's essentially the same code used internally by AngularJS without the limitations.
Why do you want to use multiple [ng-app] ? Since Angular is resumed by using modules, you can use an app that use multiple dependencies.
Javascript:
// setter syntax -> initializing other module for demonstration
angular.module('otherModule', []);
angular.module('app', ['otherModule'])
.controller('AppController', function () {
// ...do something
});
// getter syntax
angular.module('otherModule')
.controller('OtherController', function () {
// ...do something
});
HTML:
<div ng-app="app">
<div ng-controller="AppController">...</div>
<div ng-controller="OtherController">...</div>
</div>
EDIT
Keep in mind that if you want to use controller inside controller you have to use the controllerAs syntax, like so:
<div ng-app="app">
<div ng-controller="AppController as app">
<div ng-controller="OtherController as other">...</div>
</div>
</div>
You can bootstrap multiple angular applications, but:
1) You need to manually bootstrap them
2) You should not use "document" as the root, but the node where the angular interface is contained to:
var todoRootNode = jQuery('[ng-controller=TodoController]');
angular.bootstrap(todoRootNode, ['TodoApp']);
This would be safe.
Manual bootstrapping both the modules will work. Look at this
<!-- IN HTML -->
<div id="dvFirst">
<div ng-controller="FirstController">
<p>1: {{ desc }}</p>
</div>
</div>
<div id="dvSecond">
<div ng-controller="SecondController ">
<p>2: {{ desc }}</p>
</div>
</div>
// IN SCRIPT
var dvFirst = document.getElementById('dvFirst');
var dvSecond = document.getElementById('dvSecond');
angular.element(document).ready(function() {
angular.bootstrap(dvFirst, ['firstApp']);
angular.bootstrap(dvSecond, ['secondApp']);
});
Here is the link to the Plunker
http://plnkr.co/edit/1SdZ4QpPfuHtdBjTKJIu?p=preview
NOTE: In html, there is no ng-app. id has been used instead.
I made a POC for an Angular application using multiple modules and router-outlets to nest sub apps in a single page app.
You can get the source code at: https://github.com/AhmedBahet/ng-sub-apps
Hope this will help