angular example

index.html 

<script>

        app = angular.module('todo', [], function ($routeProvider) {

            $routeProvider.when('/main', {

                templateUrl: 'main.html',

                controller: function ($scope, $http) {

                    $http.get('/users/me').success(function (data) {

                        $http.get('/todos').success(function (data) {

// json type 데이터 파일 

$http makes an HTTP GET request to our web server, asking for .json. The server responds by providing the data in the json file. (The response might just as well have been dynamically generated by a backend server. To the browser and our app they both look the same. For the sake of simplicity we used a json file in this tutorial.)

                            $scope.todos = data;

                        });

                        $scope.logout = function () {

                            $http.get('/users/logout').success(function (data) {

                                location.hash = '/login'

                            });

                        };

                        $scope.add = function () {

                            $http.post('/todos', {

                                title: $scope.title

                            }).success(function (data) {

                                $scope.todos.push(data[0]);

                                $scope.title = '';

                            });

                        };

                        $scope.checkChange = function (self) {

                            $http.put('/todos/' + self._id, {

                                completed: self.completed

                            });

                        };

                        $scope.remove = function () {

                            for (var i = $scope.todos.length - 1; i >= 0; i--) {

                                if ($scope.todos[i].completed) {

                                    (function (i) {

                                        var url = '/todos/' + $scope.todos[i]._id;

                                        $http.delete(url).success(function () {

                                            $scope.todos.splice(i, 1);

                                        });

                                    })(i);

                                }

                            }

                        };

                        $scope.opacity = function (todo) {

                            return todo.completed ? { opacity: 0.2 } : {};

                        };

                    }).error(function () {

                        location.hash = '/login'              

                    });

                }

            });

});

<script>

main.html

routeProvier > templateUrl > 사용하는 html 파일에서 controller 지정없이 사용

<div>

    <a ng-click="logout()">Logout</a>

    <h1>Todos</h1>

    <ul>

        <li ng-repeat="todo in todos" ng-style="opacity(todo)">

            <label>

                <input type="checkbox"

                       ng-model="todo.completed"

                       ng-change="checkChange(todo)" />

                <span>{{ todo.title }}</span>

            </label>

        </li>

    </ul>

    <form id="item-form">

        <input ng-model="title" type="text" />

        <button ng-click="add()">Add</button>

    </form>

    <p><a ng-click="remove()">Remove items</a></p>

</div>