Angular.js 라이브러리와 Knockout 라이브러리의 가장 큰 차이점은 라우터의 지원 유무입니다.
html 태그에 ng-app 속성 값을 부여합니다.
이 값은 생성하는 모듈의 이름과 같아야 합니다.
<html ng-app="basic"> // 모듈이름
<script>
var basic = angular.module('basic', [], function($routeProvider){
});
var products = [{}, {}, {} ... ];
</script>
라우터 설정
angular.module() 메서드의 세 번째 매개변수에 넣은 함수의 매개변수에 $routeProvier를 입력합니다.
when() - 특정 해시를 라우트합니다.
첫 번째 매개변수로 대상 URL을 지정
두 번째 매개변수로 템플릿 파일과 컨트롤러를 지정합니다.
otherwise() - when() 메서드로 지정하지 않은 해시를 라우트합니다.
redirectTo 속성이 있는 객체를 입력
예)
var basic = angular.module('basic', [], function($routeProvider){
$routeProvider.when('/products', {
templateUrl: 'products.html',
controller: ListController
});
$routeProvider.when('/products/:id', {
templateUrl: 'product.html',
controller: DetailController
});
$routeProvider.otherwise({
redirectTo: '/products'
});
});
뷰 설정
예) products.html
<ul>
<li ng-repeat="product in products">
<a href="#/products/{{product.id}}}>
<img src="{{product.src}}" />
</a>
<div>
<h4>{{product.name}}</h4>
<p>{{product.price.min}} ~ {{product.price.max}}</p>
<p>Description</p>
</div>
</li>
</ul>
HTMLPage.html<body>
<h1>{{title}}</h1>
<div ng-view></div> // ng-view 속성 사용
</body>
컨트롤러 설정
<script>
function ListController($scope, $routeParams){
$scope.$parent.title = 'Product List'; // $parent 속성을 사용해 title 속성 지정
$scope.products = products;
}
function DetailController($scope, $routeParams){
$scope.$parent.title = 'Product Detail';
$scope.product = products[$routeParams.id];
// when('/products/:id') 메서드를 사용했으므로 id 속성 을 사용할 수 있다.
}
</script>
컨트롤러는 ng-view 속성이 지정된 공간과 바인딩됩니다.
<body>
<h1>{{title}}</h1> // 컨트롤러 적용 범위의 상위에 위치
<div ng-view></div> // 컨트롤러가 적용되는 범위
</body>
'Angular.js' 카테고리의 다른 글
| angular example (0) | 2014.09.15 |
|---|---|
| Angular 서비스 (0) | 2014.09.15 |
| Angular ng 속성 (0) | 2014.09.12 |
| Angular 컨트롤러 (0) | 2014.09.12 |
| Angular 설정 (0) | 2014.09.12 |
