Angular에서 제공하는 샘플 간략 정리

Angular1 에서 제공하는 샘플 간략 정리

AngularJs에서 제공해주는 샘플로써 AngularJs에서 제공해주는 기능을 어떻게 사용하는지 알 수 있다.

angular-1.3.0-beta.7.zip

상세 목차 정리

1. example-$route-service
   - ngRoute를 사용하여 페이지간 이동 기능에 관한 소스.
   - $routeProvider, $locationProvider, $routeParams, $scope($route, $location, $routeParams)에 관해서 알 수 있다.
   
   
2. example-checkbox-input-directive
   - <input type="checkbox">의 ng-true-value지시자와 ng-false-value지시자에 관한 예제와 check시에 값(true) non check시에 값(false)에 관해서 알 수 있다.
   - 관련 API 주소 : https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D
   
   
3. example-date-input-directive
   - <input type="date">의 사용법에 관해서 알 수 있다.
   - ISO-8601 date format (yyyy-MM-dd)형태를 사용한다.
   - 날짜 유효성 검사(check validate) 및 변환 입력 기능.
   - 달력 표시와 달력의 min, max 조절 및 validation check 방안, $valid와 $error값의 변화를 알 수 있다.
   - 관련 API 주소 : https://docs.angularjs.org/api/ng/input/input%5Bdate%5D
   
   
4. example-datetimelocal-input-directive
   - <input type="datetime-local">의 사용법에 관해서 알 수 있다.
   - ISO-8601 local datetime format (yyyy-MM-ddTHH:mm)형태를 사용한다.
   - 날짜 유효성 검사(check validate) 및 변환 입력 기능.
   - 달력 표시와 달력의 min, max 조절 및 validation check 방안, $valid와 $error값의 변화를 알 수 있다.
   - 관련 API 주소 : https://docs.angularjs.org/api/ng/input/input%5Bdate%5D
   
   
5. example-email-input-directive
   - <input type="">의 사용법에 관해서 알 수 있다.
   - 올바른 이메일 유효성 검사를 한다.
   - 관련 API 주소 : https://docs.angularjs.org/api/ng/input/input%5Bemail%5D
   
   
6. example-example
   - angular.copy(source, [destination])에 관해서 알 수 있다.
   - source에서 [destination]에 관련 모델을 복사한다.
   - 관련 API 주소 : https://docs.angularjs.org/api/ng/function/angular.copy
   
   
7. example-example1
   - angular의 Expressions(표현식)에 관해서 알 수 있다.
   - angular의 Expressions의 범위(context)는 Scope 객체 범위이다.
   - 관련 API 주소 : https://docs.angularjs.org/guide/expression
   
   
8. example-example2
   - ngStrictDi(ng-strict-di)속성을 사용해서 strict di 방식을 따르도록 한다.
   - 의존성 삽입 가이드 대로 설정을 하지 않으면 오류가 나도록 발생한다. bug 추적을 용의하게 하기 위해서라는데...자세히 사용을 해보지 않아서 아직은 잘은 모르겟다.
   - 관련 API 주소 : https://docs.angularjs.org/api/ng/directive/ngApp
   
   
9. example-example3
   - $anchorScroll() 서비스의 용도를 파악 할 수 있다.
   - $anchorScroll이 호출되면 $location.hash()값을 확인하고 현재 스크롤을 확인하여 $location.hash()값으로 현재 스크롤의 위치를 변경한다.
   - $location.hash()는 element의 id값을 파라메터로 받는다.
   - 관련 API 주소 : https://docs.angularjs.org/api/ng/service/$anchorScroll
   
   
10. example-example4
    - $cacheFactory(cacheId, [options]) 서비스의 용도를 파악 할 수 있다.
    - cash 객체를 생성하고 생성된 cash객체 제공하여 cash를 사용할 수 있도록 해준다.
    - cacheId파라메터는 Cash생성시에 사용될 이름.
    - options는 capacity(용량,한계)를 줄수 있으며 LRU(Least Recently Used) 캐쉬를 사용하도록 한다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/service/$cacheFactory
    
    
11. example-example5
    - $compileProvider.directive를 통해 angularJS 표현식을 통해 실시간 화면 컴파일을 하는데... $compileProvider.directive에 관해서 확실히 알지 못해서 차후 재정리가 필요 함.
    - 실제 소스가 하는 역할은 지시자를 갖는 TextArea의 값을 compile지시자를 갖는 div에 삽입하고 그 div를 컴파일하여 변환해서 보여주는 역할이다.
    - $compile의 역할과, $watch역할을 알 수 있다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/service/$compile
    
    
12. example-example6
    - <a>태그의 ngHref와 ngClick 지시자에 관해서 알 수 있다.
    - ngHref는 href와 거의 비슷한데, href는 {{hash}}(표현식)데이터가 존재 하지 않아도 Link를 통해 페이지가 이동이 되지만 ngHref는 {{hash}}(표현식)데이터 값이 없으면 link생성을 하지 않는다. 즉 {{hash}}값이 없을 경우 <a> 기능이 동작하지 않도록 한다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/directive/ngHref
    
    
13. example-example7
    - <button>의 ngDisabled를 checkbox를 통해서 제어 하는 것을 알 수 있다.
    - ngDisabled는 input, button등 여러 element에 사용이 가능하며 true일 경우 관련 element를 disable한다. false일 경우는 disable을 해제 한다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/directive/ngDisabled
    
    
