14. 표현식
예제
• {{ 1+2 }}
• {{ 3*10 | currency }}
• {{ user.name }}
특징
• Scope 객체 기준으로 속성들을 검사한다. (window 로부터가 아니라…)
• Null 에러를 무시한다. ({{a.b.c}} vs {{((a||{}).b||{}).c}})
• 조건문은 올 수 없다.
• 필터들과 함께 쓰인다. ({{ 3*10 | currency }})
.
Angular가 제대로 실행 되지 않을 경우 브라우저에 {{ 표현식 }}이 그대로 보이게 된다.
ng-bind를 이용하면 이를 방지할 수 있다.
30. 서비스
AngularJS의 컨트롤러, 지시자, 필터 그리고 다른 서비스에서 재사용 가능한 컴포넌트(대부분 UI 없이)를
서비스라 함
서비스는 다음과 같은 특징을 가짐
• 애플리케이션 공통 로직으로서의 서비스
• 싱글톤Singleton으로서의 서비스
• 커뮤니케이션 허브hub로서의 서비스
• 의존성 주입 대상Injectable Dependencies으로서의 서비스
서비스 생성 방법
app.constant
app.value
app.service
app.factory
app.config
31. There are only three ways how an object or a function can get a hold of its dependencies:
The dependency can be created, typically using the new operator.
The dependency can be looked up by referring to a global variable.
The dependency can be passed in to where it is needed.
(출처 : http://docs.angularjs.org/guide/di)
강력한 의존 관계의 JavaScript 예제
의존관계 주입 #1
33. moduel.controller('mainCtrl',function($scope, UserResource) {
…
$scope.search = function() {
…
$scope.userList = UserResource.query({q : query});
};
$scope object UserResource Object
• DI는 자신이 사용하는 오브젝트에 대한 선택과 생성 제어권을 외부로 넘기고 자신은 수동적으로 주입
받은 오브텍트를 사용하게 된다.
• 이는 특히 Unit 테스트 작성에 큰 도움을 준다. 사용하는 오브젝트의 Mock을 만들어서 주입이 가능하기
때문이다.
$scope
Mock object
UserResource
Mock Object
Unit Test 시실제 사용 시
의존관계 주입 #3
51. Google이 만든 웹 어플리케이션을 위한
Structural Framework
• 양방향 데이터 바인딩
• MVC 구조
• Template
• Directive를 통한 컴포넌트 재사용
• E2E 테스팅 및 Mocks
• 의존성 주입 (DI)
• Router
• ….
CRUD Apps 필수 기능 제공을 통한
(단일 페이지) 웹 어플리케이션 개발의 단순화