默認在一個html界面中只啓動一個 ng-app 模塊,而且是界面中第一次出現的那個使用 ng-app 聲明的模塊.
且使用ng-app,頁面加載時會這樣處理:
angular找到ng-app標記後,首先加載與module相關的directive
創建應用相關的injector(依賴管理器)
開始對ng-app爲根節點的DOM“編譯”
2、angular.bootstrap方法可以理解爲省去查找ng-app的過程,傳給bootstrap的參數一個爲DOM對象,另一個爲模塊名數組
3.the code following
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div ng-app='myApp' ng-controller='myCtrl'>
<input type="text" ng-model='first'><br/>
<input type="text" ng-model='last'><br/>
{{first + ' '+last}}
</div>
<!-- active more ng-app by yourself-->
<div id="test" ng-controller='test-con'>
<input type="text" ng-model='content.message'>
<p>{{content.message}}</p>
</div>
<script src='angular.js'></script>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.first = 'wang';
$scope.last = 'luffy';
});
var myapp = angular.module('test',[]);
myapp.controller('test-con',function($scope){
var content = {};
content.message='hello world';
$scope.content = content;
});
//add
angular.element(document).ready(
function(){
angular.bootstrap(document.getElementById('test'),['test']);
});
</script>
</body>
</html>
也可以直接angular.bootstrap(document.getElementById('test'),['test']);