AngularJS View Details and sample code, angularjs sample code

AngularJS View Details and sample code, angularjs sample code

AngularJS supports single-page applications with multiple views on a single page. AngularJS provides ng-view and ng-template commands and $ routeProvider services.

Ng-view

The ng-view tag simply creates a placeholder, which is a corresponding view (HTML or ng-template view) and 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 command is used to create an HTML view that uses the script tag. It contains an "id" attribute mapped to the Controller view by $ routeProvider.

Use

Define the type as the script block of ng-template in the main module.

<div ng-app="mainApp">...  <script type="text/ng-template" id="addStudent.html">   
$ RouteProvider

$ RouteProvider is the configuration of the group URL, maps them to the corresponding HTML page or ng-template, and attaches a controller to a service that uses the same key.
Use

Define the type as the script block of ng-template in the main module.

<div ng-app="mainApp">...  <script type="text/ng-template" id="addStudent.html">   
Use

Define the script block of the main module and configure the route.

 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'        });     }]);
The following are important issues to consider in the above example:
$ RouteProvider is defined as the configuration function of the mainApp module under '$ routeProvider;
$ RouteProvider: When the URL "/addstudent "“addstudent.html" is defined ". AddStudent.html should be stored in the main html pages of the same path. If the htmpage does not have a definition, then ng-templateis used by id1_addstudent.html. We have used ng-template;
"Otherwise" is the default view used to set;
"Conloer" is used to set the Controller corresponding to the view;
Example

The following example shows all the preceding commands.
TestAngularJS.html

Result

Open textangularjs.html in the webbrowser. The result is as follows:

The above is the arrangement of AngularJS View data. We will continue to add relevant information in the future. Thank you for your support for this site!