angular使用bootstrap方法手動啟動的實例代碼

2019-11-19 16:03:22

字體：大中小

來源：轉載

供稿：網友

要啟動一個angular應用，可以使用ng-app指令，也可以調用bootstrap方法手動啟動。先看一下angular的bootstrap方法。

angular.bootstrap(element, [modules], [config]);

element(必需)。要啟動angular的根節點，一般為document，也可以是其他的的html的dom。

modules(數組，可選)。依賴的模塊。

conifg(object,可選)。配置項，目前只有strictDi一個可配置項，默認為false,是否開啟輔助debug。

看例子。

<!DOCTYPE html> <html> <head>  <title></title>  <script src="http://cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script> </head> <body>  <div ng-controller="ctrl1">  {{myString}}  </div>  <script>  var app = angular.module('app',[]);  app.controller('ctrl1',['$scope',function($scope){   $scope.myString='hello world';  }])  angular.bootstrap(document,['app'],{strictDi: true});   </script> </body> </html>

需要注意的是angular.bootstrap必須是在element參數所指向的dom樹加載完畢后才能調用，所以通常我們會在$(document).ready()后執行。此處因為我們的script是放在body尾部，所以不存在問題。

實例2

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js/angular.min.js"></script></head><body><div ng-app="myapp"> <div ng-controller="myctrl"> {{name}}  <button ng-click="start()">點擊引導啟動</button> </div></div><div id="fir"> <div ng-controller="myctrl">  {{name}} </div></div></body><script> var app=angular.module("myapp",[]); app.controller("myctrl",function($scope) {  $scope.name="tom";  $scope.start=function (){   var _f=document.getElementById("fir");   angular.bootstrap(_f,["myapp2"])  } }) var app2=angular.module("myapp2",[]); app2.controller("myctrl",function($scope) {  $scope.name="jquer"; })</script></html>

初始狀態：