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#oldtoolbag.com（メールを送信する際には、#を@に変更してください。報告を行い、関連する証拠を提供してください。一旦確認がとりあえず、このサイトは侵害される可能性のある内容をすぐに削除します。）

基礎教程