[angularJS] 프로 AngularJS (애덤 프리먼 저) 책 공부 후 정리

개인적으로 복습하기 위해 정리한 내용이라 정리가 깔끔하지는 않습니다. 혹시 같은 책 공부하시는 분들에게 도움이 될까 해서 포스팅으로 올립니다^^; (그나저나 이제 angularJS 2.0 이 나와서 이 책은 더 공부할 이유가 없네요;;)

Angular JS 복습

[1장] 준비하기

- MVC 디자인 패턴 중심

- 개발환경설정 

 브라우져 : 크롬 / 편집기 : 서브라임 텍스트3 / js 실행툴 : Node.js

 웹서버 : connect 모듈을 npm으로 설치 후 server.js 를 만들어서 node.js 로 실행

 테스트 : npm 으로 karma, jasmin 설치

 css 프래임웍 : bootstrap

 js 프레임웍 : angular.js

- 프로젝트 생성

 angular.js 다운로드 (1.5)

 angular.js 추가 파일 다운로드 

  - angular-touch.js 

  - angular-animate.js

  - angular-mock.js

  - angular-route.js

  - angular-sanitize.js

 부트스트랩 다운로드 

 서버사이드 개발 (Restful 웹서비스 제공) => Deployd 설치 (Node.js, MongoDB 기반)

[2장] 첫번째 angularJS 앱

- Module 객체 : 어트리뷰트 : np-app

   / js : angular.module("todoApp", []); 2번째 인자는 의존성 인자로 없어도 빈배열 선언필

- 데이터 모델 생성 : var model = {}

- 컨트롤러 생성 : Module 객체에서 controller 메서드 호출 / ng-controller 어트리뷰트

  todoApp.controller("ToDoCtrl", function ($scope) {

     $scope.todo = model;

  }

   

  * $가 있으면 이는 내장 서비스를 의미, $scope는 뷰에게 데이터 및 기능을 노출하는데 사용

- 뷰 생성 : 데이터 바인딩 어노테이션 사용 : {{todo.user}} => * 단방향 바인딩

  * 양방향 바인딩

   <td><input type="checkbox" ng-model="item.done"></td>

   

  * 디렉티브 : 콘텐츠 처리 방법 표시

    <tr ng-repeat"item in todo.items">

       <td>{{item.action}}</td><td>{{item.done}}</td>

    </tr>

    - ng-repeat, ng-hide, ng-class, ng-click

  * angular 유틸리티 메서드 : ex. angular.forEach()

   angular.forEach($scope.todo.items, function (item) {

      if (!item.done) {count++};

   });

  

   * 필터 (filter:{done : false}) / 정렬 (orderBy:'action') => ng-repeat 디렉티브에서 사용됨

   * 커스텀 필터

     todoApp.filter("checkItems", function() {

        return function () {} => 필터링 작업을 할 function 리턴

     });

     

 

   * run 메서드 (모듈의 메서드) : Angular.js 가 초기 설정 마치는 시점에 한번만 실행할 함수를 인자로 함

   todoApp.run(function ($http) {

      $http.get("todo.json").success(function (data) {

          model.items = data

      }

   }  

    $http 인자 : Angular에 Ajax 호출하는 서비스 객체를 사용한다고 알림 

    => 의존성 주입 (필요기능을 Angular에게 알려주는 방식)

  

    $http.get() 을 하면 프로미스 객체가 리턴됨. 프로미스 객체의 success 메서드를 호출하면 json 데이터를

    파싱하여 자바스크립트 객체로 만들고 이를 data 인자로 넘겨준다.

[3장] AngularJS 의 이해

 

  - 웹 애플리케이션의 종류 : 라운드 트립 vs 단일 페이지 (현 시대는 라운드 트립 -> 단일페이지 추세)

  - 라운드 트립 

    HTML 를 새로 요청 => 중복된 내용이 계속 보내짐 => 많은 네트웍 자원 사용

    각 페이지 상태를 관리하기 위해 (session 관리 등) 대규모 서버사이드 인프라스트럭쳐 필요

  - 단일페이지

    초기 HTML 문서는 전송

    이 후 사용자 동작이 있으면 ajax 요청을 통해 일부 HTML 이나 데이터만 전송하여 기존 HTML 에 삽입/대체

    => 초기 로딩한 HTML 을 다시 로드하지 않는다.

   

  - 현재는 라운드 트립을 쓰면서 전체 페이지 변경횟수를 줄이는 방식으로 개선되고 있음.

    하지만 추세는 단일페이지 추세

  - angular 는 단일페이지에 유리 / 라운드트립인 경우 jQuery 라는 훌륭한 기술이 있다.

  - RESTful 웹서비스

    이견이 많다. URL로 작업하려는 데이터 객체를 식별하고, HTTP 4방식으로 CRUD 를 표현한다.

[4장] HTML 및 부트스트랩 CSS 기초

  - bootstap 은 기본적으로 12 컬럼 방식

[5장] 자바스크립트 기초

  - undefined 와 null 의 차이 : undefined 는 아예 define이 안된 상태, null 은 없는 값이라는 것이 define 된 상태

  - 프로미스 메서드 : error(callback), success(callback), then(success, err) 

[6장] 스포츠 상점 : 실전 애플리케이션

- deployd 서버 실행

 sportssotre 폴더에서 app.dpd 클릭 => 대쉬보드 나옴

- 컨트롤러는 상위 컨트롤러로부터 데이터 및 로직을 상속 가능 (13장 참고)

[7장] 스포츠 상점 : 내비게이션 및 결제

- 이 장에서는 실제 상품 데이터를 ajax 요청을 통해 가져온다.

- ng-show / ng-hide 디렉티브

- ng-include => 부분 html 사용

- module.factory() => 커스텀 서비스 생성 (모든 컴퍼넌트에서 접근가능한 싱글톤 객체)

- module.directive() => 커스텀 디렉티브 생성