AngularJs bootstrap 시작 상세 설명 및 예제 코드

일반 사용자에게는 AngularJS의 ng-app은 항상 특정 dom 요소에 수동으로 바인딩됩니다. 하지만 일부 애플리케이션에서 이는 매우 불편하게 느껴집니다.

바인딩 초기화

바인딩을 통해 Angular의 초기화를 수행하면 js 코드가 html에 침입하게 됩니다. 하지만 초보자에게는 충분히 사용할 수 있습니다!

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body ng-app="myApp">
  <div ng-controller="myCtrl">
    {{ hello }}
  </div>
  <script type="text/javascript">
    var myModule = angular.module("myApp",[]);
    myModule.controller("myCtrl",function($scope){
      $scope.hello = "hello,angular!";
    });
  </script>
</body>
</html>

실행 후, 'hello,angular!'이 표시됩니다.

수동 초기화

Angular에서도 수동 바인딩 api - bootstrap를 제공합니다. 사용 방법은 다음과 같습니다：

angular.bootstrap(element, [modules], [config]);

첫 번째 매개변수 element:은 ng-app의 dom 요소;

modules: 바인딩된 모듈 이름
config: 추가적인 설정

간단히 코드를 보세요：

<html>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
<body id="body">
  <div ng-controller="myCtrl">
    {{ hello }}
  </div>
  <script type="text/javascript">
    var app = angular.module("bootstrapTest",[]);
    app.controller("myCtrl",function($scope){
      $scope.hello = "hello,angular from bootstrap";
    });
    // angular.bootstrap(document.getElementById("body"),['bootstrapTest']);
    angular.bootstrap(document,['bootstrapTest']);
  </script>
</body>
</html>

주의해야 할 점은:

angular.bootstrap는 첫 번째 로드된 객체에만 바인딩합니다.

다음은 중복된 바인딩이나 다른 객체의 바인딩은 모두 콘솔에서 오류 표시를 출력합니다.

이것이 AngularJS bootstrap의 자료 정리입니다. 앞으로도 관련 자료를 계속 추가하겠습니다. 감사합니다.

명시: 본문은 인터넷에서 수집된 내용으로, 저작권자가 소유하고 있으며, 인터넷 사용자가 자발적으로 기여하고 업로드한 내용으로, 이 웹사이트는 소유권을 가지지 않으며, 인공적인 편집을 거치지 않았으며, 이에 대한 법적 책임도 부담하지 않습니다. 저작권 침해가 의심되는 내용을 발견하시면, notice#w로 이메일을 보내 주시기 바랍니다.3codebox.com에 (이메일 보내기 시, #을 @으로 변경하여) 신고하시고 관련 증거를 제공하시면, 실제로 확인되면 해당 사이트는 즉시 저작권 침해 내용을 삭제할 것입니다.

기본 튜토리얼

좋아하는 것