AngularJS와 컨트롤러는 AngularJS와 응용 프로그램의 데이터를 제어 할 수 있습니다.
AngularJS와 컨트롤러는 일반 자바 스크립트 객체입니다.
컨트롤러 AngularJS와
AngularJS와 응용 프로그램은 컨트롤러에 의해 제어된다.
NG 컨트롤러 지시어는 응용 프로그램 컨트롤러를 정의합니다.
컨트롤러는 표준 자바 스크립트 객체 생성자에 의해 생성 된 자바 스크립트 개체입니다.
AngularJS와 예
<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를 인앱 = "을 myApp"에 의해 정의된다. 응용 프로그램은 <div> 내부에서 실행됩니다.
NG 컨트롤러 = "myCtrl"속성은 AngularJS와 지시어이다. 이 컨트롤러를 정의합니다.
myCtrl 기능은 자바 스크립트 기능입니다.
AngularJS와는 $ 범위 객체와 컨트롤러를 호출합니다.
AngularJS와에서는 $ 범위는 애플리케이션 객체 (어플리케이션 변수와 함수의 소유자)이다.
컨트롤러는 범위 (firstName과 lastName 속성)의 두 가지 속성 (변수)를 생성한다.
NG 모델 지시어는 컨트롤러 속성 (firstName과 lastName 속성)에 입력 필드를 바인딩합니다.
컨트롤러 메소드
이 lastName 및 firstName을 : 위의 예는 두 가지 속성을 가진 컨트롤러 객체를 보여 주었다.
컨트롤러는 또한 방법 (함수와 변수를) 할 수 있습니다 :
AngularJS와 예
<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>
»그것을 자신을 시도 외부 파일에서 컨트롤러
큰 응용 프로그램에서는 외부 파일에 저장 컨트롤러 일반적이다.
그냥 외부 파일 이름에 <script> 태그 사이에 코드를 복사 personController.js :
AngularJS와 예
<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>
»그것을 자신을 시도 또 다른 예
다음의 예를 들어 우리는 새로운 컨트롤러 파일을 생성합니다 :
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>
»그것을 자신을 시도