English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

AngularJS Basic Tutorial

AngularJS Views

AngularJS supports single-page applications (Single Page Application) through multiple views on a single page. To achieve this, AngularJS provides ng-view and ng-template directive, and $routeProvider service.

ng-view directive

ng-The view directive only creates a placeholder, where you can place the corresponding view (HTML or ng-template view).

Usage

In the main module, use ng-view defines div.

<div ng-app "mainApp">
　　　...
　　　<div ng-view></div></div>

ng-template directive

ng-The template directive is used to create HTML views using script tags. It includesidproperties, which are used by $routeProvider to map views to controllers.

Usage

In the main module, define the script block as ng-template.

<div ng-app "mainApp">
　　　...
　　　<script type "text/ng-template" id "addStudent.htm">
　　　　　　<h2> Add Student </h2>
　　　　　　{{message}}
　　　</script>
</div>

$routeProvider service

$routeProvider is a key service that can set URL configurations and map them to corresponding HTML pages or ng-template mapping, and attach a controller to it.

Usage1

In the main module, define the script block as ng-template.

<div ng-app "mainApp">　
　　　...　
　　　<script type "text/ng-template" id "addStudent.htm">　
　　　　　　<h2> Add Student </h2>　
　　　　　　{{message}}　
　　　</script>　　
</div>

Usage2

Use the main module to define a script block and set the routing configuration.

var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(['$routeProvider', function($routeProvider) {
　　　$routeProvider
　　　
　　　.when('/addStudent', {
　　　　　　templateUrl: 'addStudent.htm', controller: 'AddStudentController'
　　　})
　　　.when('/viewStudents', {
　　　　　　templateUrl: 'viewStudents.htm', controller: 'ViewStudentsController'
　　　})
　　　.otherwise({
　　　　　　redirectTo: ''/addStudent
　　　});
});

The following points are very important in the above example-

  • $routeProvider is defined as a function under the mainApp module configuration, using the key '$routeProvider'.

  • $routeProvider.when defines the URL “/addStudent”, which maps to “ addStudent.htm”. addStudent.htm should be located in the same path as the main HTML page. If the HTML page is not defined, then the ng-template is used together with id ="addStudent.htm". We use ng-template.

  • "otherwise" is used to set the default view.

  • "controller" is used to set the corresponding controller for the view.

Online Example

The following example demonstrates the use of all the above directives.

testAngularJS.htm

<html>
　　　<head>
　　　　　　<title>Angular JS Views</title>
　　　　　　<script src "https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js"></script>
　　　　　　<script src "https://cdn.staticfile.org/angular.js/1.3.14/angular-route.min.js">
　　　　　　</script>
　　　</head>
　　　
　　　<body>
　　　　　　<h2>AngularJS-View Application Example</h2>
　　　　　　<div ng-app "mainApp">
　　　　　　　　　<p><a href "https://www.oldtoolbag.com/run/angularjs-views-1.html#addStudent" target="_self">Add Student</a></p>
　　　　　　　　　<p><a href "https://www.oldtoolbag.com/run/angularjs-views-1.html#viewStudents" target="_self">View Students</a></p>
　　　　　　　　　<div ng-view></div>
　　　　　　　　　
　　　　　　　　　<script type "text/ng-template" id "addStudent.htm">
　　　　　　　　　　　　<h2>Add Student</h2>
　　　　　　　　　　　　{{message}}
　　　　　　　　　</script>
　　　　　　　　　
　　　　　　　　　<script type "text/ng-template" id "viewStudents.htm">
　　　　　　　　　　　　<h2>View Students</h2>
　　　　　　　　　　　　{{message}}
　　　　　　　　　</script>
　　　　　　</div>
　　　　　　
　　　　　　<script>
　　　　　　　　　var mainApp = angular.module("mainApp", ['ngRoute']);
　　　　　　　　　mainApp.config(['$routeProvider', function($routeProvider) {
　　　　　　　　　　　　$routeProvider
　　　　　　　　　　　　
　　　　　　　　　　　　.when('/addStudent', {
　　　　　　　　　　　　　　　templateUrl: 'addStudent.htm',
　　　　　　　　　　　　　　　controller: 'AddStudentController'
　　　　　　　　　　　　})
　　　　　　　　　　　　.when('/viewStudents', {
　　　　　　　　　　　　　　　templateUrl: 'viewStudents.htm',
　　　　　　　　　　　　　　　controller: 'ViewStudentsController'
　　　　　　　　　　　　})
　　　　　　　　　　　　.otherwise({
　　　　　　　　　　　　　　　redirectTo: ''/addStudent
　　　　　　　　　　　　});
　　　　　　　　　});
　　　　　　　　　mainApp.controller('AddStudentController', function($scope) {
　　　　　　　　　　　　$scope.message = "This page will be used to display the student addition form";
　　　　　　　　　});
　　　　　　　　　mainApp.controller('ViewStudentsController', function($scope) {
　　　　　　　　　　　　$scope.message = "This page will be used to display all students";
　　　　　　　　　});
　　　　　　</script>
　　　　　　
　　　</body>
</html>
Test and See‹/›

Output Results

Open the file in a web browsertestAngularJS.htmand view the results.

AngularJS Scope (Scope)AngularJS Ajax