I m new to Angular JS (apologies if my my terminology is incorrect or not enough explained).
I m trying to do a demo creating multiple modules which are just returning messages. My domo has just 2 files, I m copying complete code below.
JS:
var app = angular.module("app", ['controllers1', 'controllers2']);
angular.module('controllers1', []).controller('MainController', function($scope) {
$scope.message1 = "controllers1 message";
$scope.func1 = function () {
return "controllers1 func";
}
}
);
angular.module('controllers2', []).controller('MainController2', function ($scope) {
$scope.message2 = "controllers2 message";
$scope.func2 = function () {
return "controllers2 func";
}
}
);
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="app">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="JS/Index.js"></script>
</head>
<body>
{{2+2}}
<div ng-controller="MainController1">
{{message1}}
{{func1()}}
<br /><br/>
<div ng-controller="MainController2">
{{
{{message2}}
{{func2()}}
}}
</div>
</div>
</body>
</html>
Issue:
If I create a just one module it works fine but if I create 2 modules it give weird error. Can you please guide me who to fix this error and create multiple modules and consume them.
Error: [$parse:syntax] http://errors.angularjs.org/undefined/$parse/syntax?p0=message2&p1=is%20unexpected%2C%20expecting%20%5B%3A%5D&p2=16&p3=%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%7Bmessage2&p4=message2
L/<#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:6:446
Ya.prototype.throwError#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:152:392
Ya.prototype.consume#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:153:338
Ya.prototype.object#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:161:34
Ya.prototype.primary#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:152:26
Ya.prototype.unary#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:158:114
Ya.prototype.multiplicative#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:158:1
Ya.prototype.additive#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:157:365
Ya.prototype.relational#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:157:1
Ya.prototype.equality#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:157:1
Ya.prototype.logicalAND#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:156:1
Ya.prototype.logicalOR#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:156:346
Ya.prototype.ternary#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:156:1
Ya.prototype.assignment#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:155:1
Ya.prototype.expression#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:155:369
Ya.prototype.filterChain#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:155:1
Ya.prototype.statements#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:154:292
Ya.prototype.parse#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:151:19
td/this.$get</<#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:89:450
f#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:72:89
t#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:56:1
oa#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:45:14
E#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:43:136
E#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:43:252
E#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:43:252
E#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:43:252
v#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:41:303
Wb/c/</<#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:17:455
wd/this.$get</g.prototype.$eval#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:100:187
wd/this.$get</g.prototype.$apply#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:100:452
Wb/c/<#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:17:413
d#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:30:321
Wb/c#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:17:321
Wb#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:18:23
Oc#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:17:96
#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:198:494
a#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:128:229
Uc/c/<#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:26:466
q#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:7:259
Uc/c#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:26:439
https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js
Line 83
You seem to be declaring a MainController controller, but you reference MainController1 in the ng-controller directive.
Try this line instead:
angular.module('controllers1', []).controller('MainController1', function($scope) {
Also, I don't get what you are trying to do with these lines of code:
<div ng-controller="MainController2">
{{
{{message2}}
{{func2()}}
}}
</div>
Try removing those extra brackets as shown below:
<div ng-controller="MainController2">
{{message2}}
{{func2()}}
</div>
If you open the provided link (this one) it shows the following message:
Syntax Error: Token 'message2' is unexpected, expecting [:] at column
16 of the expression [
{{message2] starting at [message2].
So yes, the error is thrown because you are using an invalid expression in your HTML template.
please check this working CODE - PLUNKER LINK
problem you have is the curly brackets
{{ //remove this
{{message2}}
{{func2()}}
}} //remove this as well
also as danilo pointed out
angular.module('controllers1', [])
.controller('MainController1', function($scope) {
Related
My curly braces are showing up as curly braces, I don't get what's wrong, I did everything...when I use the controller to manipulate the input box, it works. But when I sumbit text into the input box on my browser, it doesn't do anything..
This is where I create my module:
'use strict';
var foodApp=angular.module('foodApp', []);
This is my html:
<script src="/lib/angular/angular.js"></script>
<!DOCTYPE html>
<html lang="en-us" >
<head>
<meta charset="utf-8">
<title>Food App</title>
</head>
<body>
<div ng-controller="foodController" ng-app="foodApp">
<input type="text" ng-model="foods"/>
<input type="submit" value="Healthy Lunch?" />
<br />
<br />
<h4>{{outcome}}</h4>
{{foods}}
</div>
<script src="/js/food.js"></script>
<script src="/js/controllers/foodController.js"></script>
</body>
</html>
This is my controller page:
foodApp.controller('foodController', function($scope)
{
var foods = $scope.foods;
$scope.outcome=foods;
var foodsArray=foods.split(',');
if(foodsArray.length<=4)
$scope.outcome="Bon Appetit!";
else if(foodsArray.length<=7)
$scope.outcome="Pig!";
else
$scope.outcome="One at a time, your scale is going to shout!!";
});
The problem is in fact in your controller. The code you have in your controller is only executed once, when the controller is constructed. As such the variable foods is undefined (since $scope.foods is also undefined). A couple of lines later, you try to run foods.split(..) but since it's undefined, it throws an exception and the application fails. This is shown as an error in the developer console of your browser.
To fix it you need to completely refactor your controller code.
foodApp.controller('foodController', function($scope)
{
$scope.handleFoodChange = function() {
$scope.outcome = $scope.foods;
if($scope.foods){
var foodsArray = $scope.foods.split(',');
if(foodsArray.length<=4)
$scope.outcome = "Bon Appetit!";
else if(foodsArray.length<=7)
$scope.outcome = "Pig!";
else
$scope.outcome = "One at a time, your scale is going to shout!!";
}
}
});
and in your view you should change your input to this:
<input type="text" ng-model="foods" ng-change="handleFoodChange()" />
That should make your application work as expected. Now, whenever you make a change in the input field, the function handleFoodChange is called, and it handles the logic that sets a value for the $scope.outcome variable.
Here's a Plunker showing it working
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
I´m playing with angular.js and try to learn ng-bind and ng-bind-html.
First, my code:
<div ng-app="module" ng-controller="controller as ctrl">
<div ng-bind-html="ctrl.html"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular-sanitize.js"></script>
<script>
var themodule = angular.module("module", ["ngSanitize"]);
themodule.controller("controller", [function()
{
this.html = "<strong>Hello</strong><div>More</div>";
}
]);
</script>
Even when it works, in the console appears the following ERROR:
Error: c.push is not a function
yc/this.$get</D.$$addBindingInfo<#https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:73:319
$d</<.compile/<#https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:214:329
$#https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:70:197
B#https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:59:255
g#https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:51:335
B#https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:59:199
g#https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:51:335
D/<#https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:50:444
uc/d/</<#https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:18:4
Pe/this.$get</n.prototype.$eval#https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:126:11
Pe/this.$get</n.prototype.$apply#https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:126:236
uc/d/<#https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:17:477
e#https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:36:313
uc/d#https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:17:1
uc#https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:18:179
Jd#https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:17:1
#https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:250:429
a#https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:164:283
lf/c#https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:32:384
<div class="ng-binding" ng-bind-html="ctrl.html">
I searched but I could not find anything about it.
Does anyone know WHY and HOW to resolve it?
Thanks!
try to use this version of angular-sanitize.js
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-sanitize.js"
OR
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-sanitize.js"
and use
var app = angular.module("myFirstApp", ['ngSanitize']);/*"angular-sanitize.js",
which has functions for removing potentially dangerous tokens from the HTML.*/
I hope your problem will be resolved.
I'm new to angular, I've tried some testing pattern and it's ok with the $scope variable but I can't make it work for a simple controller nesting. (and avoid using the $scope variable, instead I want to use "this")
Here is my sample HTML and javascript :
<!doctype html>
<html ng-app="appTest">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
</head>
<body>
<div ng-controller="FirstController as first">
<div>
First is {{first.text}}
</div>
<div ng-controller="SecondController as second">
Second is {{second.text}}
</div>
</div>
<script>
var app = angular.module("appTest",[]);
function printFirst() {
this.text = "first"
}
function printSecond() {
this.text = "second";
}
app.controller("FirstController",[printFirst]);
app.controller("SecondController",[printSecond]);
</script>
</body>
</html>
In the output html the angular variables inside curly brackets are not replaced and I don't know what's going on. I've tried to install Angular Batarang for debugging but the scope console is empty.
Obviously it's a silly mistake but I don't see where I'm wrong
Ok, the answer has nothing to do with my code, I was just using a too old version of Angularjs (1.0.8).
I moved to the last version 1.3.4 and it works fine.
Access the variable using $scope.text please instead of this.text.
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