AngularJs學習筆記（1）——ng-app
阿新 • • 發佈：2017-07-12
oot you ctrl span fun 代碼 問題 筆記 doctype
眾所周知：
ng-app 指令用於告訴 AngularJS 應用當前這個元素是根元素。
所有 AngularJS 應用都必須要要一個根元素。
HTML 文檔中只允許有一個 ng-app 指令，如果有多個 ng-app 指令，則只有第一個會被使用，一個頁面會自動加載第一個ng-app。
使用ng-app聲明Angular的邊界，你可以用ng-app 指令告訴Angular 應該管理頁面中的哪一塊，可以是整個HTML，也可以是某個div
一個ng-app可以有多個controller
$scope的範圍局限於每一個controller中
問題來了：
我就是想要多個ng-app，雖然這樣做不知道有什麽用？？？
有例子如下：
<!DOCTYPE html> <html> <script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script> <body> <div id="app1" ng-app="App1"> <span ng-controller="myCtrl" ng-init="firstName=‘John‘ ; lastName=‘DoeDoe‘">{{ firstName + " " + lastName }}</span> <br> <span ng-controller="yourCtrl">{{ secondName + " " + thirdName}}</span> </div> <br> <div id="app2" ng-app="App2" ng-controller="yourCtrl"> {{ secondName + " " + thirdName }} </div> <script> var app = angular.module("App1", []); app.controller("myCtrl", function($scope) { // $scope.lastName = "Doe"; }); app.controller("yourCtrl", function($scope) { $scope.secondName = "小米1"; $scope.thirdName = "大米1"; }); var app1 = angular.module(‘App2‘, []); app1.controller("yourCtrl", function($scope) { $scope.secondName = "小米4"; $scope.thirdName = "小米5"; }); //默認加載app1,通過下面的代碼顯示啟動app2,但是必須寫在app2申明之後 angular.bootstrap(document.getElementById("app2"), [‘App2‘]); </script> </body> </html>
AngularJs學習筆記（1）——ng-app