AngularJS 컨트롤러

AngularJS 컨트롤러AngularJS 애플리케이션의 데이터를 제어합니다.。

AngularJS 컨트롤러는 일반적인 JavaScript 객체。

AngularJS 컨트롤러

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

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

컨트롤러는 표준 JavaScript 객체 생성자로 생성됩니다. JavaScript 객체。

AngularJS 예제

<div ng-app="myApp" ng-controller="myCtrl">  
이름: <input type="text" ng-model="firstName"><br>  
성: <input type="text" ng-model="lastName"><br>  
<br>  
전체 이름: {{firstName + " " + lastName}}  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
  $scope.firstName = "Bill";  
  $scope.lastName = "Gates";  
});  
</script>

자신이 직접 시도해보세요

애플리케이션 설명:

AngularJS 애플리케이션은 ng-app="myApp" 정의. 애플리케이션이 <div> 내에서 실행됩니다.

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

myCtrl 함수는 JavaScript 함수입니다。

AngularJS는 $scope 객체를 호출합니다。

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

컨트롤러는 범위firstName 와 lastName）에 두 가지 속성(변수)을 생성합니다。

ng-model 지시는 입력 필드를 컨트롤러 속성(firstName과 lastName)에 바인딩합니다。

컨트롤러 메서드

위의 예제는 lastName와 firstName 두 가지 속성을 가진 컨트롤러 객체를 보여줍니다。

컨트롤러는 메서드(변수로서 함수)를 가질 수 있습니다：

AngularJS 예제

<div ng-app="myApp" ng-controller="personCtrl">  
이름: <input type="text" ng-model="firstName"><br>  
성: <input type="text" ng-model="lastName"><br>  
<br>  
전체 이름: {{fullName()}}  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('personCtrl', function($scope) {  
  $scope.firstName = "Bill";  
  $scope.lastName = "Gates";  
  $scope.fullName = function() {  
    return $scope.firstName + " " + $scope.lastName;  
  };  
});  
</script>

자신이 직접 시도해보세요

외부 파일에 저장된 컨트롤러

큰 애플리케이션에서는 컨트롤러를 외부 파일에 저장하는 것이 매우 일반적입니다。

각각의 <script> 태그 사이의 코드를 personController.js 의 외부 파일에서：

AngularJS 예제

<div ng-app="myApp" ng-controller="personCtrl">  
이름: <input type="text" ng-model="firstName"><br>  
성: <input type="text" ng-model="lastName"><br>  
<br>  
전체 이름: {{fullName()}}  
</div>  
<script src="personController.js"></script>

자신이 직접 시도해보세요

另一个例子

다음 예제에서는 새로운 컨트롤러 파일을 생성하겠습니다：

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

파일을 다음과 같이 저장하세요 namesController.js:

그런 다음 애플리케이션에서 컨트롤러 파일을 사용하면됩니다:

AngularJS 예제

<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>

자신이 직접 시도해보세요