14. example-example8
    - ngChecked 지시자에 관해서 알 수 있다.
    - ngChecked는 주로 <input type="checkbox">에서 사용되며 기능은 특정 모델을 체크하며 모델 값이 true일때 자신을 가진 element를 check하도록 한다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/directive/ngChecked
    
    
15. example-example9
    - ngReadonly 지시자에 관해서 알 수 있다.
    - <input>태그에서 사용되며 ngReadonly가 가르키는 모델의 값이 True일경우 ngReadonly를 지시자로 갖는 Element를 읽기전용으로 만든다. False일 경우는 쓰기전용으로 만든다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/directive/ngReadonly
    
    
16. example-example10
    - ngSelected 지시자에 관해서 알 수 있다.
    - <OPTION> 태그에서 사용되며 ngSelected지시자가 가르키는 모델의 값이 true일 경우 <OPTION>태그가 선택된다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/directive/ngSelected 
    
    
17. example-example11
    - <DETAIL> 태그에서 사용되는 ngOpen에 관해서 알 수 있다.
    - ngOpen이 가르키는 모델의 값이 True일 경우 해당 <DETAIL>태그를 펼친다. False일 경우는 닫는다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/directive/ngOpen
    
    
18. example-example12
    - <FORM>태그에서 ngController지시자를 사용할 경우 <FORM>태그안의 상태에 따라 <FORM>의 class속성이 어떻게 변하는지 알 수 있다.
    - <FORM>이 이상없으면 ng-valid가 class에 들어감.
    - <FORM>이 이상하면 ng-invalid가 class에 들어감.
    - <FORM>이 형식에 올바르다면 ng-pristine가 class에 들어감.
    - <FORM>이 형식에 올바르지 않다면 ng-dirty가 class에 들어감.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/directive/form
    
    
19. example-example13
    - <INPUT>태그에서 ngPattern을 통해서 패턴에 맞지 않을 경우 <INPUT>의 class에 ng-invalid가 들어가는 것을 알 수 있다.
    - ngPattern은 정규식을 사용하며 올바르지 않은 경우 관련 Element에 Class에 ng-invalid를 넣는다.
    
    
20. example-example14
    - ngBind지시자를 통해서 모델과 양방향 동기화를 하는 것을 알 수 있다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/directive/ngBind
    
    
21. example-example15
    - ngBindTemplate지시자를 통해 모델을 화면에 표시한다.
    - ngBindTemplate는 ngBind와 틀리게 {{}}표현식을 통해 여러개의 모델을 한번에 동기화 하도록 해준다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/directive/ngBindTemplate
    
    
22. example-example16
    - ngBindHtml지시자를 통해 ELEMENT에 HTML형태의 값을 삽입한다.
    - ngBindHtml가 가르키는 모델 값을 HTML형태로 삽입을 한다. ngBindHtml은 SCE(Strict Contextual Escaping)을 지원하도록 1.2부터 바뀌었기 때문에 ngSanitize모듈을 삽입해야 한다.
    - SCE를 강제로 사용하지 않게 할 수 있다. 모듈 config에서 $sceProvider를 사용하여 enable(false)를 호출하면 된다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/directive/ngBindHtml
    
    
23. example-example17
    - ngClass지시자를 통해서 특정 엘리먼트에 클래스를 삽입하거나, CSS를 적용할 수 있다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/directive/ngClass
    
    
24. example-example18
    - ngClass지시자가 가르키는 모델에 ngClick지시자를 통해서 style을 삽입하고 해제하는 것을 알 수 있습니다.
    
    
25. example-example19
    - ngRepeat지시자를 통해 반복적으로 Element를 생성할 경우 스타일을 ngClassOdd와 ngClassEven지시자를 사용하여 지정하는 방법을 알 수 있다.
    - ngClassOdd는 홀수번째 Element스타일을 지정 한다.
    - ngClassEven은 짝수번째 Element스타일을 지정 한다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/directive/ngClassOdd
    
    
26. example-example20
    - ngRepeat지시자를 통해 반복적으로 Element를 생성할 경우 스타일을 ngClassOdd와 ngClassEven지시자를 사용하여 지정하는 방법을 알 수 있다.
    - 25번 예제와 동일 함.
    
    
27. example-example21
    - ngCloak을 사용하여 Flicker effect(컴파일되기전 html상태)를 방지하는 것을 볼 수 있다.
    - body에 걸 수 있지만 그것보다는 컴파일 대상이 될 Element에 걸어주는것이 좋다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/directive/ngCloak
    
    
28. example-example22
    - Controller의 prototype에 익명 함수를 만들고 그것을 사용하는 것을 보여준다.
    - 기능보다는 구조에 관해서 설명을 해주려고 만든 샘플 같지만... 확실하지가 않아 차후 정리 함.
    - 29번째 샘플과 비교하기 위해서 만든 샘플
    
    
29. example-example23
    - 28번과 동일한 기능을 하는 샘플 28번은 Controller함수의 prototype을 사용해서 기능을 구현했지만 29번은 $scope서비스를 인자로받아 $scope를 통해 기능을 만들었음을 확인 할 수 있다.
    
    
30. example-example24
    - ngClick안에서 연산식을 사용할 수 있는 것을 보여준다.
    - ngInit에서도 마찬가지다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ngTouch/directive/ngClick
    
    
31. example-example25
    - ngDblclick지시자를 사용하여 연산을 처리하는 것을 알 수 있다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/directive/ngDblclick
    
    
32. example-example26
    - ngMouseDown에 관해서 알 수 있다.
    - ngClick과 다르게 마우스가 Down될 경우 관련 동작이 일어난다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/directive/ngMousedown
    
    
