快捷導(dǎo)航

Angular.js初始化之ng-app的自動(dòng)綁定與手動(dòng)綁定詳解

更新時(shí)間：2017年07月31日 10:35:40 作者：果感

這篇文章主要給大家介紹了關(guān)于Angular.js初始化之ng-app的自動(dòng)綁定與手動(dòng)綁定的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。

前言

眾所周知在傳統(tǒng)的angularJS應(yīng)用中，都是通過ng-app把a(bǔ)ngular應(yīng)用綁定到某個(gè)dom上，這樣做會(huì)把js代碼入侵到html上，angular提供了手動(dòng)啟動(dòng)的API--angular.bootstrap() 。

本文將給大家詳細(xì)介紹關(guān)于Angular.js初始化之ng-app自動(dòng)與手動(dòng)綁定的相關(guān)內(nèi)容，分享出來供大家參考學(xué)習(xí)，下面話不多說，來一起看看詳細(xì)的介紹。

一、傳統(tǒng)的綁定初始化

<html>

<head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>

</head>

<body ng-app="myApp">

 <div ng-controller="myCtrl">

  {{ hello }}

 </div>

 <script type="text/javascript">

  var myModule = angular.module("myApp",[]);

  myModule.controller("myCtrl",function($scope){

   $scope.hello = "hello,angular!";

  });

 </script>

</body>

</html>

二、手動(dòng)初始化

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

element: 綁定ng-app的dom元素
modules：綁定的模塊名字
config：附加的配置

<html>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>

<body id="body">

 <div ng-controller="myCtrl">

  {{ hello }}

 </div>

 <script type="text/javascript">

  var app = angular.module("bootstrapTest",[]);

  app.controller("myCtrl",function($scope){

   $scope.hello = "hello,angular from bootstrap";

  });

   

  // angular.bootstrap(document.getElementById("body"),['bootstrapTest']);

  angular.bootstrap(document,['bootstrapTest']); // 瀏覽器加載的每個(gè)html都會(huì)對應(yīng)一個(gè)document對象， 此對象是所有html中dom元素的根節(jié)點(diǎn)，也屬于dom元素

 </script>

</body>

</html>

注意： angular.bootstrap只會(huì)綁定第一次加載的對象，后面重復(fù)的綁定或者其他對象的綁定，都會(huì)在控制臺(tái)輸出錯(cuò)誤提示

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持

您可能感興趣的文章: