Module can be considered as a container for different components like controllers, services, filters, directives etc. In all our previous examples, we used global namespace for declaring components such as controllers. This is not a good idea to use global namespace since it can cause collisions which are difficult to debug. Instead, we should use module to keep the global namespace clean. The benefit of using module is it makes unit testing easier by testing relevant modules only.
An application can have several modules. Each module should contain code that implements a specific functionality. The modules of an application can be loaded in any order.
The recommended way of creating multiple modules for an application:
- A module for each feature.
- A module for each reusable component (especially directives and filters).
- An application level module which depends on the above modules and contains any initialization code.
Declaring a Module
We can declare a module using the angular.module() API method. We have to pass two parameters to the method. The first one is the name of the module. The second one is the list of dependencies. Here is the method signature:
angular.module('name', [dependencies]);
This is the application of dependency injection. One module may rely on other modules or components to get data. For example, we can create a module without any dependency like the following:
var myModule = angular.module(' myModule ', []);
If the module 'myModule' relies on another module 'requiredModule', the declaration will become:
var myModule = angular.module('myModule', ['requiredModule']);
Creating a Controller in a Module
Here is how we can create a controller in a module:
var myModule = angular.module('myModule', []);
myModule.controller('BooksController', function BooksController($scope)
{
// controller tasks will be defined below
});
Here is the complete example:
<!DOCTYPE html>
<html ng-app="myModule">
<head>
<title>Learning AngularJS</title>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-controller="BooksController">
<br>
List of books:
<br>
<ul>
<li ng-repeat="book in bookList">
{{book.name}} -- {{book.author | uppercase}}
</li>
</ul>
Book name: <input type="text" ng-model="bookName" />
Author: <input type="text" ng-model="bookAuthor" /> <br>
<button ng-click="add()">Add</button>
</div>
<script>
var myModule = angular.module('myModule', []);
myModule.controller('BooksController',
function BooksController($scope) {
$scope.bookList = [
{name:'The Tempest',
author:'William Shakespeare'},
{name:'Gitanjali',
author:'Rabindranath Tagore'},
{name:'Harry Potter',
author:'J. K. Rowling'},
{name:'The Da Vinci Code',
author:'Dan Brown'},
{name:'A Brief History of Time',
author:'Stephen Hawking'},
{name:'Tell Me Your Dreams',
author:'Sidney Sheldon'}
];
$scope.add = function() {
$scope.bookList.push({
name: $scope.bookName,
author: $scope.bookAuthor
});
};
});
</script>
</body>
</html>
The output will be same as our previous post:
No comments:
Post a Comment