View components in AngularJS

AngularJS supports Single Page Application through multiple views on a single page. To do this, AngularJS provides ng-view and ng-template directive and $ routeProvider service.

Introducing ng-view in AngularJS

The ng-view tag is simply created where the corresponding view screens can be placed in it based on the configuration.

Using

Define div tags with ng-view in the main module.

 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.

View components in AngularJS Picture 1