AngularJS의 Controller as 구문

Rana Hasnain Khan 2024년2월15일

Angular Angular Controller

예제와 함께 AngularJS의 controller as 구문을 소개합니다.

AngularJS의 `Controller as` 구문

AngularJS의 1.1.5 릴리스에서 Controller as 구문이 도입되었습니다. AngularJS에 대해 생각하는 방식에 상당한 영향을 미칩니다.

이것은 실험적 기능으로 추가되었습니다. 이것은 필수 기능이며 컨트롤러 기능을 더 빠르고 쉽게 사용할 수 있도록 도와줍니다.

controller as 구문을 사용하여 컨트롤러가 컨트롤러에 직접 액세스하도록 호출할 수 있습니다. 예제를 통해 이름을 인쇄하는 간단한 기능으로 새 컨트롤러를 만들어 보겠습니다.

AngularJS에서 새 프로젝트를 만들고 controller as 구문의 예를 살펴보겠습니다. 먼저 script 태그를 사용하여 AngularJS 라이브러리를 추가합니다.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>

이제 ng-app을 사용하여 AngularJS 애플리케이션을 정의합니다.

<body ng-app="">
   ...
</body>

script.js 파일을 만들고 컨트롤러를 만듭니다. 이 컨트롤러에는 아래와 같이 콘솔에 로그인하는 getName 기능이 있습니다.

import angular from 'angular';

angular.module('app', []).controller('nameController', function() {
  this.getName = function(){
    console.log("Activated!")
  }
});

index.html에 애플리케이션의 프론트엔드를 생성합니다. 아래와 같이 사용자가 클릭할 때마다 getName 함수를 호출하는 버튼을 생성합니다.

<!DOCTYPE html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css" />
    <script src="lib/script.js"></script>
  </head>

  <body ng-app="app" ng-cloak>
    <div ng-controller="nameController as name">
      <input type="button" value="Get Name" ng-click="name.getName()">
    </div>
  </body>
</html>

출력:

angularjs의 구문 예제로서의 컨트롤러

콘솔 출력:

angularjs의 구문으로 컨트롤러의 콘솔 결과

위의 예는 controller as 구문을 보여주므로 쉽게 함수를 호출하고 컨트롤러 이름을 쉽게 입력할 수 있는 키워드나 짧은 단어로 기억할 수 있습니다.

데모

작가: Rana Hasnain Khan

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

AngularJS의 Controller as 구문

관련 문장 - Angular Controller

AngularJS의 `Controller as` 구문