AngularJS框架的ng-app指令與自動加載實現(xiàn)方法分析
更新時間：2017年01月04日 10:57:22 作者：aitangyong
這篇文章主要介紹了AngularJS框架的ng-app指令與自動加載實現(xiàn)方法,結合實例形式分析了ng-app指令的功能及自動加載機制的實現(xiàn)技巧,需要的朋友可以參考下
本文實例分析了AngularJS框架的ng-app指令與自動加載實現(xiàn)方法。分享給大家供大家參考，具體如下：
ng-app是angular的一個指令，代表一個angular應用（也叫模塊）。使用ng-app或ng-app=""來標記一個DOM結點，讓框架會自動加載。也就是說，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標記的模塊可以自動加載
<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標記的模塊不能自動加載
<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兩種情況很奇怪，不應該有這種順序的區(qū)別，也沒有必要這樣區(qū)分，猜測應該是框架的bug。有人明白的話，歡迎指教。
更多關于AngularJS相關內容感興趣的讀者可查看本站專題：《AngularJS入門與進階教程》及《AngularJS MVC架構總結》
希望本文所述對大家AngularJS程序設計有所幫助。
相關文章
AngularJs用戶輸入動態(tài)模板XSS攻擊示例詳解
這篇文章主要給大家介紹了關于AngularJs用戶輸入動態(tài)模板XSS攻擊的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用angularjs具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2018-04-04
基于angular中的重要指令詳解($eval,$parse和$compile)
下面小編就為大家?guī)硪黄赼ngular中的重要指令詳解($eval,$parse和$compile)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
這篇文章主要為大家介紹了Angular 與 Component store實踐示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
angular2+node.js express打包部署的實戰(zhàn)
本篇文章主要介紹了angular2+node.js express打包部署的實戰(zhàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
在本教程中,您使用?Flex?布局與?Angular?應用程序,它允許您構建一個布局,使用預配置的?Flexbox?CSS?樣式,而無需額外的樣式,對Angular使用?Flex?布局相關知識感興趣的朋友跟隨小編一起看看吧2024-02-02
不知道大家有沒有發(fā)現(xiàn)在用AngularJS作為前端搭建個人博客的時候，發(fā)現(xiàn)用AngularJs輸出html的時候，瀏覽器并不解析這些html標簽，這里我們需要其顯示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
在我們創(chuàng)建一個angularJS應用的時候，菜單往往往是不可或缺的元素之一。接下來通過本文給大家介紹AngularJS動態(tài)菜單操作指令，感興趣的朋友一起學習吧2017-04-04
Angularjs實現(xiàn)多個頁面共享數(shù)據(jù)的方式
本文給大家介紹使用Angularjs實現(xiàn)多個頁面共享數(shù)據(jù)的方式，通過定義一個共享服務service來實現(xiàn)此功能，對angularjs共享數(shù)據(jù)相關知識感興趣的朋友一起學習2016-03-03
Angular是Google開發(fā)的一款瀏覽器端的高人氣JavaScript框架,Angular 經常會被用到后臺和管理工具的開發(fā)，這兩類都會需要對用戶進行鑒權。而鑒權的第一步，就是進行身份驗證。本文詳細介紹了Angular開發(fā)中的登陸與身份驗證。2016-07-07