The Module in AngularJS

AngularJS supports module-oriented approach. The module is used to 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:

1. Application Module - used to initialize the application with the controller.
2. 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 usually 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.

For 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}} 

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

  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 ; } }; });