AngularJS 기본 학습 노트 Controller_AngularJS

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이 위치한 dc6dce4a544fdca2df29d5ac0ea9906b입니다.

　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>

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

3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그의 코드를 personController.js 외부 파일에 복사합니다.

<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: {{firstName + " " + lastName}}

</div>

<script src="personController.js"></script>

또 다른 예
​새 컨트롤러 파일을 생성하고 이름을 namesController.js로 지정합니다.

angular.module('myApp', []).controller('namesCtrl', function($scope) {
  $scope.names = [
    {name:'Jani',country:'Norway'},
    {name:'Hege',country:'Sweden'},
    {name:'Kai',country:'Denmark'}
  ];
});

그런 다음 애플리케이션에서 이 컨트롤러 파일을 사용합니다.

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

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

</div>

<script src="namesController.js"></script>

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.