티스토리 뷰

Web Development/AngluarJS

angularjs 정리 ( 내맘대로) 1부

dev ms 2016. 5. 28. 10:39
반응형

1. MVVM ((Model View ViewModel)이란 무엇인가?


 기존에 사이트를 개발 할때는 MVC (Model View Controller) 로 되어 있었지만,Angularjs는 그것과는 조금 다른 방식이다.


기존 html 과 javascript, jQuery들을 이용했던 사람들이라면 이런 차이라고 생각하면 좋다.
javascript나 jQuery는 동적인 화면을 구성하기 위해서는 html 내에 원하는 element에 selector들을

이용해서 접근한 뒤 javascript 내에서 구성하여 html을 꾸며서 화면을 작성하였다.


하지만 angularjs에서는 이런 형식이 아니다. 위에서 설명했듯 ViewModel을 이용하여, 해당 위치에 적용된 데이터에 따라서 동적으로 화면이 변한다.


따라서 View에 해당되는 Model을 선언하면, Model의 상태나 값에 따라서 View가 동적으로 변한다.


2. AngularJS module


AngularJS에서 module은 응용프로그램을 정의한다.
Angularjs 에서는 module과 controller, directive, filter등을 추가 할 수 있다.


AngularJS 에서 스크립트 위치는 header 쪽에 선언하는 것이 좋다. 각 라이브러리들을 로딩하는데 기존 javascript 보단 오래 걸릴 수 있기 때문이다.


Directive

지시자(Directive) 라고 하고, angular에서 만들어 놓은 기능 및 화면을 나눠놓은 단위로 이해하면 좋다.


예제.

<!DOCTYPE html>
<html lang="utf-8">
<head>
<meta charset="UTF-8">
<script
    src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
    var app = angular.module("myApp", []);
    app.controller('myCtrl', function($scope) {
        // myCtrl 제어할 위치, 
        // callback 에 넘어오는 $scope는 해당 영역의 ViewModel이나 element로 접근할 수 있는 접근자(selecor).

        $scope.name = "jms";
    })

    app
            .directive(
                    'myDirective',
                    function() {
                        return {
                            template : '지시자(Directive) 라고 하고, angular에서만들어 놓은 기능 및 화면을 나눠놓은 단위로 이해하면 좋다.'
                        }
                    })

    app.directive('myDirectives', function() {
        return {
            restirct : 'E', // E = Element 형태, A 는 Attribute 형태, C는 클래스에 의한. M은 코멘트
            scope : {
                name : '=' // = 는 데이터 형태 그대로, @는 string 형태로, &는 펑션을 파라미터로 넘길때.
                ,
                directiveEditor : '@' // 전달되는 Attribute나 directive 이름의 대문자는 - 으로 연결 되는 부분이 그렇게 된다.
            },
            templateUrl : '/angular-example/directives.html', // templateUrl과, template 등으로 나눈다. template는 직접 DOM을 작성하면 된다.
            controller : function($scope) { // directive로 불러온 화면에서 사용될 로직들을 정의해서 사용할 수 있다.

            }
        }
    })

    app.directive('mDirective', function() {
        return {
            restrict : 'M',
            link : function() {
                alert('M is working..');
            }
        }
    })
</script>
</head>
<body ng-app="myApp">

    <p>
        AngularJS에서 module은 응용프로그램을 정의한다.<br /> Angularjs 에서는 module과
        controller, directive, filter등을 추가 할 수 있다.<br />
    </p>

    <p>
        AngularJS 에서 스크립트 위치는 header 쪽에 선언하는 것이 좋다. 각 라이브러리들을 로딩하는데 기존
        javascript 보단 오래 걸릴 수 있기 때문이다.<br />
    </p>
    <div>

        <p my-directive></p>

        <my-directives name='mydirectives' directive-editor="ms"></my-directives>

        <!-- directive:mDirective -->
    </div>

</body>
</html>


directives.html


<div>
    난 element 형태의 directive고 내 이름은 {{name}} 입니다. <br />
    작성자는 {{directiveEditor}}
</div>



3. ng-model 과 expression

ng-app attribute는 이 page가 angularjs를 사용한다고 선언하는 것과 같다. 
선언 위치는 대게 body tag나 html 태그 옆에 이름을 붙여서 선언한다. 


예제.

<!DOCTYPE html>
<html lang="utf-8">
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>


<div ng-app="">
    <p>Name : <input type="text" ng-model="name"></p>
    <h1>Hello {{name}}</h1>
    
    <form name="form">
        <input type="email" name="email" ng-model="email" >
        <span ng-show="form.email.$error.email">이메일 주소를 정확하게 입력해주세요.</span>
        
        {{form.email.$valid}}
        {{form.email.$dirty}}
        {{form.email.$touched}}
    </form>
</div>

</body>
</html>



앞서 설명하였듯, MVVM으로 인하여 화면이 구성되고 꾸며지기 때문에, 양방향성을 가지게 된다. 
input 내에 ng-model로 선언한 name은 ViewModel 이름을 지어준 것이다. H1 태그 안에 {{ name }}
그 ViewModel을 가리키고 있기 때문에 Input안에 변화는 값이 동적으로 변하게 된다.
이것을 양방향 바인딩 이라고 이야기한다. 이해가 안된다면, 예제와 같이 동작하도록 jQuery나 javascript로 구현해보면 알 수 있다.
아주 재미있게 ^^ 


앵귤러JS에서 Data가 MVVM에서 ViewModel에 대한 선언을 하는 방법은 다음과 같다. 
element attribute에 선언할때는 ng-* 를 이용하여 작성하고. 
element 밖에서는 {{ 변수명 }} 을 이용해서 작성한다. 


기본적으로 제공해주는 Validation도 존재한다. 아래 링크를 참조하면 된다.

https://scotch.io/tutorials/angularjs-form-validation#demo


4. ng-repeat


반복문은 ng-repeat으로 선언하고 사용한다. 
ng-init은 model을 선언하거나 할때 사용된다.


<!DOCTYPE html>
<html lang="utf-8">
<head>
<meta charset="UTF-8">
<script
    src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="">


    <div ng-app="" ng-init="names=['Jani','Hege','Kai']">
        <ul>
            <li ng-repeat="x in names">{{ x }}</li>
        </ul>
    </div>

    <div 
        ng-init="names=[
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}]">

        <ul>
            <li ng-repeat="x    in names">{{ x.name + ', ' + x.country }}</li>
        </ul>
