AngularJS视图

浏览数：42 / 时间：2015年06月09日

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>