AngularJS框架的ng-app指令與自動(dòng)加載實(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ū)別，也沒(méi)有必要這樣區(qū)分，猜測(cè)應(yīng)該是框架的bug。有人明白的話，歡迎指教。
更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS入門(mén)與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。
- angularJS 指令封裝回到頂部示例詳解
- AngularJS自定義指令實(shí)現(xiàn)面包屑功能完整實(shí)例
- AngularJS動(dòng)態(tài)菜單操作指令
- 詳解angularJs指令的3種綁定策略
- Angularjs 動(dòng)態(tài)添加指令并綁定事件的方法
- Angularjs使用指令做表單校驗(yàn)的方法
- Angularjs自定義指令實(shí)現(xiàn)三級(jí)聯(lián)動(dòng) 選擇地理位置
- AngularJS內(nèi)置指令
- AngularJS中的指令全面解析(必看)
- AngularJS學(xué)習(xí)筆記之基本指令(init、repeat)
- AngularJS實(shí)現(xiàn)的回到頂部指令功能實(shí)例
相關(guān)文章
AngularJs用戶輸入動(dòng)態(tài)模板X(qián)SS攻擊示例詳解
這篇文章主要給大家介紹了關(guān)于AngularJs用戶輸入動(dòng)態(tài)模板X(qián)SS攻擊的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用angularjs具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-04-04
基于angular中的重要指令詳解($eval,$parse和$compile)
下面小編就為大家?guī)?lái)一篇基于angular中的重要指令詳解($eval,$parse和$compile)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧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)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
在本教程中,您使用?Flex?布局與?Angular?應(yīng)用程序,它允許您構(gòu)建一個(gè)布局,使用預(yù)配置的?Flexbox?CSS?樣式,而無(wú)需額外的樣式,對(duì)Angular使用?Flex?布局相關(guān)知識(shí)感興趣的朋友跟隨小編一起看看吧2024-02-02
不知道大家有沒(méi)有發(fā)現(xiàn)在用AngularJS作為前端搭建個(gè)人博客的時(shí)候，發(fā)現(xiàn)用AngularJs輸出html的時(shí)候，瀏覽器并不解析這些html標(biāo)簽，這里我們需要其顯示angular輸出的html能被瀏覽器解析怎么辦呢？不知道Angularjs如何實(shí)現(xiàn)這種功能的通過(guò)這篇文章來(lái)看看吧。2016-09-09
angular6根據(jù)environments配置文件更改開(kāi)發(fā)所需要的環(huán)境的方法
這篇文章主要介紹了angular6根據(jù)environments配置文件更改開(kāi)發(fā)所需要的環(huán)境的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
在我們創(chuàng)建一個(gè)angularJS應(yīng)用的時(shí)候，菜單往往往是不可或缺的元素之一。接下來(lái)通過(guò)本文給大家介紹AngularJS動(dòng)態(tài)菜單操作指令，感興趣的朋友一起學(xué)習(xí)吧2017-04-04
Angularjs實(shí)現(xiàn)多個(gè)頁(yè)面共享數(shù)據(jù)的方式
本文給大家介紹使用Angularjs實(shí)現(xiàn)多個(gè)頁(yè)面共享數(shù)據(jù)的方式，通過(guò)定義一個(gè)共享服務(wù)service來(lái)實(shí)現(xiàn)此功能，對(duì)angularjs共享數(shù)據(jù)相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)2016-03-03
詳解Angular開(kāi)發(fā)中的登陸與身份驗(yàn)證
Angular是Google開(kāi)發(fā)的一款瀏覽器端的高人氣JavaScript框架,Angular 經(jīng)常會(huì)被用到后臺(tái)和管理工具的開(kāi)發(fā)，這兩類都會(huì)需要對(duì)用戶進(jìn)行鑒權(quán)。而鑒權(quán)的第一步，就是進(jìn)行身份驗(yàn)證。本文詳細(xì)介紹了Angular開(kāi)發(fā)中的登陸與身份驗(yàn)證。2016-07-07