33. example-example27
    - ngMouseup에 관해서 알 수 있다.
    - ngClick과 다르게 관련 Element위에서 마우스가 Up될 경우 관련 동작이 일어난다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/directive/ngMouseup
    
    
34. example-example28
    - ngMouseover에 관해서 알 수 있다.
    - ngMouseover지시자를 사용하는 Element위에 마우스가 올라가면 관련 동작이 일어난다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/directive/ngMouseover
    
    
35. example-example29
    - ngMouseenter에 관해서 알 수 있다
    - ngMouseenter지시자를 사용하는 Element에 enter이벤트가 발생하면 관련 동작이 일어난다.
    - enter와 over의 차이점은 over는 자식 엘리먼트에 마우스가 올라가도 동작이 발생하는 반면, enter는 오직 자기의 element에 올라가야 동작이 발생한다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/directive/ngMouseenter
    
    
36. example-example30
    - ngMouseleave에 관해서 알 수 있다.
    - ngMouseleave지시자를 사용하는 Element를 벗어나는 경우 관련 동작이 발생한다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/directive/ngMouseleave
    
    
37. example-example31
    - ngMousemove에 관해서 알 수 있다.
    - ngMousemove를 사용하는 Element위에서 마우스가 움직일 경우 관련 동작이 발생한다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/directive/ngMouseleave
    
    
38. example-example32
    - ngKeydown에 관해서 알 수 있다.
    - ngKeydown을 사용하는 Element에서 keydown이벤트가 발생될 경우 관련 동작이 실행된다.
    - 계속 해서 누르고 있는것도 이벤트로 인식을 한다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/directive/ngKeydown
    
    
39. example-example33
    - ngKeyup에 관해서 알 수 있다.
    - ngKeyup을 사용하는 Element에서 keyup이벤트가 발생될 경우 관련 동작이 실행된다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/directive/ngKeyup
    
    
40. example-example34
    - ngKeypress에 관해서 알 수 있다
    - ngKeypress를 사용하는 Element에서 keyPress이벤트가 발생할 경우 관련 동작이 실행된다.
    - 버그가 있는데, 숫자, 영어는 이상없이 이벤트가 발생하나, UNICODE는 동작을 하지 않는다.(이거나 잡아볼까?)
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/directive/ngKeyup
    
    
41. example-example35
    - ngSubmit에 관해서 알 수 있다.
    - ngSubmit지시자를 사용하는 <FORM>태그에서 submit이 발생할 경우 ngSubmit지시자가 가르키는 함수를 호출 하도록 한다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/directive/ngSubmit
    
    
42. example-example36
    - ngCopy에 관해서 알 수 있다.
    - ngCopy지시자를 사용하는 Element에서 Copy(Ctrl+c) 이벤트가 발생 할 경우 관련 동작을 실행한다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/directive/ngCopy
    
    
43. example-example37
    - ngCut지시자에 관해서 알 수 있다.
    - ngCut지시자를 사용하는 Element에서 Cut(Ctrl+x) 이벤트가 발생 할 경우 관련 동작을 실행한다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/directive/ngCut
    
    
44. example-example38
    - ngPaste지시자에 관해서 알 수 있다.
    - ngPaste지시자를 사용하는 Element에서 Paste(Ctrl+v)이벤트가 발생 할 경우 관련 동작을 실행한다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/directive/ngPaste
    
    
45. example-example39
    - ngIf지시자의 값이 False일 경우 관련 Element가 삭제되고 True일 경우 삭제가된 코드가 재 생성된다.
    - ngShow와 비교 되는 것은 ngShow는 Element를 숨기고 보여주지만 ngIf는 코드를 완전 삭제하고 다시 복구를 하는것이 틀리다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/directive/ngIf
    
    
46. example-example40
    - ngInclude지시자가 가르키는 Page를 ngInclude를 가진 Element의 하위에 Page를 include한다.
    - 로컬에서 테스트시 Cross-Origin Resource Sharing (CORS)를 위해 관련 처리를 해주고 테스트를 진행을 해야 한다. [크롬에서 처리 방안]
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/directive/ngInclude
    
    
47. example-example41
    - ngInit지시자는 현재 $scope에서 초기 연산을 할 수 있도록 해준다.
    - 주 사용방법은 ngRepeat같은 반복문에서 특정 모델값에 데이터를 대입/초기화 해주는것이다. 만약 ngRepeat가 아닌 다른 상황에서 현재 $scope에 값을 초기화 하려면 Controller에서 초기화를 해라.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/directive/ngInit
    
    
48. example-example42
    - ngNonBindable지시자를 가진 Element는 angularjs가 compile또는 bind를 하지 못하도록 지시를 한다.
    - 즉 {{}}표현식이나 Angular에서 사용하는 기능을 사용하지 못하도록 한다. 이것은 angular표현식이나 코드를 표시하고 싶을 때 유용하게 쓰인다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/directive/ngNonBindable
    
    
49. example-example43
    - ngPluralize지시자는 en-US localization rules에 따라서 message를 화면에 표시를 해준다. 그리고 이 rule들은 angular.js와 같이 제공이 된다, 또한 rule자체를 재정의 할 수 있다.[rule 변경 방법 및 설명]
    - message를 여러 조건하에 설정 할 수 있는데 자세한건 아래 관련 API주소를 통해 확인하길 바람.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/directive/ngPluralize
    
    
