AngularJS框架的ng-app指令與自動加載實現(xiàn)方法分析

更新時間：2017年01月04日 10:57:22 作者：aitangyong

這篇文章主要介紹了AngularJS框架的ng-app指令與自動加載實現(xiàn)方法,結(jié)合實例形式分析了ng-app指令的功能及自動加載機制的實現(xiàn)技巧,需要的朋友可以參考下

本文實例分析了AngularJS框架的ng-app指令與自動加載實現(xiàn)方法。分享給大家供大家參考，具體如下：

ng-app是angular的一個指令，代表一個angular應(yīng)用（也叫模塊）。使用ng-app或ng-app=""來標(biāo)記一個DOM結(jié)點，讓框架會自動加載。也就是說，ng-app是可以帶屬性值的。如果想要實現(xiàn)自動加載，那么就不能讓ng-app帶有屬性值。

<html>
  <body ng-app>
    <div>div1:{{1+3*2}}</div>
    <script src="angular.js"></script>
  </body>
</html>

1、不含ng-app，無法自動加載，這個比較好理解。

<html>
  <body>
    <div>div1:{{1+3*2}}</div>
    <script src="angular.js"></script>
  </body>
</html>

2、含有2個ng-app，那么只會自動加載第一個，這個也好理解。

<html>
  <body>
    <div ng-app>div1:{{1+3*2}}</div>
    <div ng-app>div2:{{1+3*2}}</div>
    <script src="angular.js"></script>
  </body>
</html>

3、ng-app帶有屬性，不能自動加載

<html>
  <body>
    <div ng-app="app1">div1:{{1+3*2}}</div>
    <script src="angular.js"></script>
  </body>
</html>

4、不帶屬性的在前，帶屬性的在后。ng-app標(biāo)記的模塊可以自動加載

<html>
  <body>
    <div ng-app>div1:{{1+3*2}}</div>
    <div ng-app="app1">div1:{{1+3*2}}</div>
    <script src="angular.js"></script>
  </body>
</html>

5、帶屬性的在前，不帶屬性的在后。ng-app標(biāo)記的模塊不能自動加載

<html>
  <body>
    <div ng-app="app1">div1:{{1+3*2}}</div>
    <div ng-app>div1:{{1+3*2}}</div>
    <script src="angular.js"></script>
  </body>
</html>

第4和5兩種情況很奇怪，不應(yīng)該有這種順序的區(qū)別，也沒有必要這樣區(qū)分，猜測應(yīng)該是框架的bug。有人明白的話，歡迎指教。

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS入門與進階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對大家AngularJS程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

angular4響應(yīng)式表單與校驗實現(xiàn)demo
這篇文章主要介紹了angular4響應(yīng)式表單與校驗實現(xiàn)demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-05-05
AngularJS動態(tài)生成div的ID源碼解析
這篇文章主要介紹了基于AngularJS動態(tài)生成div的ID,本文介紹的非常詳細，具有參考借鑒價值，對angularjs動態(tài)生成div的id相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧
2016-08-08
AngularJs篇：使用AngularJs打造一個簡易權(quán)限系統(tǒng)的實現(xiàn)代碼
本篇文章主要介紹了AngularJs篇：使用AngularJs打造一個簡易權(quán)限系統(tǒng)的實現(xiàn)代碼，具有一定的參考價值，有興趣的可以了解一下。
2016-12-12
Angular下H5上傳圖片的方法（可多張上傳）
本文給大家分享在使用angular上傳圖片的功能，在開發(fā)過程中遇到很多問題，最終都解決了，今天小編給大家介紹下Angular下H5上傳圖片的方法（可多張上傳),非常不錯，需要的朋友參考下
2017-01-01
詳解angularJS+Ionic移動端圖片上傳的解決辦法
本篇文章主要介紹了詳解angularJS+Ionic移動端圖片上傳的解決辦法，具有一定的參考價值，有需要的可以了解一下
2017-09-09
AngularJS學(xué)習(xí)筆記之ng-options指令
ng-options是angular-1.3新出的一個指令,這篇文章就來介紹這個指令的用法.有需要的小伙伴可以參考下。
2015-06-06
AngularJS自定義指令之復(fù)制指令實現(xiàn)方法
這篇文章主要介紹了AngularJS自定義指令之復(fù)制指令實現(xiàn)方法,結(jié)合完整實例形式分析了AngularJS自定義指令實現(xiàn)復(fù)制功能的相關(guān)操作技巧,需要的朋友可以參考下
2017-05-05
Angular 輸入框?qū)崿F(xiàn)自定義驗證功能
AngularJS 表單和控件可以驗證輸入的數(shù)據(jù)。本文給大家介紹Angular 輸入框?qū)崿F(xiàn)自定義驗證功能，非常不錯，具有參考借鑒價值，需要的朋友參考下
2017-02-02
angular2路由切換改變頁面title的示例代碼
本篇文章主要介紹了angular2路由切換改變頁面title的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08
基于angular6.0實現(xiàn)的一個組件懶加載功能示例
這篇文章主要介紹了基于angular6.0實現(xiàn)的一個組件懶加載功能示例,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-04-04