快捷導(dǎo)航

AngularJS使用ng-app自動(dòng)加載bootstrap框架問題分析

更新時(shí)間：2017年01月04日 11:19:44 作者：aitangyong

這篇文章主要介紹了AngularJS使用ng-app自動(dòng)加載bootstrap框架問題,分析了前面文章中所述的ng-app自動(dòng)加載bootstrap出現(xiàn)的錯(cuò)誤原因與相應(yīng)的解決方法,需要的朋友可以參考下

本文實(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é)》

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

您可能感興趣的文章: