AngularJS #

Find similar titles

총 8회 업데이트 됨.

Edit

최초 작성자
SunsooHwang 2014-08-28 11:16:30
최근 업데이트
syp 2020-09-24 01:05:05

Structured data

Category: Programming

AngularJS
Incoming Links
1. Related Data Sciences (DataScience 0)
2. Related Articles (Article 1)
Suggested Pages

AngularJS #

AngularJS 란? #

자바스크립트(JavaScript)로 만든 client 측 MVC/MVVM 프레임워크

기본개념 #

소개동영상

MVC #

모델 : 보통 JSON으로 표현되는 애플리케이션의 특정한 데이터 구조를 말한다.
뷰 : TML 혹은 렌더링된 결과를 말한다. MVC 프레임워크를 사용한다면 뷰를 갱신할 모델 데이터를 내려받은 뒤 HTML에서 해당 데이터를 보여줄 것이다.
컨트롤러는 서버에서 직접 뷰로 접근하는 일종의 중간 통로로써 필요할 때마다 서버와 클라이언트 통신으로 데이터를 변경한다.

참고사이트 및 자료 #

공식사이트 : https://www.angularjs.org/
소개글 : http://www.nextree.co.kr/p3241/
[번역] 하루 만에 끝내는 AngularJS : http://soomong.net/blog/2014/01/20/translation-ultimate-guide-to-learning-angularjs-in-one-day/
[AngularJS] 배우는 방법 & 기본 개념 잡기 : http://mobicon.tistory.com/281

표현식 #

예제 {{ 1+2}} {{ 3*10| currency }} {{ user.name }}
특징
Scope 객체 기준으로 속성들을 검사한다.
(window로부터가 아니라…)
Null에러를 무시한다.
({{a.b.c}}vs{{((a||{}).b||{}).c}})
조건문은 올 수 없다.
필터들과 함께 쓰인다.
({{3*10|currency}})

라우팅 #

SPA 지향 프레임워크로서 라우팅 기능은 필수적인 요소이다.
기본적으로 제공하는 모듈은 ngRoute 이다.

ngRoute 사용예시

<!-- ngRoute 모듈을 설치한다 -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script type="text/javascript">
    var app = angular.module("app", ["ngRoute"]); // 모듈 임포트
    app.config(function($routeProvider) {
        // ngRoute 모듈이 제공하는 $routeProvider를 통해 라우팅 설정이 가능하다.
        $routeProvider
            .when("/", {
                templateUrl: "main.html"
            })
            .when("/hello", {
                templateUrl: "hello.html"
            });
    });
</script>
<!-- 예제 템플릿 -->
<script type="text/ng-template" id="main.html">
    <div>MAIN</div>
</script>
<script type="text/ng-template" id="hello.html">
    <div>Hello world!</div>
</script>
<!-- 네비게이터 -->
<a href="#!/">main</a>
<a href="#!/hello">hello</a>
<!-- ng-view 디렉티브를 사용하여 화면 렌더링 위치를 지정한다. -->
<div ng-view></div>

예제 #

반복적인 데이터 표현을 위한 템플릿 #

ng-repeat

<scripttype="text/javascript">
    functionsampleCtrl($scope){
        $scope.customerList=[
                            {id:'id1',name:'가인',age:25},
                            {id:'id2',name:'두나',age:28},
                            {id:'id3',name:'연아',age:22}
                            ];
    }
</script>
<divng-controller="sampleCtrl">
고객 목록
    <ul>
    <ling-repeat="customerincustomerListtrackbycustomer.id">
    [{{$index+1}}]고객 이름 :{{customer.name}},고객 나이 :{{customer.age}}
    </li>
    </ul>
</div>

조건적인 데이터 표현을 위한 템플릿 #

ng-switch
ng-if
ng-show

ng-hide

