Angular.js中ng-app如何實(shí)現(xiàn)自動(dòng)綁定與手動(dòng)綁定

發(fā)布時(shí)間：2021-08-17 14:42:47 來(lái)源：億速云閱讀：129 作者：小新欄目：web開發(fā)

這篇文章主要介紹Angular.js中ng-app如何實(shí)現(xiàn)自動(dòng)綁定與手動(dòng)綁定，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

一、傳統(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ì)對(duì)應(yīng)一個(gè)document對(duì)象， 此對(duì)象是所有html中dom元素的根節(jié)點(diǎn)，也屬于dom元素

 </script>

</body>

</html>

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

以上是“Angular.js中ng-app如何實(shí)現(xiàn)自動(dòng)綁定與手動(dòng)綁定”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

Angular.js中ng-app如何實(shí)現(xiàn)自動(dòng)綁定與手動(dòng)綁定

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