Introduction to the view function application of AngularJS

Introduction to the view function application of AngularJS_AngularJS

WBOY

Release： 2016-05-16 15:54:35

Original

1543 people have browsed it

AngularJS supports single page applications via multiple views on a single page. To do this AngularJS provides ng-view and ng-template directives, as well as the $routeProvider service.
ng-view

The

ng-view tag simply creates a placeholder for 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>

Copy after login

ng-template

The

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

Define the type as a script block for 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>

Copy after login

$routeProvider

$routeProvider is a configuration that groups URLs, maps them to the corresponding HTML page or ng-template, and attaches a controller to the service using the same key.
Use

Define the type as a script block for 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>

Copy after login

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'
        });
     }]);

Copy after login

The following are important issues to consider in the above example

$routeProvider is defined as a configuration function of the mainApp module under '$routeProvider' using keywords;
$routeProvider maps the URL "/addStudent" to "addStudent.html" when it is defined. 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 with id="addStudent.html". We have used ng-template;
“otherwise” is the default view used to set;
“conlloer” is used to set the controller corresponding to the view;

Example

The following example will demonstrate all the above commands.
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>
</head>
<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> 
  </div>

  <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>

Copy after login

Results

Open textAngularJS.html in your web browser. See the results as follows:

2015617104059841.jpg (560×429)