50. example-example44
    - filter라는 모듈은 filter가 가르키는 모델의 값을 걸러주는 역할을 한다.
    - ngRepeat와 같이 List에서 값을 검색하는 용도로 이 샘플에서는 테스트가 되었다. 참고로 보여지는 값이 아닌 모델의 값으로 Like 검색을 하니 참고 하길 바란다.
    
    
51. example-example45
    - ngShow지시자의 값이 true일 경우 ngShow지시자를 가진 Element를 보여준다.
    - ngHide지시자의 값이 true일 경우 ngHide지시자를 가진 Element를 숨긴다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/directive/ngShow
    
    
52. example-example46
    - 51번째 소스와 동일한 화면을 표시를 해주나 ngHide/ngShow동작시 ngHide를 가진 Element에 들어가는 Animation설정 방법이 틀리다.
    
    
53. example-example47
    - ngStyle이 가르키는 모델의 값으로 ngStyle을 사용하는 Element의 style을 정의한다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/directive/ngStyle
    
    
54. example-example48
    - ngSwitch를 통해 java의 switch구문처럼 Element의 분기를 할 수 있다.
    - on으로 Model을 선택하고 when을 통해서 on에서 설정한 값이 when하고 동일 할 경우 관련 Element만 등록하고  나머지 element는 삭제한다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/directive/ngSwitch
    
    
55. example-example49
    - directive를 사용하여 새로운 지시자 생성 및 지시자를 사용하는 방법이 적혀 있다.
    - 관련 API 주소 : https://docs.angularjs.org/guide/directive
    
    
56. example-example50
    - <script>태그의 type중 "text/ng-template"는 ngView나 ngInclude에서 사용할 컨텐츠의 로드를 뜻합니다.
    - 이 스크립트의 id를 통해서 include하거나 view에 표시합니다.
    - $templateCash를 사용하기에 초반에 관련 항목을 cash에 올려놓고 Load를 하기 때문에 빠릅니다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/directive/script
    
    
57. example-example51
    - <select>태그 ng-options의 사용법 중 group by에 관해서 알 수 있다. 또한 ng-option사용법에 관해서도 알 수 있다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/directive/select
    
    
58. example-example52
    - $document 서비스는 window.document객체를 jquery나 jqLite로 감싼 객체이다. 이예제는 $doucment가 무엇인지 여기서의 데이터는 어떻게 쓰는지 알려 준다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/service/$document
    
    
59. example-example53
    - filter 모듈에 관한 샘플이며 ngRepeat에서 filter를 사용하는 방법, filter에서 ngModel값을 참고 하도록 설정하는 방법이 정리되어 있다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/filter/filter
    
    
60. example-example54
    - filter모듈 중 currency기능을 사용하는 예제이며, currency는 통화(돈)값의 포맷팅을 해준다. ($123.56) 만약 currency가 없을 경우 변화없이 데이터를 표시한다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/filter/currency
    
    
61. example-example55
    - filter모듈 중 number기능을 사용하는 예제이며, number는 숫자 포맷팅(반올림등등)을 지원해주는 기능입니다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/filter/number
    
    
62. example-example56
    - filter모듈 중 date기능을 사용하는 예제이며, date는 날짜 포맷팅을 지원해주는 기능입니다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/filter/date
    
    
63. example-example57
    - filter모듈 중 json기능을 사용하는 예제이며, json은 모듈이나, 값을 json 형태로 변경해주는 기능입니다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/filter/json
    
    
64. example-example58
    - filter모듈 중 limitTo기능을 사용하는 예제이며, limitTo는 관련 데이xj를 limitTo에서 설정한 사이즈 만큼 잘라서 보여준다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/filter/limitTo
    
    
65. example-example59
    - filter모듈 중 orderby를 사용하는 예제이며, predicate(대상설정)과 reverse(정렬방침)을 통해 ng-repeat를 사용해서 뿌려주는 list를 정렬하는 예제이다.
    - predicate는 정렬할 대상을 지정하는 것이고, reverse가 true일경우 올림차순, false일때 내림차순 이다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/filter/orderBy
    
    
66. example-example60
    - $http 모듈을 사용해서 서버와 통신하는 방법에 관한 샘플이다. get, jsonp를 이용한 request, response사용법에 관해서 잘 설명이 되어 있다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/service/$http
    
    
67. example-example61
    - $interpolateProvider를 통해 {{}}표현식을 변경할 수 있다. (예 "//demo.label//")
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/provider/$interpolateProvider
    
    
68. example-example62
    - $interval을 사용한 timer관련 샘플이다.(start, stop)
    - custom 지시자를 통한 date pattern샘플도 존재 한다. 지시자에서 $interval을 사용하여 1초마다 타이머가 동작하도록 한다.
    - 또한 $destroy를 사용하여 dom이 destory될때 timer를 stop하도록 되어 있다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/service/$interval
    
    
69. example-example63
    - $log서비스를 통해 console로그에 어떻게 표시가 되는지 보여주는 샘플이다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/service/$log
    
    
70. example-example64
    - $sce서비스를 사용하여 특정 element에 text형태의 html코드를 삽입하고 동작시키는 샘플이다.
    - $sce를 자세히 정리할 필요 있음.
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/service/$sce
    
    
71. example-example65
    - $window는 browser의 window참조 객체이다. window객체 자체를 가져다 써도 되지만 이것을 글로벌 변수이므로 사용하기가 머하다. 그래서 그것을 참조하는 $window를 사용하길 바란다. 
    - 관련 API 주소 : https://docs.angularjs.org/api/ng/service/$window
    
    
72. example-example66
    - $cookies의 사용방법에 관해서 알 수 있다.
    - $cookies는 브라우저의 cookie를 읽고 쓰는 것을 제공 합니다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ngCookies/service/$cookies
    
    
