So here I am with the fourth article in the series of Learning AngularJS a guide for beginners. If you have not read the previous articles I recommend you to read in sequence, it will help you in understanding more quickly. In this post we will see the modularity of AngularJS Application.
Before starting the real topic we need to see SPA (Single Page Application).
So what is SPA?
Single Page Application (SPA) or also called Single Page Interface (SPI) is a web application in which we have only one main view which is able to load many small pages on a fly, providing enhanced desktop application like fluid user experience.
Traditional web application gives a blink and load impact when we route from one page to another while in SPA we load a main page on first time then we never post back completely instead we load partial or small HTML pages which make it faster and give it a better user experience.
AngularJS application are Single Page Application, we have a main container page index.html load on first go then we only load the views which we required. To load the view at run-time we need to handle routing which is one of the main SPA concepts.
In the previous post we see the directives, filters and data bindings, so now we will see AngularJS as a complete module and how controller, model views, directives, routes actually fit into this module.
we define module for our application as:
<html ng-app="moduleName" >
and in JavaScript we create an object for our module as:
var moduleName = angular.module('moduleName', [ ] );
Defining ng-app on html tag will create a scope for angular application to the HTML and within this HTML scope angular directives , filters and data bindings will work. Since we are working on SPA application so having ng-app on html tag will scope whole application because when this page gets loaded then we not actually loading another page instead we loading partial views which get renders within this main page.
Now we have define the module for our application now we need to add config, controllers, directive, services to our module. Module in actually a container in which we bundle all of our same functionality.
Different module can also interact with each other. If you noticed the empty array passed to the module function with module name is the dependency injection we discussed in our first post. Here we can inject helping module or the module our application depends on. Like for route management we have many already written module available, we just need to pass the module object to our module and then we can use it within our application. We can define multiple modules:
// Define sub modules with no dependencies
angular.module('AccountApp', []);
angular.module('LoginApp', []);
// define main module and inject all other modules as dependencies
angular.module('MainApp', [
'AccountApp',
'LoginApp']);
Firstly we set config to our application module in which we can configure routing (we will see in details later). For this we just need to set config in module object.
//we passed ngRoute is an external module for handling routing
var moduleName = angular.module('moduleName', ['ngRoute']);
moduleName.config(function ($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl: 'pages/home.html',
controller: 'mainController'
});
});
If you noticed here we also passed the controller to the view previously we declare the controller for a view within the view but that is not a recommended way as we said in Model View Controller view should be independent of controller so it must not be dependent on controller, so better way is to pass controller to view on the fly when we routing to view.
Now View has the controller scope so it can access the scope variables of controller. We also need to add controller to our application module, for this we simple need to add controller to main module object.
// create the controller and inject Angular's $scope
moduleName.controller('mainController', function ($scope) {
// create a message to display in our view
$scope.message = 'Hello friend I am Main Controller';
});
and the view for home page will look like:<!-- home.html -->
<div class="content">
<h1>First Application</h1>
<p>{{ message }}</p>
</div>
Here in this simple application we do not required a service or factory but in application when we interacting with APIs then we need to create factory [or services, provider, value]. These four are for same things with some different features. As we might need to get User data from server using AJAX calls and we may need it in five different controllers so instead of repeating the same code for fetching user's data in controllers we move this to User Service and then call this service from different controllers.
We can define factory to our application using:
moduleName.factory('MyService', function () {
var factory = {};
factory.getUser = function () {
//..
}
return factory;
});
So lets review a complete cycle of angular application. Our application is a single module. It has configured routes when a particular URL get hit, it will be routed to specific View and Controller is also passed to the view at routing. Now View has the scope access of particular controller. It will call the controller for data. Controller will hit the service for data and service will send back data to controller fetching it from server. Controller pass that data to View and View render it accordingly.
So It was concept of modularity in AngularJS application. If you have any confusions or feedback or If you want to see any particular topic regarding AngularJS in this series please comment below.
Thanks for liking! For module in separate file you need to include js file in index.html and then you can access it page you want like:
ReplyDeletemyApp.factory('MyService', ['ModuleName', function ('ModuleName') {
var factory = {};
factory.getUser = function () {
//..
}
return factory;
}]);
This comment has been removed by a blog administrator.
ReplyDeleteNeed some more intro for service,factory,api which u mentioned abov.
ReplyDelete