Home >Web Front-end >JS Tutorial >Introduction to the view function application of AngularJS_AngularJS

Introduction to the view function application of AngularJS_AngularJS

WBOYOriginal: 2016-05-16 15:54:351527browse

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>

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>

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

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

Results

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

2015617104059841.jpg (560×429)

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jQuery plug-in zepto.js simply implements tab switching_jqueryNext article：jQuery plug-in zepto.js simply implements tab switching_jquery

See more

Introduction to the view function application of AngularJS_AngularJS

Related articles