AngularJS 介紹 - 啟始 angular 模組

使用 AngularJS 框架時，除了要引入 AngularJS 相關的 JavaScript 檔案，最重要的，還要啟始 angular 模組。

啟始 angular 模組的方法可分為自動跟手動兩種。

自動 - ng-app

AngularJS 提供了 ngApp directive，只要在 HTML document 要套用 angular 模組最底層的 tag（通常是 <html>、<body> 或 <div>）加上 ng-app 屬性，就會在 DOM 載入完成後自動啟始。

1
2
3
<html ng-app>
  ...
</html>

也可以指定模組名稱

1
2
3
<body ng-app="myApp">
  ...
</body>

對應的 JavaScript

1
var app = angular.module('myApp', []);

但是只有第一個 ng-app 會被自動啟始，若要在同一個 HTML document 套用多個 angular 模組，就只能手動啟始了。

手動 - angular.bootstrap

呼叫 angular.bootstrap 方法可以手動啟始 angular 模組。

1
2
var app = angular.module('myApp', []);
angular.bootstrap(document, ['myApp']);

參考官方文件：angular.bootstrap