快捷導(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=""來標(biāo)記一個(gè)DOM結(jié)點(diǎn)，讓框架會(huì)自動(dòng)加載。也就是說，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，無法自動(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)文章

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