angularJS-tutorial/lab13.html at master · eramitmishra/angularJS-tutorial · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!--
    AngularJS - Views

    AngularJS supports Single Page Application via multiple views on a single page. To do this AngularJS has provided ng-view and ng-template directives and $routeProvider services.
#ng-view :
    ng-view tag simply creates a place holder where a corresponding view (html or ng-template view) can be placed based on the configuration.

     -->
<html>

<head>
    <title>Angular JS Views</title>
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/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">
            <h2> Add Student </h2>
            {{message}}
        </script>

        <script type="text/ng-template" id="viewStudents">
            <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: '/'
            });
         }]);

         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>