AngularJS使用ng-app自動(dòng)加載bootstrap框架問題分析
本文實(shí)例分析了AngularJS使用ng-app自動(dòng)加載bootstrap框架問題。分享給大家供大家參考，具體如下：
前面的文章《AngularJS框架的ng-app指令與自動(dòng)加載實(shí)現(xiàn)方法分析》 提出了使用ng-app指令的情況。之前覺得出現(xiàn)第4和第5種情況很奇怪，因?yàn)橹豢吹搅爽F(xiàn)象，沒有看到本質(zhì)。JS錯(cuò)誤，最直觀的表現(xiàn)方式就是：彈出一個(gè)非常不友好的JS錯(cuò)誤窗口。當(dāng)腳本出現(xiàn)了未捕獲的錯(cuò)誤，瀏覽器才會(huì)彈出錯(cuò)誤提示。還有一種比較隱晦的表示：在瀏覽器的控制臺(tái)輸出錯(cuò)誤信息。這提示我們：使用JS框架的時(shí)候，一定要用下F12看看控制臺(tái)是否有錯(cuò)誤。
第3種情況 和 第5種情況：不帶屬性的ng-app模塊不能自動(dòng)加載，用F12發(fā)現(xiàn)控制臺(tái)報(bào)錯(cuò)：
SCRIPT5022: [$injector:modulerr] Failed to instantiate module app1 due to:
Error: [$injector:nomod] Module 'app1' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument。
什么意思呢？大概就是我們使用了ng-app，要求自動(dòng)加載我們自定義的模塊，但是我們卻沒有提供這些模塊。再看下官方的ngApp說明文檔：
Use this directive to auto-bootstrap an AngularJS application. The ngApp directive designates the root element of the application and is typically placed near the root element of the page - e.g. on the <body> or <html> tags.Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application。
1、如果在html中定義了ng-app，那么angular框架會(huì)自動(dòng)初始化，不管它有沒有帶屬性值；
如果沒有使用ng-app，那么需要自己手動(dòng)初始化。
2、如果ng-app沒有屬性值，angular會(huì)默認(rèn)創(chuàng)建一個(gè)模塊作為root，然后啟動(dòng)框架。
3、ng-app屬性如果有值，即自定義module，也會(huì)被解析出來，前提是我們必須先創(chuàng)建module。
也就是說ng-app就是用來自動(dòng)啟動(dòng)angular框架的，是否帶屬性值的差別在于：根模塊的創(chuàng)建，到底是默認(rèn)的，還是我們自定義的。
更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對大家AngularJS程序設(shè)計(jì)有所幫助。
相關(guān)文章
angularjs學(xué)習(xí)筆記之雙向數(shù)據(jù)綁定
AngularJS在$scope變量中使用臟值檢查來實(shí)現(xiàn)了數(shù)據(jù)雙向綁定。和Ember.js數(shù)據(jù)雙向綁定中動(dòng)態(tài)設(shè)施setter和getter不同，臟治檢查允許AngularJS監(jiān)視那些存在或者不存在的變量。2015-09-09
AngularJS解決ng界面長表達(dá)式(ui-set)的方法分析
這篇文章主要介紹了AngularJS解決ng界面長表達(dá)式(ui-set)的方法,通過具體問題的分析并結(jié)合實(shí)例形式給出了AngularJS長表達(dá)式的相關(guān)使用技巧,需要的朋友可以參考下2016-11-11
淺談Angular.js中使用$watch監(jiān)聽模型變化
當(dāng)angular數(shù)據(jù)模型發(fā)生變化時(shí)，我們需要如果需要根據(jù)他的變化觸發(fā)其他的事件。本篇文章主要介紹了Angular.js中使用$watch監(jiān)聽模型變化，有興趣的可以了解一下2017-01-01
Angular4項(xiàng)目中添加i18n國際化插件ngx-translate的步驟詳解
這篇文章主要跟大家介紹了關(guān)于Angular4項(xiàng)目中添加i18n國際化插件ngx-translate的步驟，文中介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-07-07
這篇文章主要介紹了Angularjs添加排序查詢功能的實(shí)例代碼,需要的朋友可以參考下2017-10-10
angularJS Provider、factory、service詳解及實(shí)例代碼
這篇文章主要介紹了angularJS Provider詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-09-09
Angular中ng-options下拉數(shù)據(jù)默認(rèn)值的設(shè)定方法
本篇文章主要介紹了Angular中ng-options下拉數(shù)據(jù)默認(rèn)值的設(shè)定方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
淺談AngularJs 雙向綁定原理(數(shù)據(jù)綁定機(jī)制)
本篇文章主要介紹了淺談AngularJs 雙向綁定原理(數(shù)據(jù)綁定機(jī)制)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
angular4響應(yīng)式表單與校驗(yàn)實(shí)現(xiàn)demo
這篇文章主要介紹了angular4響應(yīng)式表單與校驗(yàn)實(shí)現(xiàn)demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
ios設(shè)備中angularjs無法改變頁面title的解決方法
今天小編就為大家分享一篇ios設(shè)備中angularjs無法改變頁面title的解決方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09