AngularJS 컨트롤러를 사용하는 방법은 무엇입니까? Angularjs 컨트롤러는 Anglejs 애플리케이션 인스턴스 해상도를 제어합니다.

이 글에서는 주로 angularjs에서의 컨트롤러 사용을 소개합니다. angularjs 컨트롤러Angularjs 애플리케이션의 데이터를 제어합니다. 이제 이 기사를 살펴보겠습니다.

angularjs 컨트롤러 소개:

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

AngularJS 컨트롤러는 일반

JavaScript 개체입니다.

AngularJS 컨트롤러

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

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

컨트롤러는 표준 JavaScript

객체 생성자로 생성된 JavaScript 객체입니다.

<p>

名: <input><br>
名: <input><br>
<br>
姓名: {{firstName + " " + lastName}}

</p>

<script>
var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;myCtrl&#39;, function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>

애플리케이션 분석:

AngularJS 애플리케이션은

ng-app으로 정의됩니다. 응용프로그램은

내에서 실행됩니다.

ng-controller="myCtrl" 속성은 AngularJS 지시어입니다. 컨트롤러를 정의하는 데 사용됩니다.

myCtrl 함수는 JavaScript 함수입니다.

AngularJS는

$scope 객체를 사용하여 컨트롤러를 호출합니다.

AngularJS에서 $scope는 애플리케이션 개체(애플리케이션 변수 및 함수에 속함)입니다.

Controller의

$scope(범위, 제어 범위와 동일)는 AngularJS 모델 객체를 저장하는 데 사용됩니다.

컨트롤러는 범위에 두 개의 속성(

firstName 및 lastName)을 생성합니다.

ng-model 지시문은 입력 필드를 컨트롤러의 속성(firstName 및 lastName)에 바인딩합니다. (자세한 내용을 알고 싶다면 PHP 중국어 웹사이트AngularJS 개발 매뉴얼 열을 참조하세요.)

컨트롤러 메서드

위의 예는 lastName과 firstName이라는 두 가지 속성을 가진 컨트롤러 개체를 보여줍니다.

컨트롤러에는 메소드(변수 및 함수)도 있을 수 있습니다.

<p>

名: <input><br>
姓: <input><br>
<br>
姓名: {{fullName()}}

</p>

<script>
var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;personCtrl&#39;, function($scope) {
     $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});
</script>

외부 파일의 컨트롤러

대형 애플리케이션에서는 컨트롤러를 외부 파일에 저장하는 것이 일반적입니다.

<script> 태그의 코드를 복사하세요. personController.js의 외부 파일:<p><pre class="brush:php;toolbar:false">&lt;p ng-app=&quot;myApp&quot; ng-controller=&quot;personCtrl&quot;&gt; First Name: &lt;input type=&quot;text&quot; ng-model=&quot;firstName&quot;&gt;&lt;br&gt; Last Name: &lt;input type=&quot;text&quot; ng-model=&quot;lastName&quot;&gt;&lt;br&gt; &lt;br&gt; Full Name: {{firstName + &quot; &quot; + lastName}} &lt;script src=&quot;personController.js&quot;&gt;&lt;/script&gt;기타 예제&lt;h2&gt;&lt;/h2&gt;다음 예제에서는 새 컨트롤러 파일을 만듭니다.&lt;p&gt;&lt;/p&gt; &lt;pre class=&quot;brush:php;toolbar:false&quot;&gt;angular.module('myApp', []).controller('namesCtrl', function($scope) {      $scope.names = [          {name:'Jani',country:'Norway'},          {name:'Hege',country:'Sweden'},          {name:'Kai',country:'Denmark'}      ];  });</pre>파일을 다음 이름으로 저장합니다. namesController.js:<p></p>그런 다음 애플리케이션에서 컨트롤러 파일을 사용하세요:<p></p> <pre class="brush:php;toolbar:false">&lt;p&gt; &lt;/p&gt;</pre> <ul>    <li>      {{ x.name + ', ' + x.country }}   </li> </ul> <script></script>좋아, 이 글은 끝났습니다. 질문이 있으시면 아래에 메시지를 남겨주세요.

위 내용은 AngularJS 컨트롤러를 사용하는 방법은 무엇입니까? Angularjs 컨트롤러는 Anglejs 애플리케이션 인스턴스 해상도를 제어합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!