01. Binding : http://forum.falinux.com/zbxe/index.php?document_srl=804623
02. Controller : http://forum.falinux.com/zbxe/index.php?document_srl=804950
03. controller 사이의 데이터 공유 : http://forum.falinux.com/zbxe/index.php?document_srl=805325
04. controller에 메소드 만들기 : http://forum.falinux.com/zbxe/index.php?document_srl=805915
05. Filter : http://forum.falinux.com/zbxe/index.php?document_srl=806499
06. ng-repeat와 filter의 응용 : http://forum.falinux.com/zbxe/index.php?document_srl=806788
07. Directive : http://forum.falinux.com/zbxe/index.php?document_srl=807545
08. Directive #2 : http://forum.falinux.com/zbxe/index.php?document_srl=808009
09. $scope? scope? : http://forum.falinux.com/zbxe/index.php?document_srl=818891
10. templateUrl 사용하기 : http://forum.falinux.com/zbxe/index.php?document_srl=826765

angular-route는 AngularJS 1.2.x와 1.3.x의 사용법이 다릅니다. 이 내용은 1.3.x 기준으로 작성되었습니다.

routeProvider를 사용하면 url에 따라서 다른 내용을 표시할 수 있습니다.
다음의 예제를 보면 쉽게 이해할 수 있습니다.

우선 routeProvider를 사용하기 위해서 bower를 사용하여 angular-route를 설치합니다.
root@66e7524e23ec:/app# bower install --allow-root angularjs-route


그리고 기본이 되는 public/index.html을 작성합니다.

<!DOCTYPE html>
<html>
<head>
        <title>Binding</title>
</head>
<body>
<div ng-app="app">
        <ng-view>
        </ng-view>
</div>
<script type="text/javascript" src="components/angularjs/angular.js"></script>
<script type="text/javascript" src="components/angular-route/angular-route.js"></script>
<script type="text/javascript" src="javascripts/main.js"></script>
</body>
</html>


이전의 예제와는 다르게 angular-route.js를 추가해야만 에러가 발생하지 않습니다.


이때까지 항상 angular관련 코드들을 index.html에 작성하였지만, 이제는 별도의 파일로 분리하고, 그것을 ng-view에 넣는 방식을 사용하도록 하겠습니다.


public/view1.html, public/view2.html를 작성합니다.

<h1>{{model.message}}</h1>
<h2>This is View1</h2>


<h1>{{model.message}}</h1>
<h2>This is View2</h2>


이제 routeProvider를 사용하도록 하겠습니다.

public/javascripts/main.js를 작성합니다.

var app = angular.module("app", ['ngRoute']);

app.config(['$routeProvider', function($routeProvider) {
        $routeProvider.when('/',
                {
                        templateUrl: "/view1.html",
                        controller: "AppCtrl"
                }
        ).when('/view1',
                {
                        templateUrl: "/view1.html",
                        controller: "AppCtrl"
                }
        ).when('/view2',
                {
                        templateUrl: "/view2.html",
                        controller: "AppCtrl"
                }
        );
}]);

app.controller('AppCtrl', function ($scope) {
        $scope.model = {
                message: "This is my app!!!"
        }
})


브라우저로 확인해보면 다음 url을 확인해보면 적용이 제대로 되고 있는 것을 알 수 있습니다.


http://localhost/#/view1

http://localhost/#/view2



이렇게 구성을 해서 해당 페이지의 내용은 별도의 파일로 관리할 수 있고, 일반적인 web framework처럼 route 규칙을 정할 수 있습니다.

이 게시물을...