73. example-example67
    - linky는 linky에 설정된 Text값을 통해 링크를 생성합니다.http, https, ftp, mailTo 및 전자메일 주소를 지원합니다.
    - linky는 ngSanitize가 필요합니다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ngSanitize/filter/linky
    
    
74. example-example68
    - $ngSanitize는 html을 파싱해서 이상없는 코드로 변경하는 역할을 합니다.
    - 이 예제는 ngSanitize가 필요한 ngBindHtml, $sce.trustAsHtml과 ngSanitize가 필요없는 ngBind를 통해 이것에 대해서 어떻게 다른지 알려주는 예제 입니다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ngSanitize/service/$sanitize
    
    
75. example-example69 (mobile)
    - ngTouch의 ngClick을 통해서 model값을 계속 1씩 증가 하는 예제이다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ngTouch/directive/ngClick
    
    
76. example-example70
    - ngTouch의 ngSwipeLeft, ngSwipeRight이 어떤 역할을 하는지 알 수 있다.
    - ngSwipeLeft는 오른쪽에서 왼쪽으로 슬라이드 하는것이다, 마우스로 드레그 하는 것도 동작한다.
    - ngSwipeRight는 왼쪽에서 오른쪽으로 슬라이드를 하는 것이다, 마우스로 드레그 하는 것도 동작한다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ngTouch/directive/ngSwipeLeft
    
    
77. example-example71
    - 70번예제와 동일하다. 단지 ng-app에서 호출한 이름만 틀리다.
    - 관련 API 주소 : https://docs.angularjs.org/api/ngTouch/directive/ngSwipeLeft
    
    
78. example-example72
    - hashbang에 관해서 비교하는 것을 보여주는 것 같지만 재 정의 필요.
    - 관련 API 주소 : https://docs.angularjs.org/guide/$location
    
    
79. example-example73
    - angularjs에서는 $location에 양방향 바인딩을 지원해주지 않기 때문에 $scope.$watch를 통해서 $location.path()를 통해 $location과 model데이터의 양방향을 하는 방법을 예제를 통해 보여준다.
    - 관련 API 주소 : https://docs.angularjs.org/guide/$location
    
    
80. example-example74
    - ngAnimate와 <input type="check">를 통해서 애니메이션을 호출 하는 것을 보여준다.
    
    
81. example-example75
    - ngAnimate와 <button>을 통해서 애니메이션 효과를 보여준다.
    
    
82. example-example76
    - draggable이라는 custom지시자를 만들어서 사용하는 것을 보여준다.
    - 샘플에서는 drag를 행하는 지시자이다.
    
    
83. example-example77
    - Angularjs에서 제공하는 module, click, 양방향 바인드를 simple하게 샘플로 만들어 놓은 예제.
    - 또한 Controller의 간략 사용법이 있다.
    - 관련 API 주소 : https://docs.angularjs.org/guide/controller
    
    
84. example-example78
    - Controller사용법과 ngClick을 통하여 paramter를 넘기는 방법이 있다.
    - 관련 API 주소 : https://docs.angularjs.org/guide/controller
    
    
85. example-example79
    - Controller사용법과 Controller별 $scope에 관해서 알 수 있는 샘플이다.
    - 관련 API 주소 : https://docs.angularjs.org/guide/controller
    
    
86. example-example80
    - 지시자를 통해서 모델과 bind하는 방법을 알 수 있으며, 지시자의 형태에 관해서 알수 있다.
    - best practice에서는 ng-bind 형태로 사용하길 권장한다.
    - 관련 API 주소 : https://docs.angularjs.org/guide/directive
    
    
87. example-example81
    - Controller별 지시자 생성 방법과 간략하게 지시자를 생성하고 사용하는 방법에 관해서 정리되어 있다.
    - 관련 API 주소 : https://docs.angularjs.org/guide/directive
    
    
88. example-example82
    - 지시자의 templateUrl을 통해 template가 보여줄 정보를 특정 url경로를 통해 알아오는 샘플이다.
    - 관련 API 주소 : https://docs.angularjs.org/guide/directive
    
    
89. example-example83
    - 지시자의 restrict를 사용하여 지시자 분석시 Element인지 Attribute인지 Class인지 알 수 있다.
    - 이 샘플을 E를 사용하여 엘리먼트 이름을 대상으로 만들어져 있다.
    - 관련 API 주소 : https://docs.angularjs.org/guide/directive
    
    
90. example-example84
    - 각 Contoller마다 지시자(directive)를 생성한 샘플, 좋지 않은 샘플임. 이 방식말고 다른 방식은 아래 예제에 계속 정리 됨.
    - 관련 API 주소 : https://docs.angularjs.org/guide/directive
    
    
91. example-example85
    - 각 Contoller별 지시자를 생성하지 않고 1개의 Controller에 모델을 2개 생성하고 지시자의 scope속성과 Element 속성값을 통해 각각 다른 값을 보여주는 샘플이다.
    - 관련 API 주소 : https://docs.angularjs.org/guide/directive
    
    
92. example-example86
    - 지시자의 scope를 통해서 template대상이 될 화면의 데이터중 원하는 데이터만 가져와서 매핑 시켜 보여주는 방법에 관해서 정리 되어 있다.
    - 관련 API 주소 : https://docs.angularjs.org/guide/directive
    
    
