angularjs 배우기





  •  기능
    • $scope : 스코프 변수
      • 해당 컨트롤러 안에서만 사용가능한 변수.
      • 이 변수만 잘 사용하면 변수가 섞일 일 없다.
    • 복잡한 기능을 단순한 애트리뷰트로 제어하도록 해준다.
      • 제작 소스 심플!
    • 다양항 데이터 출력 방법이 존제
      • 데이터 출력시 JS로, 애트리뷰트로, {{XX}} 구문으로 사용이 가능.
    • HTML 제어
      • 조건에 따른 
        • 보이기 안보이기.
        • 속성변경
      • 반복출력 등등
    • From 검증
      • 몇가지의 애트리뷰트를 설정해놓으면 그 것에 대한 검증이 가능함.
      • 에러메세지 부분을 따로따로 설정.
    • Data  바인딩
      • json기반으로 HTML에 출력을 쉽게할 수 있음.
      • ng-model  로 input tag <-> ng 사이에 값이 왔다리 갔다리 할 수 있음.
        •  ng-bind 로 ng ->  tag  로 값을 출력되게 할 수 있음.
    • 필터
      • {{xxx|filtername}}
        으로만 해주면 해당 필터가 작동한다.
    • 템플릿 & 라우팅 기능
      • 원페이지 어플리케이션으로 만든다면 필 수 적으로 사용.
      • 템플릿 : HTML의 뼈대를 동적으로 가져와서 사용하게 해준다.
      • 라우팅 : 경로처리에 따른 동작 제어를 가능하게 해준다.
        • http://xxx.yyy/aaa.html#/a1/b2/c3
          처럼해서 해쉬 뒤의 값을 기준으로(다른 방법으로도 할 수 있다.)
  • 힘듬점
    • ng속의 변수에서  해당 tag 로 바로 연결되는 기능이 제공되지 않는다.
      • angular.element("#cmt_"+data.bc_idx).focus();
         처럼 처리하였음.
        (다른 방법도 있는것 같지만...)

기초 사용법

  • HEAD 에서
    • <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    • <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-sanitize.js"></script>
      • 추가 기능을 사용하기 위한 것이다.
  • HTML 에서
    • <div ng-app="bbsComment" class="bbs_c"> : ng어플리케이션을 지정. 이 하위로부터 ng가 동작한다.
    • <div class="panel panel-default bbs-mode-comment"  ng-controller="CommentCtrl as commentCtrl" ng-init="commentCtrl.init('http://www.mins01.com/mh/bbs_comment/test/44')">
      • ng-controller="CommentCtrl" 로만 해도 된다. ng어플리케이션 속 ng컨트롤러를 지정.
      • ng-init :  초기화 동작에 대한 것. 옵션이다.(사용시 ng-controller="CommentCtrl as commentCtrl" 처럼 해줘야하더라)
        • 해당 컨트롤러 동작함수 안에서는
          this.init = function( comment_url) {
          $scope.comment_url = comment_url;
          $scope.initData();
          }
          처럼 해주면 된다.
  • 스크립트에서
    • var bbsComment = angular.module('bbsComment', ['ngSanitize']);
      • ng의 어클리케이션 동작
      • ['ngSanitize'] 는 같이 사용할 모듈명을 적어준다.(옵션값으로 기본은 [] 만 적어준다.)
    • 필터 정의 : 지원 필터중 원하는게 없으면 만들어야지.
      • bbsComment.filter('nl2br', ['$sanitize', function($sanitize) { var tag = (/xhtml/i).test(document.doctype) ? '<br />' : '<br>'; return function(msg) { msg = (msg + '').replace(/(\r\n|\n\r|\r|\n|&#10;&#13;|&#13;&#10;|&#10;|&#13;)/g, tag + '$1'); return $sanitize(msg); }; }]);
      • bbsComment 라는 ng속에서 'nl2br' 라는 이름의 필터를 정의한다. 상세 사용법은.. 소스 보고 분석해봐라.
      • $sanitize 는 html escape 출력때문에 사용되었다.
        • 사용시 angular-sanitize.js 필요. 그리고 ngSanitize 사용을 표시해 줘야한다.
      • 사용법
        • {{ xxx | nl2br }}
        • ng-bind="xxx | nl2br"
        • ng-bind-html="xxx | nl2br"
    • 컨트롤러 정의
      • bbsComment.controller('CommentCtrl', ['$scope', '$http','$httpParamSerializer','$filter', function ($scope,$http,$httpParamSerializer,$filter) {....});
        • ng-controller="CommentCtrl"를 컨트롤러로 사용하도록 설정.
        • ['$scope', '$http','$httpParamSerializer','$filter',동작함수]
          • $scope : 스코프 변수 관리용.
          • 그외의 것은 ng의 서비스 (메뉴얼 뒤져봐라.)
          • 동작함수가 가장 맨 마지막에 온다.
        • function ($scope,$http,$httpParamSerializer,$filter) {....}
          • 동작함수의 아규멘트로 앞에 선언한 서비스들을 다 적어준다.
          • 그리고 그 안에서는 지지고 볶으면 된다.



 댓글

댓글 목록 (0개)