1. 왜 사용하는가?
매우 빠른 응답성과 쉬운 테스트
2. 어디서 배우는가?
CodeSchool 의 아래 url 에서 무료로 AngularJs 의 기본 기능을 배울 수 있다. 강의와 실습과제로 구성된다.
https://www.codeschool.com/courses/shaping-up-with-angular-js
3. CodeSchool 의 level 별로 핵심사항 정리
1) Flatlander's Gem Store
ㄱ. AngularJS 소개
- client-side framework
- Response with JSON data (Data is loaded into existing page) (기존 방식 : Browser loads up entire webpage)
- http://angularjs.org 에서 angular.min.js 를 다운로드 받아서, webpage의 javascript 설정을 한다.
ㄴ. AngularJS 의 구성 요소
- Directives : HTML annotations that trigger Javascript behaviors
ex) ng-app, ng-controller, ng-show, ng-hide, ng-include, ng-repeat, ng-src, ng-click
- Modules : Where out application component live
ex) var app = angular.module('webStore'. []);
이때 'app' 은 js 내에서 controller 나 directive 지정 시 사용
'webStore' 은 화면에서 <html ng-app = "webStore"> 로 사용
- Controllers : Where we add application behavior
ex) app.controller('StoreController', function() {this.product = smartphone);
- Expressions - How values get displayed within the page
ex) {{controller명.controller 내 변수명}}
2) Built-in Directives
directive |
목적 |
사용 예시 |
ng-app |
특정 화면의 모듈 지정 |
<html ng-app = "webStore"> |
ng-controller |
특정 화면의 특정 element의 controller 지정 |
<body ng-controller="StoreController as store"> |
ng-show ng-hide |
특정 element가 보일지 말지 결정 |
ng-show(true/false) : 보임/숨김 ng-hide(true/false) : 숨김/보임 |
ng-repeat |
JSON 의 array([]) 의 object({})를 모두 보여준다. |
<div ng-repeat="product in store.products"> |
ng-src |
img 소스 설정 |
<img ng-src="~~"> |
ng-click |
특정 element를 click 했을 때의 설정 |
<a href ng-click="tab.setTab(3)">Reviews</a> |
ng-class | 조건이 맞을 때 특정 class를 부여 | <li ng-class="{active:tab.isSet(1)}" |
위 directive를 이용해서 tab 에 따라 아래 내용이 바뀌게 하기, tab을 클릭함에 따라 tab의 모양 변경하기 등을 쉽게 할 수 있다.
3) Forms
ㄱ. JSON 의 항목과 form의 element 를 연결할 수 있다.
ex)
ㄴ. submit을 통해 JSON 항목을 추가할 수 있다.
* ng-submit : allows us to call a function when the form is submitted
ㄷ. form 의 element 의 항목에 따라 validation을 지정할 수 있다.
- Turn off Default HTML validation : form tag 내 novalidate
- Mark Required Fields : 각 element 내 required
- validation을 통과해야 submit이 되도록 설정 : ng-submit="form이름.$valid && ~~"
- validation을 통과하지 못하는 경우 구별하기 : 아래 내역을 적은 css 를 link 걸기
4) Custom Directives (소스 refactoring)
* restrict : 'E'(element), 'A'(attribute)
5) Services (소스 refactoring)
Services give your Controller additional functionality, like ...
1) Fetching JSON data from a web service with $http
2) Logging messages to the JavaScript console with $log
3) Filtering an array with $filter