앵귤러 JS

2 minute read


  •  기능
  • $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|&#10;&#13;|&#13;&#10;|&#10;|&#13;)/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(‘!’); //어떤 경로 기반으로 할지 설정. })


🔗original-link

Updated: