AngularJS 응용 프로그램은 주로 컨트롤러에 의존하여 응용 프로그램의 데이터 흐름을 제어합니다. 컨트롤러는 NG-Controller 명령어를 사용하여 정의됩니다. 컨트롤러는 속성/속성 및 JavaScript 객체를 포함하는 함수입니다. 각 컨트롤러는 컨트롤러에 의해 제어되는 응용 프로그램/모듈을 지정하기 위해 $ SCOPE 매개 변수를 수용합니다.
<div ng-app = ""ng-controller = "StudentController"> ... </div>
여기서는 NG-Controller 지시문을 사용하는 컨트롤러 StudentController를 선언했습니다. 다음 단계로, 우리는 학생 콘트롤러를 다음과 같이 정의합니다.
<cript> 함수 StudentController ($ scope) {$ scope.student = {FirstName : "Yiibai", lastName : "com", fullName : function () {var studentObject; StudentObject = $ scope.student; return studentObject.firstName + "" + windentObject.LastName; }};} </script>StudentController $ 스코프를 JavaScript 객체 매개 변수로 정의합니다.
$ SCOPE는 StudentController 객체를 사용하여 응용 프로그램을 나타냅니다.
$ scope.student는 StudentController 객체의 속성입니다.
FirstName과 LastName은 $ scope.student 객체의 두 가지 속성입니다. 우리는 그들에게 기본값을 전달했습니다.
FullName은 $ scope.student 객체의 함수이며 해당 작업은 병합 이름을 반환하는 것입니다.
FullName 함수에서 이제 학생 개체가 조합 이름을 반환하기를 원합니다.
예를 들어, 별도의 JS 파일에서 컨트롤러 개체를 정의하고 HTML 페이지를 파일에 넣을 수도 있습니다.
이제 ng-model을 사용하거나 표현식을 다음과 같이 사용하여 StudentController의 속성을 사용 할 수 있습니다.
입력 이름 : <input type = "text"ng-model = "student.firstname"> <br> 성을 입력하십시오 : <input type = "text"ng-model = "withy.lastname"> <br> <br> 입력 중 : {{{wiching.fullname ()}}이제 Student.FirstName 및 Student.LastName의 두 가지 입력 상자가 있습니다.
이제 HTML에 추가 된 Student.fullName () 메소드가 있습니다.
이제 이름과 마지막 이름 입력 상자를 입력하여 입력 할 내용을 입력하면 두 이름이 자동으로 업데이트 된 것을 알 수 있습니다.
예
다음 예제는 컨트롤러 사용을 보여줍니다.
testangularjs.html 파일의 내용은 다음과 같습니다.
<html> <head> <title> Angular JS 컨트롤러 </title> </head> <h2> Angularjs 샘플 응용 프로그램 </h2> <div ng-app = ""ng-controller = "StudentController"> 입력 이름 : <input type = "ng-model ="Student.firstname "> <br> <br> enter last enter. ng-model = "student.lastname"> <br> <br> 당신은 다음과 같습니다. StudentObject = $ scope.student; return studentObject.firstName + "" + windentObject.LastName; }};}}} </script> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> </body> </html>
산출
웹 브라우저에서 TextAngularjs.html을 열고 다음 결과를 확인하십시오.
위는 AngularJS 컨트롤러를 분류하는 정보입니다. 우리는 앞으로 관련 지식을 계속 정리할 것입니다. 이 웹 사이트를 지원 해주셔서 감사합니다.