Modules in Angularjs: The Module in Angularjs

AngularJS supports module-oriented approach. The module helps distinguish the logic, service and application processing. and make the code clear. We define modules into separate JavaScript files and name them according to each module.js file. In this chapter, we will create 2 modules:

• Application Module - used to initialize the application with the controller.
• Controller Module - used to define controller.

Application Module in AngularJS

ungdungAngularjs.js

 var ungdungAngularjs = angular . module ( "ungdungAngularjs" , []); 

Above we declare the Application Module ungdungAngularjs using the modular function of AngularJS. We initialize an empty array for it. This array typically contains independent components in the module.

Controller Module in AngularJS

sinhvienController.js

 ungdungAngularjs . controller ( "sinhvienController" , function ( $ scope ) { $ scope . sinhvien = { cough : "Quan Tri" , ten : "Bring" , hocphi : 200 , tenMonHoc : [ { ten : 'Vat Ly Dai Cuong' , diemthi : 8.5 }, { ten : ' Tri Hoc' , diemthi : 7.5 }, { ten : 'Toan' , diemthi : 9.0 }, { ten : 'Tieng Anh' , diemthi : 8.0 }, { ten : 'Kinh Te' , diemthi : 9.5 } ], hoten : function () { var doitongngien ; doituuonginhvien = $ scope . Return ; return doituuongvien . Ho + "" + doituongsinhvien . Ten ; } }; }); 

Here we declare a module as sinhvienController using the ungdungAngularjs.controller function.

Use the Module in AngularJS

 ng-app = "ungdungAngularjs" ng-controller = "sinhvienController" > .  src = "ungdungAngularjs.js" >  src = "sinhvienController.js" > 

Here, we used Application Module using the ng-app directive and Controller Module using the ng-controller directive. We include both ungdungAngularjs.js and sinhvienController.js in the HTML file.

As an example,:

Here is an example to illustrate how to use the two above Modules in the following AngularJS application:

viduModule.html

 Module in AngularJS  src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" >  src = "ungdungAngularjs.js" >  src = "sinhvienController.js" > 

 Cavalier AngularJS  ng-app = "ungdungAngularjs" ng-controller = "sinhvienController" >  border = "0" > Nhap ho:  type = "text" ng-model = "sinhvien.ho" > Nhap ten:  type = "text" ng-model = "sinhvien.ten" > Ho and Ten: {{sinhvien.hoten ()}} Mon:   Ten   Exam scores  ng-repeat = "printable version of the account.tenMonHoc" > {{monhoc.ten}} {{monhoc.diemthi}}