Angular의 컨트롤러

컨트롤러는 Angular에서 전단 MVC 프레임워크를 구성하는 중요한 위치를 차지한다.Angular에서 컨트롤러는 페이지의 논리 코드를 관리하는 역할을 합니다.컨트롤러가 "ng-controller"명령을 통해 DOM 페이지에 추가될 때, Angular는 컨트롤러 구조 함수를 통해 실체의 대상을 생성하고, 이 대상을 생성하는 과정에서 $scope 대상을 매개 변수로 주입하며, 사용자가 $scope 대상에 접근할 수 있도록 합니다.이렇게 하면 사용자는 $scope 대상과 페이지의 요소를 통해 데이터를 연결하여 데이터가 컨트롤러에서 시청각층까지의 과정을 실현할 수 있다.

1.1 컨트롤러 초기화 $scope 대상

예: 페이지에서 응용 모듈로 컨트롤러 대상을 구축하고 내연 성명 방식으로 컨트롤러 대상이 $scope 대상이 제공하는 서비스에 의존한다는 것을 나타낸다.컨트롤러 대상에서 $scope 대상의 이름이'text'인 속성을 초기화하고 페이지의 요소와 데이터를 연결합니다




    
    


<h3>      $scope  </h3>
<div ng-controller="fn">
    <span>{{text}}</span>
</div>

<script src="js/angular.min.js"/>
<script>
    var mod = angular.module('a1',[]);
    mod.controller('fn',['$scope', function ($scope) {
        $scope.text='hello world!!!'
    }])
</script>

</code></pre> 
 <h4>1.2   $scope    </h4> 
 <p>             $scope        ，    $scope      ，                             。    $scope         ，     ，          ，              ，        ，     Angular      ，      （ ng-click）       ，                  。</p> 
 <p> 2：  1     $scope        "span_show"     。     ，   $scope   "text"   ，   return           ；    ，  Angular     $scope    "span_show"  ，          。</p> 
 <pre><code><div ng-controller="fn">
    <span class="show">{{span_show()}}</span>
</div>
<script src="js/angular.min.js"/>
<script>
    var mod = angular.module('a1',[]);
    mod.controller('fn',['$scope', function ($scope) {
        $scope.text="hello zyt!!!";
        $scope.span_show= function () {
            $scope.text="hello angular!!!";
            return $scope.text;
        }
    }]);
</code></pre> 
 <h4>1.2.1       $scope     </h4> 
 <p> 3：  2     $scope        "click_show"   ，  ，        <button>  ，     click        。      ，    <span>     "hello"</p> 
 <pre><code><div ng-controller="fn">
    <span class="show">{{text}}</span>
    <button ng-click="click_show()" value="  ">  </button>
</div>
<script src="js/angular.min.js"></script>
<script>
    var mod = angular.module('a2',[]);
    mod.controller('fn',['$scope', function ($scope) {
        $scope.text='hi';
        $scope.click_show= function () {
            $scope.text='hello';
        }
    }]);
</script>
</code></pre> 
 <h4>1.2.2       $scope  </h4> 
 <p> 4：  3                "click_para"      ，         <button>  ，          "ng-click"    ，         ， <span>               。</span></button></p> 
 <pre><code><div ng-controller="fn">
    <span class="show">{{text}}</span>
    <button ng-click="click_show()" value="  ">  </button>
    <button ng-click="click_para('         ！');">   </button>
</div>
<script src="js/angular.min.js"/>
<script>
    var mod = angular.module('a3',[]);
    mod.controller('fn',['$scope', function ($scope) {
        $scope.text='hi';
        $scope.click_show= function () {
            $scope.text='hello';
        }
        $scope.click_para= function (newVal) {
            $scope.text=newVal;
        }
    }]);
</script>
</code></pre> 
 <h4>1.2.3 $scope          </h4> 
 <p>  ，    ，              。                DOM    ， Angular  "ng-controller"                   。  ，         $scope              $scope        </p> 
 <p> 5：               </p><div>  ，   <div>            ，            <div>       ，   <div> <span>         ，   <button>                。 
 <pre><code><div ng-controller="fn">
    <div ng-controller="fn_1">
        <span>{{text}}</span><br/>
        <span>{{child_text}}</span>
        <button ng-click="click_show()">  </button>
    </div>
</div>
<script src="js/angular.min.js"/>
<script>
    var mod = angular.module('a4',[]);
    mod.controller('fn',['$scope', function ($scope) {
        $scope.text='hi';
        $scope.click_show= function () {
            $scope.text='hello';
        }
    }]);
    mod.controller('fn_1',['$scope', function ($scope) {
        $scope.child_text='angular';
    }]);
//                     $scope        ，                 ，       。
//                  
//                   ？？？
</script>
</code></pre> 

                            </button></span></div>
                        </div>
                    </div>
                    <!--PC WAP    -->
                     
                    <script type="text/javascript" src="/views/front/js/chanyan.js"/>
                    <!--    -         -->
                     
                </div>
                <div class="col-md-3">
                    <div class="row" id="ad">
                        <!--    -  1       -->
                        <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                             
                        </div>
                        <!--    -  2       -->
                        <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                             
                        </div>
                        <!--    -  3       -->
                        <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                             
                        </div>
                    </div>
                </div>
            </article></div>
        </div>

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

Angular의 컨트롤러

1.1 컨트롤러 초기화 $scope 대상

좋은 웹페이지 즐겨찾기