ProAngularJS Ch13. 컨트롤러 및 스코프

※ 실행결과: http://study.jeju.onl/controllers.html

이장에서는 컨트롤러와 스코프에 대해 설명한다.
주요 내용은 다음과 같다.

  • 명시적 스코프 업데이트
    : 다른 프레임워크(jQuery)와의 연동을 위해 변동사항을 직접 주입
    : $apply, $watch, $watchCollection
  • 스코프리스 컨트롤러 활용
    : 스코프를 전혀 사용하지 않고 데이터 및 동작을 제공
    : ng-controller=”simpleCtrl as ctrl”
  • 컨트롤러 상속 활용
    : 코드 중복을 줄인다
    : 상속받은 데이터 및 동작의 오버라이드
  • 스코프간의 통신 : 루트 스코프
    : $broadcast, $emit, $on
  • 컨트롤러의 재사용
    : 한 페이지 내에 독자적인 기능을 수행하는 여러개의 뷰를 두고
    개별 기능별로 컨트롤러를 지정하거나 기존 컨트롤러를 재사용

이에 대한 예제 결과이다.

jQuery와 연동하여 버튼 제어와, 클릭수 증가를 표시
ProAngularJS-ch13-Controller3

부모로부터 자식 둘의 뷰를 생성하고, 데이터와 기능의 상속을 테스트
ProAngularJS-ch13-Controller2

서로 다른 뷰/콘트롤러 간에 통신을 테스트 (데이터 또는 동작 공유)ProAngularJS-ch13-Controller1

이에 대한 코드이다.

<!DOCTYPE html>
<html ng-app="exampleApp">
<head>
  <title>Controllers - ProAngularJS</title>
  <link href="/node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
  <link href="/node_modules/bootstrap/dist/css/bootstrap-theme.css" rel="stylesheet" />

  /node_modules/angular/angular.js
  /node_modules/angular/angular-route.js
  http://controllers.js

  https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
  https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  
    $(document).ready( function() {
      $('#jqui button').button().click( function(e) {
        angular.element(angularRegion).scope().$apply('handleClick()');
        //alert("jQuery UI Button was clicked");
      });
    });
  

  

    //angular.module("exampleApp", [])
    app
      .service( "ZipCodes", function( $rootScope ){
        return {
          setZipCode: function(type, zip) {
            this[type] = zip;
            $rootScope.$broadcast("zipCodeUpdated", {
              type: type, zipCode: zip
            });
          }
        };
      })
      .controller( "simpleCtrl", function( $scope, ZipCodes ){
        /*
        $scope.cities = ["London", "New York", "Paris"];
        $scope.city = "London";
        $scope.getCountry = function( city ){
          switch( city ){
            case "London":
              return "UK";
            case "New York":
              return "USA";
          }
        };
        */

        $scope.$on( "zipCodeUpdated", function( event, args ){
          $scope[ args.type ] = args.zipCode;
        });

        //$scope.addresses = {};
        $scope.setAddress = function( type, zip ){
          console.log( "Type: "+type+" "+zip );
          ZipCodes.setZipCode( type, zip );
          /*
          $rootScope.$broadcast( "zipCodeUpdated", {
            type: type, zipCode: zip
          });
          */
          //$scope.addresses[type] = zip;
        };
        $scope.copyAddress = function(){
          $scope.zip = $scope.billingZip;
          //$scope.shippingZip = $scope.billingZip;
        };

        $scope.buttonEnabled = true;
        $scope.clickCounter = 0;

        $scope.handleClick = function() {
          $scope.clickCounter++;
        };
        $scope.$watch('buttonEnabled', function(newValue) {
          $('#jqui button').button({
            disabled: !newValue
          });
        });

      });

  
  <style type="text/css">
  </style>
</head>
<body ng-controller="topLevelCtrl">
  <!--
  
Select a City:

The city is: {{ city }}

The country is: {{ getCountry(city) || "Unknown" }}

</div> --> <hr /> <!-- ===================================== -->

Billing Zip Code

<button class="btn btn-primary" ng-click="setAddress( 'billingZip', billingZip )"> Save Billing </button> </div>

Shipping Zip Code

<button class="btn btn-primary" ng-click="copyAddress()"> Use Billing </button> <button class="btn btn-primary" ng-click="setAddress( 'shippingZip', zip )"> Save Shipping </button> </div> <hr /> <!-- ===================================== -->

Top Level Controller

Reverse Case
</div>

First Child Controller

Reverse Case
</div>

Second Child Controller

Reverse Case Shift
</div> <hr /> <!-- ===================================== -->

AngularJS

Enable Button
Click counter: {{ clickCounter }} </div>

jQuery UI

Click Me!
</body> </html>

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중

%d 블로거가 이것을 좋아합니다: