앵귤러 JS
- https://angularjs.org/
- 공식사이트
- 버전이 꽤 자주 바뀌는 것 같다. 주의하자.
- MVC 모델을 사용한 JS플랫폼.
- https://code.angularjs.org/1.4.6/docs/api
- 레퍼런스
- https://code.angularjs.org/1.4.6/docs/api/ng/service
- 서비스 부분이다.
-
$http : ajax통신해주는 서비스.
- http://soomong.net/blog/2014/01/20/translation-ultimate-guide-to-learning-angularjs-in-one-day/
- 하루만에 어쩌고 저쩌고
-
번역본. 즉, 한글. 깔끔하게 잘 되어있다.
- http://www.mins01.com/mh/bbs-test/read/44?page=1&tq=&q=
- 사용해본 곳
- 리플 적는 부분만 사용. 회원 가입 후 사용할 수 있다.
- 기능
- $scope : 스코프 변수
- 해당 컨트롤러 안에서만 사용가능한 변수.
-
이 변수만 잘 사용하면 변수가 섞일 일 없다.
- 복잡한 기능을 단순한 애트리뷰트로 제어하도록 해준다.
-
제작 소스 심플!
- 다양항 데이터 출력 방법이 존제
-
데이터 출력시 JS로, 애트리뷰트로, 구문으로 사용이 가능.
- HTML 제어
- 조건에 따른
- 보이기 안보이기.
-
속성변경
-
반복출력 등등
- From 검증
- 몇가지의 애트리뷰트를 설정해놓으면 그 것에 대한 검증이 가능함.
-
에러메세지 부분을 따로따로 설정.
- Data 바인딩
- json기반으로 HTML에 출력을 쉽게할 수 있음.
- ng-model 로 input tag <-> ng 사이에 값이 왔다리 갔다리 할 수 있음.
-
ng-bind 로 ng -> tag 로 값을 출력되게 할 수 있음.
- 필터
-
으로만 해주면 해당 필터가 작동한다.
- 템플릿 & 라우팅 기능
- 원페이지 어플리케이션으로 만든다면 필 수 적으로 사용.
- 템플릿 : 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| | | | )/g, tag + ‘$1’); return $sanitize(msg); }; }]);
- bbsComment 라는 ng속에서 ‘nl2br’ 라는 이름의 필터를 정의한다. 상세 사용법은.. 소스 보고 분석해봐라.
- $sanitize 는 html escape 출력때문에 사용되었다.
-
사용시 angular-sanitize.js 필요. 그리고 ngSanitize 사용을 표시해 줘야한다.
- 사용법
-
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) {….}
- 동작함수의 아규멘트로 앞에 선언한 서비스들을 다 적어준다.
- 그리고 그 안에서는 지지고 볶으면 된다.
경로 기반으로 작업할 때 (hash 부분이 바뀐다.)
$location 모듈이 필요하다.
$scope.go_url = function(i_args){
var args = $location.search();
angular.extend(args, i_args);
var current_url = $location.url();
$location.search(args);
//$location.search(args).replace();
var new_url = $location.url();
//console.log($location.search());
//console.log(current_url,new_url);
if(current_url==new_url){ //url변화가 없으면 동작 않하므로 수동으로 다시 부른다.
$scope.action();
}
}
$scope.action = function(event){
//console.log("route changed in parent");
var args = $location.search();
if(!args.mode){ args.mode = 'list'}
$scope.mode = args.mode;
if(args.tq){
$scope.form_v_search.tq = args.tq;
}
if(args.q){
$scope.form_v_search.q = args.q;
}
switch(args.mode){
case 'insert':
case 'update':
$scope.select_m_row($scope.get_m_row_by_m_idx(args.m_idx),args.mode);
$scope.call_select_by_m_idx(args.m_idx);
break;
case 'list':
default:
$scope.call_lists(args);
break;
}
}
$scope.$on('$locationChangeStart', function(event) { $scope.action(event)
});
memmngApp.config(function($locationProvider) { $locationProvider.html5Mode(false).hashPrefix(‘!’); //어떤 경로 기반으로 할지 설정. })