AngularJS supports single page application through multiple views on a single page. To do this, AngularJS provides ng-view and ng-template directives, as well as $routeProvider services.
ng-view
The ng-view tag simply creates a placeholder, which 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 using script tags. It contains a "id" property for the controller view mapped 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"> <h2> Add Student </h2> {{message}} </script></div>$routeProvider
$routeProvider is the configuration of group URLs, maps them to the corresponding HTML page or ng-template, and attaches a service that uses the same keys to the controller.
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"> <h2> Add Student </h2> {{message}} </script></div>use
Define the script block of the main module and set 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' }); }]);The following are important issues to consider in the example above
$routeProvider is defined as the configuration function of the mainApp module using the keyword as the '$routeProvider';
$routeProvider When the URL "/addStudent" is defined, maps to "addStudent.html". addStudent.html should exist on 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 ng-template;
"otherwise" is the default view used to set;
"conlloer" is used to set the corresponding controller of the view;
example
The following examples will show all the above instructions.
testAngularJS.html
<html><head> <title>Angular JS Views</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.min.js"></script><body> <h2>AngularJS Sample Application</h2> <div ng-app="mainApp"> <p><a href="#addStudent">Add Student</a></p> <p><a href="#viewStudents">View Students</a></p> <div ng-view></div> <script type="text/ng-template" id="addStudent.html"> <h2> Add Student </h2> {{message}} </script> <script type="text/ng-template" id="viewStudents.html"> <h2> View Students </h2> {{message}} </script> <script> 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' }); }]); mainApp.controller('AddStudentController', function($scope) { $scope.message = "This page will be used to display add student form"; }); mainApp.controller('ViewStudentsController', function($scope) { $scope.message = "This page will be used to display all the students"; }); </script></body></html>result
Open textAngularJS.html in a web browser. The results are as follows:
The above is a compilation of AngularJS view information. We will continue to add relevant information in the future. Thank you for your support for this website!