-
17장 Angular.js 를 이용한 MVC 엔티티MeanStack (deprecated) 2016. 7. 5. 01:12
이번 장에서는 Angular.js 를 이용한 MVC 패턴을 를 구성해보겠다.
MVC 패턴을 구현하기 위해 먼저 , static 폴더에 example 이라는 폴더를 생성하고 , 하위폴더로 controllers 와
views 라는 폴더를 만들자.
그리고 static/example 폴더 안에 example.client.module.js 라는 파일을 만들자.
이 파일에 angular.module() 메소드를 사용하여 새로운 angular.js 모듈을 생성할 것 이다.
여기에 다음 코드를 넣자.
angular.module('example', []);위 코드는 angular.js 모듈을 생성할 것 이다. 하지만 여전히 애플리케이션 페이지에서 모듈 파일과
주 애플리케이션 모듈의 의존성으로 모듈을 포함 할 필요가 있다.
저번 장에서 만든 텍스트 입력 창 예제를 제거하고 모듈파일을 올릴 새로운 script 를 index.ejs 파일을
변경해야 한다. app/views/ 폴더 안에 index.ejs 파일을 변경하자.
<!DOCTYPE HTML> <html> <head> <title> <%= title %> </title> </head> <body> <% if (username) { %> <h2>Hello <%=username %></h2> <a href="/signout">Sign out</a> <% } else { %> <a href="/signup">Signup</a> <a href="/signin">Signin</a> <% } %> <br /> <img src="images/overwatchlogo.png" alt="logo" /> <script type="text/javascript" src="/lib/angular/angular.js"></script> <script type="text/javascript" src="/application.js"></script> <script type="text/javascript" src="/example/example.client.module.js"></script> <!-- 추가 --> </body> </html>그리고 static 폴더안의 application.js 를 다음처럼 변경하는 방식으로 주 애플리케이션 모듈의 의존성으로 example
모듈을 추가하자. 이제 실제로 angular.js 를 사용할 뷰를 만들어 보자.
먼저 static/example/views 폴더안에 example.client.view.html 파일을 생성하고 다음 코드를 붙여넣자.
<section> <input type="text" id="text1" ng-model="name" /> <input type="text" id="text1" ng-model="name" /> </section>이제 위 텍스트 입력창을 index.ejs 에서 나타나게 하기 위해 app/views/ 폴더로 가서 index.ejs 파일을 변경하자.
<!DOCTYPE HTML> <html> <head> <title> <%= title %> </title> </head> <body> <% if (username) { %> <h2>Hello <%=username %></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/angular.js"></script> <script type="text/javascript" src="/application.js"></script> <script type="text/javascript" src="/example/example.client.module.js"></script> </body> </html>위 코드에서 ng-include 지시자를 사용했다. 이놈은 코드만 봐도 감이 올 것이다.
명시된 경로에서 템플릿을 읽어와서 부로 컴파일 한 다음, 출력 결과를 지시자 DOM 내부 , 즉 ng-include 에 위치
시킨다. 이제 제대로 나오는지 테스트 해보자.
node 서버를 키고 localhost로 접속하여 텍스트 입력 창 2개가 나오는지 확인해보자.
이번엔 Angular.js 의 컨트롤러를 붙여보자.
angular.js 의 컨트롤러는 기본적으로 생성자 함수이며, angular.js가 컨트롤러 객체의 새로운 인스턴스를 생성하기
위해 사용한다. 일반적으로 컨트롤러 인스턴스는 ng-controller 지시자를 사용할 때 생성된다.
angular.js 컴파일러는 새로운 컨트롤러 인스턴스를 생성하기 위해 지시자에게 언든 컨트롤러 이름을 사용한다.
이 때, 해당 컨트롤러 인스턴스로 영역 객체를 전달하기 위해 의존성 주입을 활용한다.
그리고 나서 컨트롤러는 영역 초기 상태를 설정하거나 기능을 확장하기 위해 사용된다.
자 일단 한번 직접 angular.js 컨트롤러를 사용해보자.
static/example/controllers 폴더 안에 example.client.controller.js 라는 파일을 만들고 다음 코드를 붙여 넣자.
angular.module('example').controller('ExampleController', ['$scope', function($scope) { $scope.name = 'Mean application'; } ]);코드를 살펴보면 먼저 example 모듈을 인출하기 위해 angular.module() 메소드를 사용했다. 디음으로 controller()
메소드를 사용하여 새로운 ExampleController 라는 생성자 함수를 생성하고 생성자 함수에 $scope 객체를
주입하기 위해 의존성 주입을 사용하였다. 마지막으로 나중에 뷰에서 사용할 name 속성을 정의하기 위해 $scope
객채를 사용했다.
이제 이 놈을 사용하기 위해 app/views 폴더로 가서 index.ejs 파일을 수정하자.
<!DOCTYPE HTML> <html> <head> <title> <%= title %> </title> </head> <body> <% if (username) { %> <h2>Hello <%=username %></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/angular.js"></script> <script type="text/javascript" src="/application.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> <!-- 추가 --> </body> </html>index.ejs 에 방금 만든 컨트롤러 파일을 추가하였다.
그리고 위에서 만든 example.client.view.html 파일을 기억하는가? 거기에 controller 를 붙일 것 이다.
static/example/views 로 가서 example.client.view.html 파일을 변경하자.
<section ng-controller="ExampleController"> <input type="text" id="text1" ng-model="name" /> <input type="text" id="text2" ng-model="name" /> </section>ng-controller 지시자를 사용하여 위에서 만들었던 ExampleController 를 붙였다.
그리고 컨트롤러 파일에서 $scope.name 으로 Mean application 이라는 문자를 지정해 두었고 현재 텍스트 창의
ng-model 에 name 속성을 주었으니 결과는 안봐도 예상이 가능할 것 이다.
이제 node 서버를 키고 한번 접속해보자.
다음 처럼 텍스트 창에 컨트롤러 파일에서 설정한 대로 Mean application 이라는 문자가 텍스트 창에 미리
입력되어 나타난다.
이번장에는 angular.js 를 사용하여 뷰와 컨트롤러를 사용하였다.
다음 장에서는 angular.js 를 이용하여 라우팅을 제어 해 볼 것 이다.
(끝)
(현재 폴더 구조)
'MeanStack (deprecated)' 카테고리의 다른 글
19장 Angular.js (앵귤러js) 의 인증관리 (0) 2016.07.12 18장 Angular.js 를 이용한 라우팅 처리 (0) 2016.07.07 16장 Angular.js 설치 , bower 를 이용한 의존성 관리 (1) 2016.06.30 15장 passport 모듈을 이용한 사용자 인증 (2) (4) 2016.06.26 14장 passport 모듈을 이용한 사용자 인증 (1) (8) 2016.06.23