<inputtype="radio"ng-model="color"value="red"> 빨간색 <br>
<inputtype="radio"ng-model="color"value="green">녹색 <br>
<divng-switch="color">
    <divng-switch-when="red"class="boxred"></div>
    <divng-switch-when="green"class="boxgreen"></div>
    <divng-switch-default=""class="boxblack"></div> 
</div>
<div>
    약관에 동의:<inputtype="checkbox"ng-model="checked"ng-init="checked=false">
    <br>
    동의하면 다음으로 진행됩니다.
    <buttonng-if="checked">다음</button>
</div>

폼과 유효성 검사를 위한 템플릿 #

ng-model
name
ng-requried
ng-maxlength
ng-minlength
ngpattern

ng-change

<formname="sampleForm"ng-init="name='철수'">
    이름 : <inputtype="text"name="name"ng-model="name"ng-maxlength="3"ng-required="true"
    <spanclass="error"ng-show="sampleForm.name.$error.required">필수입력</span>
    <br>
    핸드폰 번호:<inputtype="text"name="tel"ng-model="tel"ng-pattern="/^\d{3}-\d{3,4}-\d{4}$/"
    <spanclass="error"ng-show="sampleForm.tel.$error.pattern">
        000-0000-0000
    </span>
</form>

이벤트 처리를 위한 템플릿 #

ng-click
ng-dblclick
ng-keydown
ng-mousedown
ng-change

ngblur

<scripttype="text/javascript">
    functionmainCtrl($scope){
        $scope.message="";
        $scope.eventCnt=0;
        $scope.handleEvt=function(message){
            $scope.message=message;
            $scope.eventCnt++;
        }
    }
</script>
<divng-controller="mainCtrl">
    <divclass="box"ng-click="handleEvt('박스 클릭됬다.')">click</div>
    <divclass="box"ng-mousedown="handleEvt('박스 mousedown이벤트 발생.')">mousedown</div>
    <divclass="box"ng-mouseenter="handleEvt('박스 mouseenter이벤트 발생.')">mouseenter</div>
    <divclass="box"ng-mousemove="handleEvt('박스 mouseenter이벤트 발생.')">mousemove</div>
        change:<inputtype="text"ng-model="inputText"ng-change="handleEvt('입력 박스의 값이 변경되었다.')">
        keydown:<inputtype="text"ng-model="inputText2"ng-keydown="handleEvt($event.keyCode+'키코드 눌러짐')">
    <p>{{message}}{{eventCnt}}</p>
</div>

jQuery 예제 와 AngularJS 예제의 비교 #

실제를 코딩해야 하는 양이 줄어들어 더 명확하고 에러를 줄일 수 있으며 더 빠른 개발이 가능하다.

jQuery 예제 #

<inputid="toggleShowHide"type="checkbox">
<divid="specialParagraph">
위의 체크박스를 클릭하면 보시는 내용은 숨겨질 것입니다.
</div>
</script>
$(function(){
    function toggle(){
        varisChecked=$('#toggleShowHide').is(':checked');
        varspecialParagraph=$('#specialParagraph');
        if(!isChecked){specialParagraph.show();}
        else{specialParagraph.hide(); }
    }
    $('#toggleShowHide').change(function(){
        toggle();
    });
        toggle();
});

AngularJS 예제 #

<inputng-model="showSpecial"type="checkbox">
<divng-hide="showSpecial">
위의 체크박스를 클릭하면 보시는 내용은 숨겨질 것입니다.
</div>

AngularJS #

Structured data

Table of Contents

AngularJS #

AngularJS 란? #

기본개념 #

MVC #

참고사이트 및 자료 #

표현식 #

라우팅 #

예제 #

반복적인 데이터 표현을 위한 템플릿 #

조건적인 데이터 표현을 위한 템플릿 #

폼과 유효성 검사를 위한 템플릿 #

이벤트 처리를 위한 템플릿 #

jQuery 예제 와 AngularJS 예제의 비교 #

jQuery 예제 #

AngularJS 예제 #

Incoming Links #

Related Data Sciences (DataScience 0) #

Related Articles (Article 1) #

Suggested Pages #