93. example-example87
    - link메소드를 return하는 지시자를 만들고 사용하는 방법이 있다.
    - link메소드는 $interval, dateFilter를 di(주입)받아서 그 기능을 통해 초당 현재 시간이 update되도록 만들어 놓았다.
    - watch를 통해 my-current-time속성값을 통해 time의 포맷팅을 계속 변경한 것을 주시 해라.
    - 관련 API 주소 : https://docs.angularjs.org/guide/directive
    
    
94. example-example88
    - transclude속성을 통해 지시자를 사용하는 Element의 값을 template안에 값으로 넣고 Element 하위에 Element와 template가 석인 값을 넣을 수 있다.
    - 즉 Element의 자식값이 Template값에 자식으로 이동 되며, tempate는 Element의 자식으로 들어가게 된다.
    - 만약 false로 하는 경우 template값이 Element의 하위로 들어가고 기존 Element안에 있던 값은 다 사라지고 만다.
    - 관련 API 주소 : https://docs.angularjs.org/guide/directive
    
    
95. example-example89
    - $compile()메소드는 DOM을 해석하면서 지시자(directive)를 찾는다. 지시자는 DOM구조를 변경하고 응답을 위한 지시자안에 생성한 link()메소드를 리턴한다. 그리고 지시자가 리턴한 link메소드를 실행시킨다, 이 안에는 $watch를 통해 이벤트 listener등록과 관련 Dom 파싱 관련 로직이 들어있다 그리고 이것을 토대로 Scope와 지시자를 사용하는 Element, Model간의 Live Binding이 이루어 지는 것이다.
    - 이 샘플을 Return되는 Link 메소드의 Scope 파라메터의 값에 데이터를 초기화 해도 transclude를 true로 줄 때 별도 Scope가 생성되어서 전혀 접근을 할 수 없음을 보여준다.
    - 관련 API 주소 : https://docs.angularjs.org/guide/directive
    
    
96. example-example90
    - 지시자(directive)에서 scope속성의 '&'을 이용한 샘플이다.
    - &은 template의 특정 이벤트 발생 함수와 주 페이지의 속성과 매칭을 시켜서 템플릿에서 click 이벤트등의 이벤트로 호출된 함수가 directive를 사용하는 element의 속성이 사용하는 함수를 호출하도록 하는 역할을 한다.
    - 관련 API 주소 : https://docs.angularjs.org/guide/directive
    
    
97. example-example91
    - myDraggable이라는 지시자를 생성하고 이 지시자에서 $document서비스를 활용하는 방법을 설명한다.
    - drag기능을 하는 지시자이다.
    - 관련 API 주소 : https://docs.angularjs.org/guide/directive
    
    
98. example-example92
    - 이번 예제는 directive를 2개 생성하고 require옵션을 통해서 A라는 directive가 B라는 directive안의 contoller안에 메소드를 사용 하는 것을 보여주는 샘플이다.
    - require옵션은 2개의 추가 옵션(?,^)이 있다.
    - ? : 매칭되는 directive가 존재하지 않아도 에러 발생하지 않음.
    - ^ : Dom 엘리먼트를 위로 거슬러 올라가며 찾음 존재 하지 않을 경우 에러.
    - 관련 API 주소 : https://docs.angularjs.org/guide/directive
    
    
99. example-example93
    - angurlarJs의 Expressions을 사용하는 예제이다.
    - 관련 API 주소 : https://docs.angularjs.org/guide/expression
    
    
100. example-example94
     - 만약 eval()을 사용을 하려 한다면 $eval()을 사용해야 하며 $eval()을 사용하여 관련 연산을 처리하는 것을 보여준다.
     - 관련 API 주소 : https://docs.angularjs.org/guide/expression
     
     
101. example-example95
     - angularJs에서 개발할때의 참고할 상황중 1개를 설명해놓은 샘플이다. 일반적으로 alert을 직으려면 window.alert()을 호출하지만 angular에서는 $window.alert()을 통해서 alert을 호출하라고 이야기를 한다.
     - $window는 grobal window의 레퍼런스이다.
     - 관련 API 주소 : https://docs.angularjs.org/guide/expression
     
     
102. example-example96
     - ngClick이나 ngFocus같은 directive(지시자)들은 자신이 표현되는 scope(범위)에서 $event객체를 노출합니다. 이 샘플이 이 $event객체를 사용하여 $event객체가 갖는 데이터를 보여줍니다.
     - 중요한건 이런 지시자들이 $event를 노출한다는 것입니다.
     - 관련 API 주소 : https://docs.angularjs.org/guide/expression
     
     
103. example-example97
     - filter를 사용하는 예제, filterFilter서비스를 컨트롤러에서 주입받아 사용하는 샘플이다. 필터를 사용하는 많은 방법이 있지만 여기서는 filterfilter를 컨트롤러에서 주입받아서 처리를 하도록 했다.
     - 관련 API 주소 : https://docs.angularjs.org/guide/filter
     
     
104. example-example98
     - reverse라는 필터를 생성하고 이 filter를 사용하는 샘플이다.
     - 여기서는 reverse 필터에 파라메터를 넘겨서 true일 경우 대문자 전환 까지 해놓았다.
     - 관련 API 주소 : https://docs.angularjs.org/guide/filter
     
     
105. example-example99
     - <Form>엘리먼트를 쓰는 가장 간단한 샘플을 보여준다.
     - 이전에 $copy관련해서 보았던 샘플과 동일하다.
     - 관련 API 주소 : https://docs.angularjs.org/guide/forms
     
     
