快捷導(dǎo)航

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入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

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

您可能感興趣的文章:

相關(guān)文章

AngularJs用戶輸入動態(tài)模板XSS攻擊示例詳解
這篇文章主要給大家介紹了關(guān)于AngularJs用戶輸入動態(tài)模板XSS攻擊的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用angularjs具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
2018-04-04
基于angular中的重要指令詳解($eval,$parse和$compile)
下面小編就為大家?guī)硪黄赼ngular中的重要指令詳解($eval,$parse和$compile)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-10-10
Angular 與 Component store實踐示例
這篇文章主要為大家介紹了Angular 與 Component store實踐示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02
angular2+node.js express打包部署的實戰(zhàn)
本篇文章主要介紹了angular2+node.js express打包部署的實戰(zhàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
在Angular?中使用?Flex?布局的示例詳解
在本教程中,您使用?Flex?布局與?Angular?應(yīng)用程序,它允許您構(gòu)建一個布局,使用預(yù)配置的?Flexbox?CSS?樣式,而無需額外的樣式,對Angular使用?Flex?布局相關(guān)知識感興趣的朋友跟隨小編一起看看吧
2024-02-02
AngularJS通過$sce輸出html的方法
不知道大家有沒有發(fā)現(xiàn)在用AngularJS作為前端搭建個人博客的時候，發(fā)現(xiàn)用AngularJs輸出html的時候，瀏覽器并不解析這些html標(biāo)簽，這里我們需要其顯示angular輸出的html能被瀏覽器解析怎么辦呢？不知道Angularjs如何實現(xiàn)這種功能的通過這篇文章來看看吧。
2016-09-09
angular6根據(jù)environments配置文件更改開發(fā)所需要的環(huán)境的方法
這篇文章主要介紹了angular6根據(jù)environments配置文件更改開發(fā)所需要的環(huán)境的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-03-03
AngularJS動態(tài)菜單操作指令
在我們創(chuàng)建一個angularJS應(yīng)用的時候，菜單往往往是不可或缺的元素之一。接下來通過本文給大家介紹AngularJS動態(tài)菜單操作指令，感興趣的朋友一起學(xué)習(xí)吧
2017-04-04
Angularjs實現(xiàn)多個頁面共享數(shù)據(jù)的方式
本文給大家介紹使用Angularjs實現(xiàn)多個頁面共享數(shù)據(jù)的方式，通過定義一個共享服務(wù)service來實現(xiàn)此功能，對angularjs共享數(shù)據(jù)相關(guān)知識感興趣的朋友一起學(xué)習(xí)
2016-03-03
詳解Angular開發(fā)中的登陸與身份驗證
Angular是Google開發(fā)的一款瀏覽器端的高人氣JavaScript框架,Angular 經(jīng)常會被用到后臺和管理工具的開發(fā)，這兩類都會需要對用戶進(jìn)行鑒權(quán)。而鑒權(quán)的第一步，就是進(jìn)行身份驗證。本文詳細(xì)介紹了Angular開發(fā)中的登陸與身份驗證。
2016-07-07