ng-app與ng-app=""是一樣的,都是沒定義應用名的,例如
<div ng-app="" ng-init="firstName='echo'"> <h1>我的名字是:{{firstName}}</h1> </div>
比較奇怪的是,在里面加入了應用名,就報錯了。
<div ng-app="myApp" ng-init="firstName='echo'"> <h1>我的名字是:{{firstName}}</h1> </div>
firstName並未解析,原因是,ng-app為定義名稱時會自動去解析,但如果你添加了名稱,它會去找對應模塊的執行代碼,由於我們並未定義模塊代碼,才導致了報錯。這樣改改
<div ng-app="myApp" ng-controller='myCtrl'> <h1>我的名字是:{{firstName}}</h1> </div> //JS部分 var app = angular.module('myApp',[]); app.controller('myCtrl',function($scope){ $scope.firstName='echo'; })
又正常了!
那如果我們聲明多個ng-app會怎么樣?一個加應用名,一個不加
<div ng-app="" ng-init="firstName='echo'"> <h1>我的名字是:{{firstName}}</h1> </div> <div ng-app="myApp" ng-controller='myCtrl'> <h1>你的名字是:{{lastName}}</h1> </div> //JS部分,我為轉為myApp應用定義了模塊便於區分 var app = angular.module('myApp',[]); app.controller('myCtrl',function($scope){ $scope.lastName='echo'; })
默認只加載了第一個!那我們在同頁面存在多個ng-app情況下,還是可以利用angular.bootstrap(element, [modules], [config]);解決
初學angular,后續學到再到此博文補充吧。