More than one ng controllers in different <div>s in a single page
Question
Its day-2 I have started learning angularJS. I got to know
In an Application ng-app will be same for all or its a definition for the application.
A ng-app can have more than 1 ng-controller.
- Based on controller name we can move the control to its implementation.
- An application may have more than one div tag and every div may have different controller.
From above understaning I have written below sample code to test:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="expressions" >
<div ng-controller="NGExpressionController">
<h1>This is AngularJS Expression example.......</h1>
<p>On String expression...</p>
Name: <input ng-model="name" type="text"></input></br>
Your name is {{name}}
</div>
<div ng-controller="NGExpressionControllerTwo">
<h1>This is AngularJS Expression example.......</h1>
<p>On String expression...</p>
Name: <input ng-model="adddress" type="text"></input></br>
Your name is {{address}}
</div>
<script>
angular.module('expressions', []).controller('NGExpressionController',function($scope){
$scope.name="Test Name";
});
</script>
<script>
angular.module('expressions', []).controller('NGExpressionControllerTwo',function($scope){
$scope.address="Kolkata";
});
</script>
</body>
</html>
But above piece of code showing below error:
Where I am going wrong? Is my understanding is wrong or code implementation is wrong.. Any form of help would be a great help.
2 answers
solution1
1 ACCPTED 2016-04-20 12:43:12
You're implementing it twice (2 <script> tags) which means he won't recognise the first one anymore.
Working Plnkr: https://plnkr.co/edit/eeFddCQSBg5Lm7SOyZH0?p=preview
<script>
angular.module('expressions', []).controller('NGExpressionController',function($scope){
$scope.name="Test Name";
}).controller('NGExpressionControllerTwo',function($scope){
$scope.address="Kolkata";
});
Using <script> to load controllers however is never a good practice, but since it's only your second day learning Angular , I'll leave it like that :) Anyway, you can always use https://www.codeschool.com/ You'll learn by doing.
solution2
0 2016-04-20 12:27:41
first your code has some errors , due incorrectly defining the module,
<script>
angular.module('expressions',[])
.controller('NGExpressionController',function($scope){
$scope.name="Test Name";
})
.controller('NGExpressionControllerTwo',function($scope){
$scope.address="Kolkata";
});
</script>
when creating an app you have to define a module once, and after defining a module you use that module by calling correctly module object, for creating module use
angular.module('yourModuleName',[])
to use that module again use
angular.module('yourModuleName')
no need of [ ], Square barckets, it used for defining dependencies for that module ,and when putting it wil result in re-initialising module again , and you will losse previously defined module properties,
1 : ng-app directive will initialise an angular app, and it will be available for the whole app. anyway we can manually create (bootstrap) multiple angular apps in a single application link
2 : An ng- app can have multiple Controllers , we can create our controllers and bind them whith any dom elements as we want .
<div ng-controller="NGExpressionController">
{{name}}
<div ng-controller="NGExpressionControllerTwo">
{{address}}
</div>
</div>
3 : based on the defined controller we can manipulate our logic or functions for the corresponding dom elements
4 : obviously yes , and you can nest your controllers to make use of $scope inheritance too. , be sure to use them wisely ... happy coding...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.