106. example-example100
     - <FORM>엘리먼트안에 있는 엘리먼트들의 상태(깨끗,더럽..)에 따라서 각 엘리먼트에 Class가 자동으로 지정이된다. (ng-valid, ng-invalid, ng-pristine, ng-dirty)
     - 이렇게 자동으로 지정되는 class를 통해서 화면 표시를 다르게 해주는 샘플이다.
     - 관련 API 주소 : https://docs.angularjs.org/guide/forms
     
     
107. example-example101
     - 아주 간단한 등록 form을 <form>태그와 자동으로 지정되는 class, $dirty, $error, $invalid 등등을 사용하는 샘플이다
     - 관련 API 주소 : https://docs.angularjs.org/guide/forms
     
     
108. example-example102
     - 실시간 반영이 아닌 특정 상황에 따른 동기화에 관한 샘플이다.
     - 여기서는 ngModelOption에 {updateOn:'blur'}값을 통해서 포커스가 해당 엘리먼트에서 벗어 나는 경우 반영되도록 해놓은 샘플이다.
     - 관련 API 주소 : https://docs.angularjs.org/guide/forms
     
     
109. example-example103
     - 실시간 반영이 아닌 특정 상황에 따른 동기화에 관한 샘플이다.
     - 여기서는 ngModelOption에 {debounce: 250}값을 통해서 수정한지 0.25초 뒤에 양방향 동기화가 되도록 하는 샘플이다.
     - 관련 API 주소 : https://docs.angularjs.org/guide/forms
     
     
110. example-example104
     - 지시자를 통해 custom validation을 만든예제이다. 이 지시자에서는 ngModel의 서비스를 사용하기 위해서 ngModel을 require옵션을 통해 찾도록 했으며 $parsers, $setValidity등 관련 서비스를 통해 validation하도록 했다.
     - https://docs.angularjs.org/guide/forms
     
     
111. example-example105
     - directive(지시자)를 통해서 custom controller를 만드는 방식에 대한 샘플이다.
     - 관련 API 주소 : https://docs.angularjs.org/guide/forms
     
     
112. example-example106
     - module을 통해 개발하는 아주 기초적인 샘플이 수록되어 있다.
     - 관련 API 주소 : https://docs.angularjs.org/guide/module
     
     
113. example-example107
     - 위 샘플은 심플한 반면 큰 어플리케이션에 적용될 만큼 확장성 있지 않다. 이번 샘플은 아래와 같이 서비스 , 지시어, 필터, 초기화 및 위 모듈을 가져다 사용하는 application모듈을 각각 분리해서 사용하는 방법이 있다.
     - 관련 API 주소 : https://docs.angularjs.org/guide/module
     
     
114. example-example108
     - $scope가 Controller기준으로 잡힌다는 것을 알아야 하는 샘플.
     - $scope를 사용하여 양방향 바인딩을 하는 예제이다.
     - 관련 API 주소 : https://docs.angularjs.org/guide/scope
     
     
115. example-example109
     - $scope는 Hierarchies구조를 가지고 있다는 것을 뜻한다.
     - 자신의 $scope구역에 존재 하지 않을 경우 계층적으로 자신의 부모 부모 부모 그리고 마지막으로 $rootScope에서 관련 값을 찾는다는 것을 알려주는 샘플.
     - 관련 API 주소 : https://docs.angularjs.org/guide/scope
     
     
116. example-example110
     - $emit과 $broadcase서비스에 관해서 알수 있다.
     - $emit은 자신 $scope부터 최상위 부모 ($rootScope) 까지 등록된 모든 리스너를 호출한다.
     - $brodcase는 자신 $scope로 부터 모든 자식 $scope에게 등록된 모든 리스너를 호출한다.
     - 관련 API 주소 : https://docs.angularjs.org/guide/scope
     
     
117. example-example111
     - factory를 사용해서 Service를 만들고 그것을 controller에서 사용하는 샘플이다.
     - 간단하게 3번 클릭하면 alert box를 보여주는 예제.
     - 관련 API 주소 : https://docs.angularjs.org/guide/services
     
     
118. example-example112
     - 위 예제랑 거의 비슷하다 하지만 선언적 서비스 명시가 아닌 암묵적으로 $window서비스를 호출해서 사용하는 것을 볼수 있다. 또한 notify 서비스를 선언하지않고 사용하는 것을 보아야 한다.
     - 만약 ngStrictDi 속성을 모듈에 넣던가 하면 이와 같은 암묵적 명시로 진행시 오류가 발생한다.
     - ngStricDi는 선언적 명시를 따르지 않을 경우 오류를 발생하는 기능이기 때문이다.
     - 관련 API 주소 : https://docs.angularjs.org/guide/services
     
     
119. example-guide-concepts-1
     - angularJs 기초에 관해서 설명을 시작하는 샘플로써, 2개의 통화(돈)을 *해서 보여주는 샘플이다.
     - 매우 간단한 샘플이며 2개의 모델값을 {{}} 실행문안에서 테스트 하는 샘플
     - 관련 API 주소 : https://docs.angularjs.org/guide/concepts
     
     
120. example-guide-concepts-2
     - controller를 통해서 국가별에 따른 계산을 하도록 로직을 추가를 해놓은 샘플이다.
     - 여기선 controller를 사용해서 위 샘플보다 복잡한 기능을 처리 할 수 있음을 보여주는 예제이다.
     - 관련 API 주소 : https://docs.angularjs.org/guide/concepts
     
     
121. example-guide-concepts-21
     - 돈계산 부분과, 통화국가별 단위를 모듈로 분리하고 각각의 서비스를 만든후, 모듈과 서비스를 주입받아서 기능을 동작시키도록 한 샘플이다.
     - 관련 API 주소 : https://docs.angularjs.org/guide/concepts
     
     
