برای استفاده ی چند نوع نمایش ( View ) برای یک برنامه در AngularJS می توانید از عبارات ng-view ، ng-template و سرویس $routeProvider استفاده کنید.
 
عبارت ng-view : 
 
این عبارت به سادگی یک مکان نگهدارنده برای قرار گرفتن view می سازد. نحوه ی استفاده از آن به صورت زیر می باشد:
 

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

 
عبارت ng-template : 
 
این عبارت برای ساختن view به کمک تگ script در HTML کاربرد دارد. و شامل id نیز می باشد که با استفاده از سرویس  $routerProvider آدرس دهی view را به کمک کنترل کننده انجام می دهد.
 

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

 
سرویس routeProvider$ یک سرویس کلیدی برای پیکربندی تنظیمات URLها ، آدرس دهی آنها به صفحات HTML و عبارات  ng-templateمربوطه و اتصال کنترل کننده ها به کار می رود.
 
کاربرد 1 : مشخص کردن یک بلوک script بوسیله آن و از نوع ng-template در داخل ماژول اصلی : 
 

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

 
کاربرد 2 : مشخص کردن یک بلوک  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'
});
});
 
 
توضیحات : 
 
            routeProvider$ به عنوان یک تابع در زیر پیکربندی ماژول mainApp مشخص شده است.
           routeProvider.when$، مشخص کننده ی URL "/addStudent" می باشد که به "addStudent.htm" آدرس دهی شده است. addStudent.htm باید در همان مسیر صفحه ی اصلی HTML مان باشد. اگر صفحه ی              HTML مشخص نشده باشد، آنگاه ng-template با id ="addStudent.htm" می آبد. ما در این مورد از ng-template استفاده کردیم.
            ⦁عبارت otherwise برای تنظیم view پیش فرض به کار می رود.
            عبارت controller برای تنظیم کنترل کننده مربوط به view به کار می رود.
 
مثال زیر شامل همه ی کاربردهای بالا می شود : 
 
 
<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.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
add student form";
});
mainApp.controller('ViewStudentsController', function($scope) {
$scope.message = "This page will be used to display
all the students";
});
</script>
</body>
</html>
 
 
خروجی مثال بالا :