快捷導(dǎo)航

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

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

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

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

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

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

1、不含ng-app，無(wú)法自動(dòng)加載，這個(gè)比較好理解。

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

2、含有2個(gè)ng-app，那么只會(huì)自動(dòng)加載第一個(gè)，這個(gè)也好理解。

<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帶有屬性，不能自動(dòng)加載

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

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

<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)記的模塊不能自動(dòng)加載

<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ū)分，猜測(cè)應(yīng)該是框架的bug。有人明白的話，歡迎指教。

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

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

您可能感興趣的文章:

相關(guān)文章

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