122. example-guide-concepts-3
     - 위 샘플에서 통화국가별단위를 Yahoo쪽 특정 URL을 호출해서 $http로 데이터를 받고 그것을 통해 계산하고 화면에 표시하도록 함.
     - 주의깊게 볼것은 서비스를 사용할 모듈이 서비스를 가진 모듈을 주입받고, 서비스도 주입받아 사용하는 것이다.
     - 또한 서비스에서 Factory로 서비스를 만들고 return한 값을 사용하는 것을 봐야한다.
     - 관련 API 주소 : https://docs.angularjs.org/guide/concepts
     
     
123. example-input-directive
     - <input>태그에서 지원하는 지시자들을 설명 한 샘플이다.
     - ngModel, name, required, ngRequired, ngMinlength, ngMaxlength, ngPattern, ngChange에 관해서 알 수 있다.
     - 관련 API 주소 : https://docs.angularjs.org/api/ng/directive/input
     
     
124. example-month-input-directive
     - <input type=month>에서 지원하는 지시자들을 설명 한 샘플이다.
     - ngModel, name, min, max, required, ngRequired, ngChange에 관해서 알 수 있다.
     - 관련 API 주소 : https://docs.angularjs.org/api/ng/input/input%5Bmonth%5D
     
     
125. example-ng-model-cancel-update
     - $cancelUpdate()를 통해서 현재까지 진행된 기능을 초기화 하는 역할을 한다.
     - 하지만 Homepage문서에는 자세한 정리가 없다. 새로 생긴듯 한데... 차후에 알아봐야겟다.
     
     
126. example-ngChange-directive
     - ngChange지시자를 사용해서 checkbox 체크 상태가 변할때마다 관련 함수를 호출하도록 한 예제이다.
     - ngChange지시자는 이 지시자를 갖는 Element의 값이 변경될때 ngChange지시자에 선택된 동작이 실행된다.
     - 관련 API 주소 : https://docs.angularjs.org/api/ng/directive/ngChange
     
     
127. example-ngList-directive
     - ngList지시자를 통해서 지시자를 사용한 input text값에 ','로 정규식 표현을 할 수 있습니다.
     - 관련 API 주소 : https://docs.angularjs.org/api/ng/directive/ngList
     
     
128. example-NgModelController
     - 지시자를 사용해서 custom Controller를 만드는 샘플이다.
     - div값에서 keydown으로 값이 변경되거나 할때 연동되는 textarea가 바뀌는 샘플이다.
     - 관련 API 주소 : https://docs.angularjs.org/api/ng/type/ngModel.NgModelController
     
     
129. example-ngModelOptions-directive-blur
     - ngModelOption지시자를 사용하여 실시간 동기화가 아닌 특정 이벤트시 동기화가 되도록 하는 예제.
     - 여기선 blur를 사용하여 포인터가 Element범위를 벗어나는 경우 동기화가 되도록 함.
     - 관련 API 주소 : https://docs.angularjs.org/api/ng/directive/ngModelOptions
     
     
130. example-ngModelOptions-directive-debounce
     - ngModelOption지시자를 사용하여 실시간 동기화가 아닌 특정 이벤트시 동기화가 되도록 하는 예제.
     - 여기서는 debounce를 통해 특정 시간 후 동기화가 되도록 했다.
     - 관련 API 주소 : https://docs.angularjs.org/api/ng/directive/ngModelOptions
     
     
131. example-ngValue-directive
     - ngValue 지시자를 통해서 ngModel값과 연동 해서 값을 보여주는 샘플이다.
     - 관련 API 주소 : https://docs.angularjs.org/api/ng/directive/ngValue
     
     
132. example-ngView-directive
     - ngRoute, $routeProvider등 페이지 이동 관련된 서비스와 모듈을 사용하여 페이지 이동을 하도록 만든 샘플
     - 관련 API 주소 : https://docs.angularjs.org/api/ngRoute/service/$route
     
     
133. example-number-input-directive
     - <input type="number"> 태그의 지시자를 사용하는 샘플이다.
     - 관련 API 주소 : https://docs.angularjs.org/api/ng/filter/number
     
     
134. example-radio-input-directive
     - <input type="radio"> 태그의 지시자를 사용하는 샘플이다.
     - ngModel, value, name, ngChange, ngValue지시자의 사용법을 익혀라.
     - 관련 API 주소 : https://docs.angularjs.org/api/ng/input/input%5Bradio%5D
     
     
135. example-text-input-directive
     - <input type="text"> 태그의 지시자를 사용하는 샘플이다.
     - ngModel, name, required, ngRequired, ngMinlength, ngMaxlength, ngPattern, ngChange, ngTrim 지시자의 사용법을 익혀라
     - 관련 API 주소 : https://docs.angularjs.org/api/ng/input/input%5Btext%5D
     
     
136. example-time-input-directive
     - <input type="time"> 태그의 지시자를 사용하는 샘플이다.
     - 관련 API 주소 : https://docs.angularjs.org/api/ng/input/input%5Btime%5D
     
     
137. example-url-input-directive
     - <input type="url"> 태그의 지시자를 사용하는 샘플이다.
     - 관련 API 주소 : https://docs.angularjs.org/api/ng/input/input%5Burl%5D
     
     
138. example-week-input-directive
     - <input type="week"> 태그의 지시자를 사용하는 샘플이다.
     - 관련 API 주소 : https://docs.angularjs.org/api/ng/input/input%5Bweek%5D