</body>
</html>


html 복제. 앞서 설명한 mvvn으로 동적 ui를 구성한다는 것이 이런 이유임.



5. ng-controller

controller 는 해당 영역의 ViewModel에 접근 할 수 있으며, 추가적으로 펑션도 선언할 수 있다. 
큰 Application일 수록 js로 각 컨트롤러를 분리해서 관리할 수 있다.


<!DOCTYPE html>
<html lang="utf-8">
<head>
<meta charset="UTF-8">
<script
    src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
    var app = angular.module('myApp', []);
    app.controller('myController', function($scope) {

        $scope.hi = function() {
            alert('hi~');
        }

        $scope.name = "홍길동";
        $scope.age = "18";
    })
</script>
</head>
<body ng-app="myApp">

    <div ng-controller="myController">
        <table>
            <tr>
                <td><input type="text" ng-model="name" /></td>
            </tr>
            <tr>
                <td><input type="text" ng-model="age" /></td>
            </tr>
        </table>

        <button ng-click="hi()">클릭</button>

    </div>

</body>
</html>



6. ng-scope

'$scope' 란 무엇인가.

  • HTML
  • 영역내에 존재하는 Model (ViewModel = Data)
  • 영역내에 펑션들이다.

    $rootScope 라고 컨트롤러에서 접근하는 범위보다 상위범위를 접근할 수 있는 접근자가 있다.
    html 구조를 본다면 html 밑에 여러 element들의 구조? 들과 비슷하다고 보면된다.
    jquery에서는 .parent() 객체를 타다보면 상위로 넘어가는 구조를 확인 할 수 있다.

    반응형
    저작자표시

    'Web Development > AngluarJS' 카테고리의 다른 글

    Angular Material 을 이용한 개발  (3) 2016.04.22