티스토리 뷰

SW 개발/JavaScript

AngularJS, UI-Router(angular-ui-router) 적용하기

지단로보트 2016. 9. 7. 15:09

URL 라우팅이란?

전통적인 웹 사이트는 사용자가 링크를 클릭할 경우 새로운 주소로 이동하며 페이지가 전환된다. SPA(Single Page Application)은 이름 그대로 처음 시작 페이지를 제외하고는 독립적으로 접근 가능한 물리적인 페이지가 존재하지 않는다. 링크를 클릭할 경우 필요한 부분만 AJAX로 로드되어 현재 페이지에 주입된다.

AngularJS에서의 URL 라우팅은?

AngularJS는 URL 라우팅 기능을 하는 angular-route.js라는 공식 모듈을 제공한다. 하지만 써드파티 모듈인 angular-ui-router.js가 보다 많은 기능을 제공하며 공식 모듈보다 표준처럼 널리 쓰이고 있다. 이번 글에서는 angular-ui-router.js의 사용법을 소개하고자 한다.

UI-Router 의존성 추가

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>
</head>
  • angular-ui-route.js는 반드시 angular.js의 다음에 로드되어야 한다.

링크 작성

<a ui-sref="about" href="#/about">ABOUT</a>
  • 본 링크 적용 후 브라우저에서 #/about 주소로 접속하면 about이라는 이름의 State로 연결되어 물리적인 페이지 이동 없이 해당 내용이 출력된다.

링크 이동시 페이지 주입 위치 작성

<div ui-view></div>
  • 앞서 URL 라우팅을 통해 물리적인 페이지 이동 없이 링크의 페이지 내용이 현재 DOM에 주입된다고 설명했다. 위와 같이 HTML의 특정 엘러먼트에 ui-view 애트리뷰트를 식별자로 부여하면 해당 부분에 링크된 페이지의 내용이 AJAX로 주입된다.
  • 당연한 말이지만 ui-view 영역은 ng-app이 명시된 엘러먼트 범위에 존재해야 한다.

스테이트 등록

var samepleApp = angular.module('sameple-app', ['ui.router']);

sampleApp.config(function($stateProvider) {

    var aboutState = {
        name: 'about',
        url: '/about',
        templateUrl: 'about.html'
    }
    $stateProvider.state(aboutState);
});
  • 앱 모듈은 URL 라우팅을 제공하는 ui.router 모듈에 종속성을 가지므로 앱 초기화 시점에 추가해준다.
  • 주소와 페이지를 연결하여 주는 URL 라우팅 정보의 각 단위를 State라고 부른다. 위와 같이 개별 State를 $stateProvider로 추가하여 준다.
  • 위의 경우 #/about 주소 요청이 들어올 경우 about.html의 내용을 앞서 설명한 ui-view 영역에 출력한다.

멀티 뷰 스테이트 등록

앞서 설명한 방법은 화면 레이아웃이 단 1개의 뷰를 가진 스테이트 상황을 가정했다. 하지만 상황에 따라 여러 개의 복잡한 뷰를 가진 스테이트를 작성해야할 때도 있다. 멀티 뷰 스테이트 작성의 예는 아래와 같다.

<!-- index.html -->
<body>
    <div ui-view></div>
</body>

<!-- article.html -->
<div>
    <div ui-view="header"></div>
    <div ui-view="body"></div>
    <div ui-view="footer"></div>
</div>

<!-- article-header.html -->
<div>Header</div>

<!-- article-body.html -->
<div>Body</div>

<!-- article-footer.html -->
<div>Footer</div>

// app.js
var samepleApp = angular.module('sameple-app', ['ui.router']);
sampleApp.config(['$stateProvider', function($stateProvider) {

    $stateProvider.state('article', {
        url: '/article',
        views: {
            '': {
                templateUrl: 'article.html'
            },
            'header@article': {
                templateUrl: 'article-header.html'
            },
            'body@article': {
                templateUrl: 'article-body.html'
            },
            'footer@article': {
                templateUrl: 'article-footer.html'
            }
        }
    });
}]);
  • /#/article 주소 요청에 대응하는 3개의 뷰를 가진 article이라는 이름의 State를 생성한다.
  • 1개의 스테이트는 1개 이상의 View를 가질 수 있다. 기본 뷰가 되는 부모 뷰는 ''로 선언한다. 나머지 3개의 자식 뷰는 {ui-view}@{state}의 형식으로 선언할 수 있다. 각 뷰마다 각각의 templateUrl(또는 template) 및 controller를 지정할 수 있다.

참고 글

관련 글

저작자표시 비영리 동일조건
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/04   »
일 월 화 수 목 금 토
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
글 보관함