Angularjs View detailed and sample code _ANGULARJS

ANGULARJS supports the application of a single page through multiple views on a single page. To do this angularjs provides Ng-view and ng-template instructions, as well as $routeProvider services.

Ng-view

The Ng-view tag simply creates a placeholder and is a corresponding view (HTML or ng-template view) that can be placed according to the configuration.

Use

Define a div and Ng-view in the main module.

<div ng-app= "Mainapp" > ...
  <div ng-view></div>

</div>  

Ng-template

The ng-template directive is used to create HTML views that use the script label. It contains a view "id" attribute for the $routeprovider map controller.

Use

Defines a type as a ng-template script block in the main module.

<div ng-app= "Mainapp" > ...
  <script type= "Text/ng-template" id= "addstudent.html" >
    
 

$routeProvider

$routeProvider is the configuration of the group URLs, mapping them to the appropriate HTML page or ng-template, and attaching a service with the same key as the controller.

Use

Defines a type as a ng-template script block in the main module.

<div ng-app= "Mainapp" > ...
  <script type= "Text/ng-template" id= "addstudent.html" >
    
 

Use

Defines the script block for the main module and sets the routing configuration.

 var Mainapp = angular.module ("Mainapp", [' Ngroute ']);
   
   Mainapp.config ([' $routeProvider ',
     function ($routeProvider) {
      $routeProvider.
        When ('/addstudent ', {
         templateurl: ' addstudent.html ',
         controller: ' Addstudentcontroller '
        }).
        When ('/viewstudents ', {
         templateurl: ' viewstudents.html ',
         controller: ' Viewstudentscontroller '
        }).
        Otherwise ({
         redirectto: '/addstudent '
        });
     }];

Here are some important questions to consider in the above example

$routeProvider is defined as the configuration function of the Mainapp module using the keyword as the ' $routeProvider ';

$routeProvider when the url "/addstudent" is defined to map to "addstudent.html". Addstudent.html should exist in the same path as the main HTML page. If the HTM page is not defined, then ng-template is used by id= "addstudent.html". We have used the ng-template;

"Otherwise" is the default view to set;

"Conlloer" is used to set the controller for the view;

Example

The following example shows all of the above instructions.

Testangularjs.html

Results

Open textangularjs.html in your Web browser. See the results as follows:

The above is the Angularjs view data collation, follow-up continue to supplement the relevant information, thank you for your support of this site!