-
18장 Angular.js 를 이용한 라우팅 처리MeanStack (deprecated) 2016. 7. 7. 23:57
이번 장 에서는 Angular.js 를 이용한 라우팅 처리를 해볼 것 이다.
Angular.js 가 몇가지 라우팅 기능을 제공하기 위해서는 ng-include 지시자를 지렛대로 활용할 수 있지만, 여러
뷰에서 사용하려면 지저분하다. 라우팅 문제를 해결하기 위해, Angular.js 팀은 사용자가 해당 경로로 탐색할 때
마다 표시될 템플릿과 이에 대응하는 URL 경로를 정의하게 만드는 ngRoute 모듈을 개발했다.
Angular.js 가 단일 페이지 프레임워크이므로, ngRoute는 브라우저에서 전적으로 라우팅을 관리할 것 이다. 이는
서버에서 웹 페이지를 가져오는 대신, Angular.js 가 정의된 템플릿을 읽어, 컴파일하고, 특정 DOM 엘리먼트
내부에 결과를 위치시킬 것임을 의미한다. 서버는 정적 파일로 템플릿을 제공 할 뿐이며, URL 변경에 응답 하지
않을 것 이다. 이런 변경은 익스프레스 서버를 API 지향 벡엔드로 탈바꿈하게 만들 것 이다.
바우어를 사용해 ngRoute 모듈 설치 작업부터 시작하자.
먼저 최상위 폴더의 bower.json 파일을 수정하여 설치를 시작하자.
설치는 angular.js 를 설치하던 때 처럼 윈도우 환경이라면 git bash 를 이용하여 설치하자.
{ "name" : "Mean", "version" : "0.0.7", "dependencies" : { "angular" : "latest", "angular-route" : "latest" } }bower가 새로운 의존성 설치를 완료하면 , static/lib 폴더에 angular-route 라는 새로운 폴더가 생성된다.
다음으로 애플리케이션 주 페이지에 모듈을 포함 할 필요가 있으므로 app/views 폴더의 index.ejs 파일을 편집하자.
<!DOCTYPE html> <html> <head> <title><%= title %></title> </head> <body> <% if (userid) { %> <h2>Hello <%=userid %> </h2> <a href = "/signout">Sign out</a> <% } else { %> <a href="/signup">Signup</a> <a href="/signin">Signin</a> <% } %> <section ng-include="'example/views/example.client.view.html'"></section> <br> <img src = "images/overwatchlogo.png" alt="logo"> <script type="text/javascript" src="/lib/angular-route/angular-route.js"></script> <!-- 추가 --> <script type="text/javascript" src="/lib/angular/angular.js"></script> <script type="text/javascript" src="/example/example.client.module.js"></script> <script type="text/javascript" src="/example/controllers/example.client.controller.js"></script> <script type="text/javascript" src="/application.js"></script> </body> </html>이제 마지막으로 주 애플리케이션 모듈을 위해 의존성으로 ngRoute 모듈을 추가 할 필요가 있다.
static 폴더의 application.js 파일을 변경하자.
var mainApplicationModuleName = 'mean'; var mainApplicationModule = angular.module(mainApplicationModuleName, ['ngRoute','example']); angular.element(document).ready(function(){ angular.bootstrap(document, [mainApplicationModuleName]); });이제 ngRoute 모듈이 설정되며 구성과 사용준비가 끝날 것이다.
ngRoute 모듈은 라우팅을 위해 URL 해시를 사용하는 동작 방식이 기본이다. URL 해시는 일반적으로 페이지
내부 링크에 사용되므로, 해시 부분이 변경될 때, 브라우저는 서버에 요청을 보내지 않는다.
이는 angular.js 가 적절한 라우팅 정책을 유지하면서도 예전 브라우저를 지원하게 만든다. 따라서
일반적인 angular.js 라우트는 http://localhost:3000/#/example 와 유사한 형태다.
하지만 단일 페이지 애플리케이션에는 한 가지 즁요한 문제가 존재한다. 검색 엔진 웹로봇이 색인을 하지
못하므로, 형편없는 검색엔진 최적화로 고통받는다. 이 문제를 해결하기 위해, 주요 검색 엔진 제조사들은
개발자들에게 단일 페이지 애플리케이션이라고 애플리케이션을 표시할 수 있는 수단을 제공한다.
이런 식으로 검색 엔진 웹로봇은 우리가 만든 애플리케이션이 새로운 경로를 표시하기 위해 Ajax 를 사용하고
있으며, 페이지를 떠나기 앞서 결과를 기다릴 필요가 있다는 사실을 안다.
애플리케이션 라우트를 단일 페이지 애플리케이션 라우트로 표시하기 위해, 해시뱅 (Hashbang) 이라는 라우팅
정책을 사용할 필요가 있다. 해시뱅은 해시 기호 바로 뒤에 느낌표를 추가하는 방식으로 구현한다.
이를 주소로 나타내면 http://localhost:3000/#!/example 가 된다.
Angular.js는 모듈 구성 블록과 AngularJs 의 $locationProvider 서비스를 사용해 해시뱅 구성을 지원한다.
애플리케이션 라우팅을 구성하기 위해, static 폴더의 application.js 파일을 변경하자.
var mainApplicationModuleName = 'mean'; var mainApplicationModule = angular.module(mainApplicationModuleName, ['ngRoute','example']); mainApplicationModule.config(['$locationProvider', //추가 function($locationProvider) { $locationProvider.hashPrefix('!'); }]); //추가 끝 angular.element(document).ready(function(){ angular.bootstrap(document, [mainApplicationModuleName]); });이제 첫 라우터를 구성할 때 가 왔다.
ngRoute 모듈은 라우트 관리를 위한 여러 핵심 엔티티를 포함한다. angular.js 애플리케이션 라우팅 동작 방식을
정의하기 위해 여러 메소드를 제공하는 $routeProvider 객체부터 시작할 것이다.
$routeProvider 객체를 사용하려면, 모듈 구성 블록을 생성하고 $routeProvider 객체를 주입하고, 이 객체를 사용해
라우트를 정의할 필요가 있다. static / example 폴더 안에 config 라는 폴더를 새로 만들고 example.client.routes.js
파일을 만들고 코드를 적자.
angular.module('example').config(['$routeProvider' ,function($routeProvider) { $routeProvider. when('/',{ templateUrl : 'example/views/example.client.view.html' }). otherwise({ redirectTo : '/' }); } ]);위 코드를 살펴보자.
example 모듈을 얻기 위해 angular.module() 메소드를 사용했고, 새로운 구성 블록을 생성하기 위해 config()
메소드를 수행했다. 그러고 나서, 구성함수에 $routeProvider 객체를 주입하기 위해 의존성 주입을 적용했고,
새로운 라우트를 정의하기 위해 $routeProvider.when() 메소드를 사용했다.
$routeProvider.when() 메소드의 첫째 인수는 라우트의 URL이며, 둘째 인수는 옵션 객체로 템플릿 URL을
정의하는 곳이다. 마지막으로 사용자가 미정의 URL 을 탐색할 때 라우터의 동작 방식을 정의하기 위해
$routeProvider.otherwise() 메소드를 사용했다. 이 부분은 보면 어떻게 작동하는지 예상이 될 것 이다.
ng-Route 모듈에 포함된 또 다른 엔티티는 ng-view 지시자다.
ng-view 지시자는 angular.js 라우터에게 라우팅 뷰를 출력하기 위해 어떤 DOM 엘리먼트를 사용할지를
알려준다. 사용자가 명세된 URL을 탐색할 때, angular.js는 이 지시자로 표시된 DOM 엘리먼트 내부에
템플릿을 출력할 것이다. 따라서, 라우팅 구성을 마무리하려면, 주 애플리메이션 페이지에 새로운 자바스크립트
파일을 포함하고 ng-view 지시자를 지정한 엘리먼트를 추가할 필요가 있다.
이를 위해 app/views 폴더의 index.ejs 파일을 변경하자.
<!DOCTYPE html> <html> <head> <title><%= title %></title> </head> <body> <% if (userid) { %> <h2>Hello <%=userid %> </h2> <a href = "/signout">Sign out</a> <% } else { %> <a href="/signup">Signup</a> <a href="/signin">Signin</a> <% } %> <section ng-view></section> <!-- 추가 --> <br> <img src = "images/overwatchlogo.png" alt="logo"> <script type="text/javascript" src="/lib/angular/angular.js"></script> <script type="text/javascript" src="/lib/angular-route/angular-route.js"></script> <script type="text/javascript" src="/example/example.client.module.js"></script> <script type="text/javascript" src="/example/controllers/example.client.controller.js"></script> <script type="text/javascript" src="/example/config/example.client.routes.js"></script> <!-- 추가 --> <script type="text/javascript" src="/application.js"></script> </body> </html>자 작업이 끝났다.
이제 node 서버를 작동시키고 http://localhost:3000 으로 접속을 해보자.
ng-view 지시자에 설정한 대로 example.client.view.html 이 나오는 것이 보이는가?
거기다 주소를 살펴보면 angular.js 라우터가 요청을 http://localhost:3000/#!/ 으로 전환한 것 이 보인다.
정상적으로 주소와 ng-view 지시자가 작동한다면 라우팅에 성공한 것 이다.
만약 작동하지 않는다면 오타는 없는지 다시 꼼꼼히 살펴보자. index.ejs 에서 script 를 불러오는 순서도
중요하다는 것을 알아야 한다. 클라이언트 모듈과 컨트롤러를 불러온뒤 라우트 파일을 불러와야 할 것 이다.
그래도 안된다면 댓글을 남겨주길 바란다.
이번장에서는 라우팅 처리에 대해 알아보았다. 다음장에서는 angular.js 의 기본 서비스와 인증관리에 대해서
알아보자.
(끝)
(폴더구조)
'MeanStack (deprecated)' 카테고리의 다른 글
20장 Node.js express 를 이용한 CRUD 모듈 (0) 2016.07.13 19장 Angular.js (앵귤러js) 의 인증관리 (0) 2016.07.12 17장 Angular.js 를 이용한 MVC 엔티티 (2) 2016.07.05 16장 Angular.js 설치 , bower 를 이용한 의존성 관리 (1) 2016.06.30 15장 passport 모듈을 이용한 사용자 인증 (2) (4) 2016.06.26
