AngularJS 기초 학습 노트 컨트롤 러

AngularJS 컨트롤 러 는 AngularJS applications 의 데 이 터 를 제어 하 는 데 사 용 됩 니 다.
AngularJS 컨트롤 러 는 일반적인 JavaScript 대상 입 니 다.
AngularJS 컨트롤 러 AngularJS applications 는 컨트롤 러 를 통 해 제어 합 니 다.
ng - controller 명령 은 응용 프로그램의 컨트롤 러 를 정의 합 니 다.
하나의 컨트롤 러 는 자 바스 크 립 트 대상 입 니 다. 표준 자 바스 크 립 트 대상 구조 함 수 를 통 해 만 들 수 있 습 니 다.

First Name: 

Last Name: 



Full Name: {{firstName + " " + lastName}}




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

코드 설명:
AngularJS application 은 ng - app = "my App" 을 통 해 정의 합 니 다.이 응용 프로그램의 효과 적 인 역할 영역 은 ng - app 이 있 는 곳 에 있 습 니 다.
ng - controller = "my Ctrl" 속성 은 AngularJS 명령 으로 컨트롤 러 를 정의 합 니 다.
my Ctrl 함 수 는 일반적인 JavaScript 함수 입 니 다.
AngularJS 는 컨트롤 러 를 호출 하기 위해 $scope 대상 을 사용 합 니 다.
AngularJS 에서 $scope 는 application 대상 (즉, application 변수 와 함수 의 소유자) 입 니 다.
컨트롤 러 는 두 개의 속성 (또는 변수) 을 포함 합 니 다: firstName 과 lastName.그것들 은 $scope 대상 에 추가 되 었 습 니 다.
ng - model 명령 은 input 탭 의 값 을 컨트롤 러 속성 에 연결 합 니 다 (firstName 과 lastName).
컨트롤 러 의 방법 위의 예 는 컨트롤 러 대상 이 두 가지 속성 을 포함 하 는 것 을 보 여 줍 니 다: lastName 과 firstName.
컨트롤 러 도 방법 을 포함 할 수 있 습 니 다 (함수 값 을 변수 에 부여 합 니 다).

First Name: 

Last Name: 



Full Name: {{fullName()}}




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

컨트롤 러 를 외부 파일 에 두 면 대형 응용 프로그램 에서 컨트롤 러 코드 를 외부 파일 에 자주 쓴다.
탭 에 있 는 코드 를 personController. js 외부 파일 에 복사 합 니 다: & lt;br> </p>
<div class="jb51code">
<pre class="brush:xhtml;">
<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">
다른 예 는 새로운 컨트롤 러 파일 을 만 들 고 namesController. js 라 고 명명 합 니 다.

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

그리고 응용 프로그램 에서 이 컨트롤 러 파일 을 사용 합 니 다:

 

  {{ x.name + ', ' + x.country }}
 

이상 에서 말 한 것 이 바로 본문의 전체 내용 이 니 여러분 들 이 좋아 하 시 기 를 바 랍 니 다.