Skip to content

AngularJS #
Find similar titles

Structured data

Category
Programming

AngularJS #

AngularJS 란? #

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

기본개념 #

  • 소개동영상

MVC #

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

참고사이트 및 자료 #

표현식 #

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

예제 #

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

  • 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>

Incoming Links #

Related Data Sciences #

Related Articles #

Suggested Pages #

0.0.1_20140628_0