AngularJS 시작하기: 기초적인 사용법

최종수정일: 2015.04.28

Angular App 선언

                <html>
                    <body ng-app="myApp">
                        이제 이곳은 Angular가 지배합니다.
                    </body>
                </html>
            
                var angularApp = angular.module("myApp", []);

Controller 생성

AngularJS에서는 하나 이상의 Controller가 DOM을 조작합니다.
일단 위에서 만든 angularApp에 새로운 Controller를 추가합니다. 

            angularApp.controller("basicController", function($scope){
              //아직 아무것도 하지 않습니다.
            });

그리고 담당할 엘레멘트에 Controller를 선언합니다.

            <div ng-controller="basicController">
            </div>

ng-controller, ng-app 과 같은 것을 Directive라고 합니다.
Directive 는 ng-app, ng-controller, ng-init 등 기본적으로 제공되는 Directive가 있고 추가적으로 만들수도 있습니다.

ng-model과 바인딩

                <input type="text" ng-model="username" placeholder="enter your name">
                <hr>
                <h2>Hello {{username}}!
                <h3>My name is {{username}}!

Hello {{username}}!

My name is {{username}}!

ng-repeat


                <ul ng-controller="repeatController">
                   <li ng-repeat="job in jobs">{{job.name}}
                       <div>{{ job.duty }}</div>
                   </li>
                </ul>
                <script>
                    angular.module('myApp', []).controller('repeatController', function($scope){
                        $scope.jobs = [
                            { name : '경찰관' , duty: '시민을 보호합니다.'},
                            { name : '소방관' , duty: '화재를 진압합니다.'},
                            { name : '학생', duty: '매점에 갑니다.'}
                        ];
                    });
                </script>
  • {{job.name}}
    " {{ job.duty }}"

ng-if

이런 데이터가 있습니다.

$scope.users = [ { name : 'Brown', gender: 'Men'}, { name : 'Lisa', gender: 'Women'}, { name : 'John', gender: 'Men'} ];

ng-if 를 활용해 성별에 따라 다르게 출력하도록 합니다.

<ul ng-controller="ifController"> <li ng-repeat="user in users"> <span>{{user.name}}</span> <div ng-if="user.gender == 'Men'"> <div>남자</div> </div> <div ng-if="user.gender == 'Women'"> <div>여자</div> </div> </li> </ul>
  • {{user.name}}
    남자
    여자