AngularJS 기본 학습 노트 Controller_AngularJS-JS 튜토리얼-php.cn

AngularJS 컨트롤러는 AngularJS 애플리케이션의 데이터를 제어하는 데 사용됩니다.

AngularJS 컨트롤러는 일반적인 JavaScript 객체입니다.

AngularJS 컨트롤러
AngularJS 애플리케이션은 컨트롤러를 통해 제어됩니다.

ng-controller 지시문은 애플리케이션 컨트롤러를 정의합니다.

컨트롤러는 표준 JavaScript 개체 생성자를 통해 생성할 수 있는 JavaScript 개체입니다.

<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstName = "John";
  $scope.lastName = "Doe";
});
</script>

로그인 후 복사

코드 설명:

AngularJS 애플리케이션은 ng-app="myApp"으로 정의됩니다. 애플리케이션의 유효 범위는 ng-app이 위치한

입니다.

　ng-controller="myCtrl" 속성은 컨트롤러를 정의하는 AngularJS 지시문입니다.

myCtrl 함수는 일반적인 JavaScript 함수입니다.

AngularJS는 $scope 객체를 사용하여 컨트롤러를 호출합니다.

AngularJS에서 $scope는 애플리케이션 객체(즉, 애플리케이션 변수 및 함수의 소유자)입니다.

컨트롤러에는 firstName과 lastName이라는 두 가지 속성(또는 변수)이 포함되어 있습니다. $scope 객체에 첨부됩니다.

ng-model 지시어는 입력 태그의 값을 컨트롤러의 속성(firstName 및 lastName)에 바인딩합니다.

컨트롤러 방법
위의 예에서는 컨트롤러 개체에 lastName과 firstName이라는 두 가지 속성이 포함되어 있음을 보여줍니다.

컨트롤러에는 메소드(변수에 함수 할당)도 포함될 수 있습니다.

<div ng-app="myApp" ng-controller="personCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
  $scope.firstName = "John";
  $scope.lastName = "Doe";
  $scope.fullName = function() {
    return $scope.firstName + " " + $scope.lastName;
  }
});
</script>

로그인 후 복사

컨트롤러를 외부 파일에 넣기
대규모 애플리케이션에서는 컨트롤러 코드가 외부 파일에 작성되는 경우가 많습니다.