http://www.yiibai.com/angularjs/angularjs_views.html
1 <html> 2 <head> 3 <title>Angular JS Views</title> 4 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> 5 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.min.js"></script> 6 </head> 7 <body> 8 <h2>AngularJS Sample Application</h2> 9 <div ng-app="mainApp"> 10 <p><a href="#addStudent">Add Student</a></p> 11 <p><a href="#viewStudents">View Students</a></p> 12 <div ng-view></div> 13 <script type="text/ng-template" id="addStudent.html"> 14 <h2> Add Student </h2> 15 {{message}} 16 </script> 17 <script type="text/ng-template" id="viewStudents.html"> 18 <h2> View Students </h2> 19 {{message}} 20 </script> 21 </div> 22 23 <script> 24 var mainApp = angular.module("mainApp", ['ngRoute']); 25 26 mainApp.config(['$routeProvider', 27 function($routeProvider) { 28 $routeProvider. 29 when('/addStudent', { 30 templateUrl: 'addStudent.html', 31 controller: 'AddStudentController' 32 }). 33 when('/viewStudents', { 34 templateUrl: 'viewStudents.html', 35 controller: 'ViewStudentsController' 36 }). 37 otherwise({ 38 redirectTo: '/addStudent' 39 }); 40 }]); 41 42 mainApp.controller('AddStudentController', function($scope) { 43 $scope.message = "This page will be used to display add student form"; 44 }); 45 46 mainApp.controller('ViewStudentsController', function($scope) { 47 $scope.message = "This page will be used to display all the students"; 48 }); 49 </script> 50 </body> 51 </html>
结果
在Web浏览器中打开textAngularJS.html。看到结果如下：
http://www.tuicool.com/articles/byAZB3