View components in AngularJS

 ng-app = "ungdungAngularJS" > .  ng-view > 

Ng-template introduction in AngularJS

ng-template directive is used to create HTML views using script tags. It contains the " id " attribute used by $ routeProvider to link the view and controller.

Using

Define a script block with ng-template type in the main module.

 ng-app = "ungdungAngularJS" > .  type = "text / ng-template" id = "themSV.html" > < h2 > Add Student h2 > {{ message }} 

Introduce $ routeProvider in AngularJS

Is the main service in creating configurations for URL addresses, linking them to the corresponding HTML page or ng-template and attaching the controller to them.

Using

Define a script block in the main module and set up routing configuration.

 var ungdungAngularJS = angular . module ( "ungdungAngularJS" , [ 'ngRoute' ]); ungdungAngularJS . config ([ '$ routeProvider' , function ( $ routeProvider ) { $ routeProvider . when ( '/ themSV' , { templateUrl : 'themSV.html' , controller : 'themSVController' }). when ( '/ quansatSV' , { templateUrl : 'quansatSV.html' , controller : 'quansatSVController' }. otherwise ({ redirectTo : '/ themSV' }); }]); 

Here are the important points to consider from the above example.

$ routeProvider defines a function under the config of ungdungAngularJS module using the key "$ routeProvider".

$ routeProvider.when defines a URL "/ themSV" which is used to link to the "themSV.html" page, in which themSV.html should put the directory path with the HTML page. If the HTML page is not defined, the ng-template will use id = "themSV.html". We use ng-template.

"otherwise" is used to set the default view.

"controller" is able to set the controller corresponding to each view.

For example

Below is an example to illustrate the directives described above.

thanhphanView.html

 Vi du View in Angular JS  src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" >  src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js" > 

 Cavalier AngularJS  ng-app = "ungdungAngularJS" > 

 href = "#themSV" > View student 

 href = "#quansatSV" > Quan sat the student  ng-view >  type = "text / ng-template" id = "themSV.html" > < h2 > Them student h2 > {{ message }}  type = "text / ng-template" id = "quansatSV.html" > < h2 > Quan sat student h2 > {{ message }} 

Result

Open the thanhphanView.html page in the web browser and you will see the following result.

Follow tutorialspoint

Previous article: Ajax in AngularJS

Next lesson: Scope in AngularJS

Kareem Winters

Update 25 May 2019