AngularJS bootstrap啟動詳解及實例代碼

更新時間：2016年09月14日 15:22:24 作者：xingoo

這篇文章主要介紹了AngularJS bootstrap啟動的知識，這里整理了相關資料及簡單實例代碼，,需要的朋友可以參考下

對于一般的使用者來說，AngularJS的ng-app都是手動綁定到某個dom元素。但是在一些應用中，這樣就顯得很不方便了。

綁定初始化

通過綁定來進行angular的初始化，會把js代碼侵入到html中，但是對于新手使用來說，還是足夠了！

<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>

運行后，會顯示hello,angular!

手動初始化

Angular中也提供了手動綁定的api——bootstrap，它的使用方式如下：

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

其中第一個參數(shù)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']);
  </script>
</body>
</html>

值得注意的是：

angular.bootstrap只會綁定第一次加載的對象。

后面重復的綁定或者其他對象的綁定，都會在控制臺輸出錯誤提示。

以上就是對AngularJS bootstrap 的資料整理，后續(xù)繼續(xù)補充相關資料，謝謝大家對本站的支持！

您可能感興趣的文章:

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

Angular2 自定義validators的實現(xiàn)方法
angular 當需要form表單需要驗證時，angular自帶了許多校驗器，但是很多時候自帶的無法滿足業(yè)務需求，這時候就需要自定義的校驗器，下面通過本文給大家分享Angular2 自定義validators的實現(xiàn)方法，需要的朋友參考下吧
2017-07-07
AngularJS directive返回對象屬性詳解
這篇文章主要為大家纖細介紹了AngularJS directive返回對象屬性的相關內(nèi)容，感興趣的小伙伴們可以參考一下
2016-03-03
AngularJS中實現(xiàn)用戶訪問的身份認證和表單驗證功能
這篇文章主要介紹了AngularJS中實現(xiàn)用戶訪問的身份認證及表單驗證功能的方法,Angular是Google開發(fā)的一款瀏覽器端的高人氣JavaScript框架,需要的朋友可以參考下
2016-04-04
angular 服務隨記小結(jié)
這篇文章主要介紹了angular 服務隨記小結(jié),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-05-05
Angular實踐之將Input與Lifecycle轉(zhuǎn)換成流示例詳解
這篇文章主要為大家介紹了Angular實踐之將Input與Lifecycle轉(zhuǎn)換成流示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-02-02
詳解Angular-Cli中引用第三方庫
本篇文章主要介紹了詳解Angular-Cli中引用第三方庫，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-05-05
Angular實現(xiàn)的table表格排序功能完整示例
這篇文章主要介紹了Angular實現(xiàn)的table表格排序功能,結(jié)合完整實例形式分析了AngularJS表格排序所涉及的事件響應、元素遍歷、屬性修改等相關操作技巧,需要的朋友可以參考下
2017-12-12
angular中radio單選的問題解決demo
這篇文章主要為大家介紹了angular中radio單選的問題解決demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-05-05
AngularJS實現(xiàn)的2048小游戲功能【附源碼下載】
這篇文章主要介紹了AngularJS實現(xiàn)的2048小游戲,可實現(xiàn)通過鍵盤W、S、A、D鍵控制上下左右移動進行游戲的功能,涉及AngularJS頁面元素動態(tài)操作及數(shù)值運算等相關操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下
2018-01-01
angular學習之動態(tài)創(chuàng)建表單的方法
這篇文章主要介紹了angular學習之動態(tài)創(chuàng)建表單的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-12-12