webDevMEANStack/angularRouteExample.html at master · hchiam/webDevMEANStack · 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
<html data-ng-app="app">
    <head>
        <title>Hello Controllers in AngularJS</title>
    </head>
    <body>
        <!--directive "element" that gets an html template "injected" into the ngView-->
        <data-ng-view></data-ng-view>
        <!--get the main angular functionality-->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
        <!--get angular routes functionality-->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.min.js"></script>
        <!--template-->
        <script type="text/ng-template" id="/todos.html">
            <ul>
                <li data-ng-repeat="todo in todos">
                    <input type="checkbox" data-ng-model="todo.completed">
                    {{ todo.name }}
                </li>
            </ul>
        </script>
        <!--module and its controller and route provider-->
        <script>
            angular.module('app', ['ngRoute'])
                .controller('TodoController', ['$scope', function ($scope) {
                    $scope.todos = [
                        { name: 'AngularJS Directives', completed: true },
                        { name: 'Data binding', completed: true },
                        { name: '$scope', completed: true },
                        { name: 'Controllers and Modules', completed: true },
                        { name: 'Templates and routes', completed: true },
                        { name: 'Filters and Services', completed: false },
                        { name: 'Get started with Node/ExpressJS', completed: false },
                        { name: 'Setup MongoDB database', completed: false },
                        { name: 'Be awesome!', completed: false },
                    ];
                }])
                .config(['$routeProvider', function ($routeProvider) { // renders html to the ng-view directive "element"
                    $routeProvider
                        .when('/', {
                            templateUrl: '/todos.html', // gets the todos (could be as separate .html file) and put into ng-view
                            controller: 'TodoController'
                    });
                }]);
        </script>
    </body>
</html>