AngularJS 컨트롤러
AngularJS 컨트롤러는 AngularJS 응용 프로그램의 데이터를 제어합니다.
AngularJS 컨트롤러는 일반 JavaScript 객체입니다.
AngularJS 컨트롤러
AngularJS 응용 프로그램은 컨트롤러에 의해 제어됩니다.
NG-Controller 지시문은 응용 프로그램 컨트롤러를 정의합니다.
컨트롤러는 표준 javaScript 객체의 생성자에 의해 생성 된 JavaScript 객체입니다.
AngularJS 인스턴스
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-app = "myapp" ng-controller = "personctrl"> name : <input type = "text"ng-model = "firstName"> <br> 이름 : {{fullName ()}}} </div> <cript> var app = angular.module ( 'myApp', []); app.controller ( '{perscope', function) $ scope.lastname = "doe"; function () {return $ scope.firstname + "" + $ scope.lastname};실행 결과 :
이름:
성:
이름 : John Doe
AngularJS 응용 프로그램은 NG-APP에 의해 정의됩니다. 응용 프로그램은 <div> 내에서 실행됩니다.
ng-controller = "myctrl"속성은 angularjs 지침입니다. 컨트롤러를 정의하는 데 사용됩니다.
myctrl 함수는 JavaScript 함수입니다.
AngularJS는 $ SCOPE 객체를 사용하여 컨트롤러를 호출합니다.
AngularJS에서 $ SCOPE는 응용 프로그램 개체입니다 (응용 프로그램 변수 및 함수에 속함).
컨트롤러의 $ 범위 (범위 및 제어 범위에 해당)는 AngularJS 모델 객체를 저장하는 데 사용됩니다.
컨트롤러는 범위에서 두 가지 속성 (FirstName 및 LastName)을 만듭니다.
NG- 모델 지침은 입력 도메인을 컨트롤러의 속성 (FirstName 및 LastName)에 바인딩합니다.
컨트롤러 방법
위의 예는 마지막 이름과 FirstName의 두 가지 속성을 가진 컨트롤러 객체를 보여줍니다.
컨트롤러에는 메소드 (변수 및 함수)가있을 수도 있습니다.
AngularJS 인스턴스
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-app = "myapp" ng-controller = "personctrl"> name : <input type = "text"ng-model = "firstName"> <br> 이름 : {{fullName ()}}} </div> <cript> var app = angular.module ( 'myApp', []); app.controller ( '{perscope', function) $ scope.lastname = "doe"; function () {return $ scope.firstname + "" + $ scope.lastname};실행 효과 :
이름:
성:
이름 : John Doe
외부 파일의 컨트롤러
대규모 응용 프로그램에서 컨트롤러는 일반적으로 외부 파일에 저장됩니다.
<Script> 태그의 코드를 PersonController.js라는 외부 파일로 복사합니다.
AngularJS 인스턴스
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-app = "myapp" ng-controller = "personctrl"> name : <input type = "text"ng-model = "firstName"> <br> 이름 : <input type = "text"ng-model = "lastName"> <br> <br> 이름 : {{firstName + "" + lastName}} <cript src = "personcontroller.js"> </script> </body> </html>실행 결과 :
이름:
성:
이름 : John Doe
다른 예
다음 예제는 새로운 컨트롤러 파일을 만듭니다.
Angular.Module ( 'myApp', []). 컨트롤러 ( 'namesctrl', function ($ scope) {$ scope.names = [{name : 'jani', country : 'Norway'}, {name : 'hege', country : 'sweden'}, {Kai ','country : 'delmark'});파일을 nestcontroller.js로 저장합니다.
그런 다음 응용 프로그램에서 컨트롤러 파일을 사용하십시오.
AngularJS 인스턴스
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-app = "myapp" ng-controller = "namesctrl"> <ul> <li ng-repeat = "x in names"> {{x.name + ',' + x.country}} </li> </ul> </div> <scrc = "Nestcontroller.js"> </script> </html>실행 효과 :
위의 것은 AngularJS 컨트롤러 데이터의 편집이며 나중에 보충됩니다.