AngularJs Modules
AngularJs Modules : AngularJs Modules works as container for controllers. Controllers are associated with modules.
Example for AngularJs Modules
Let us understand with the following example.
We have created an application named as “myApp” which have the controller named as “myController”.
<div ng-app="myApp">
<div ng-controller="myController">
Name : <input type="text" ng-model="name" /></br>
Name : <input type="text" ng-model="email" /></br>
Name : {{ name }} </br>
Email : {{ email }}
</div>
</div>
Now let us create module
<script>
var myApp = angular.module("myApp", []);
myApp.controller("myController", function($scope) {
$scope.name = "Tani";
$scope.email = "tanib@yopemail.com";
});
</script>
AngularJs Modules Full Example
Example
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myController">
Name : <input type="text" ng-model="name" /></br>
Name : <input type="text" ng-model="email" /></br>
Name : {{ name }}
Email : {{ email }}
</div>
</div>
<script>
var myApp = angular.module("myApp", []);
myApp.controller("myController", function($scope) {
$scope.name = "Tani";
$scope.email = "tanib@yopemail.com";
});
</script>
</body>
</html>
|
Output :
AngularJs Modules
Note : You can keep your module and controller javaScript code in external js file. Example module.js and controller.js. Include these file such as
Example
<script src="path/myApp.js"></script> <script src="path/myController.js"></script>
myApp.js will have following code.
var myApp = angular.module("myApp", []);
myController.js will have following code.
myApp.controller("myController", function($scope) {
$scope.name = "Tani";
$scope.email = "tanib@yopemail.com";
});
Advertisements
