現(xiàn)在有個(gè)項(xiàng)目是用webpack來(lái)搭建的,用的前端框架是angular@1.2.32昂拂,現(xiàn)在要用一個(gè)提示框受神,選的是angular-ui-notification。通過(guò)npm來(lái)安裝格侯。
angular如何在webpack中依賴模塊鼻听?
在npm包管理器介紹是通過(guò)script標(biāo)簽來(lái)引入的财著。
...
<link rel="stylesheet" href="angular-ui-notification.min.css">
...
<script src="angular-ui-notification.min.js"></script>
我以為通過(guò)import
方法可以同樣引入
import name from 'angular-ui-notification'
然而當(dāng)我import的時(shí)候,我犯難了撑碴。name
==angularUiNotification
or ==angular-ui-notification
撑教。后者顯然是不對(duì)的,js下直接報(bào)錯(cuò)醉拓,所以我選了前者伟姐。
import angularUiNotification from 'angular-ui-notification'
當(dāng)我這樣寫(xiě)的時(shí)候,js還是報(bào)了一大坨錯(cuò)誤:
var app=angular.module("app", ['angular-ui-notification'])
app.config(function(NotificationProvider) {
NotificationProvider.setOptions({
delay: 5000,
startTop: 10,
startRight: 10,
verticalSpacing: 10,
horizontalSpacing: 20,
positionX: 'center',
positionY: 'top'
});
});
報(bào)錯(cuò)的信息:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module angular-ui-notification due to:
Error: [$injector:nomod] Module 'angular-ui-notification' 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.
http://errors.angularjs.org/1.6.4/$injector/nomod?p0=angular-ui-notification
大概意思是`angular-ui-notification`這個(gè)模塊不可用亿卤。想想也是愤兵,angular-ui-notification第一次出現(xiàn),程序當(dāng)然不知道它是怎么來(lái)的排吴。也就是`import angularUiNotification`的時(shí)候秆乳,`angular-ui-notification`并沒(méi)有并導(dǎo)入進(jìn)來(lái)。也就是下面的寫(xiě)法有問(wèn)題钻哩。
>```import angularUiNotification from 'angular-ui-notification'```
然后又找了其他資料矫夷,最終在stackoverflow中找到答案。
http://stackoverflow.com/questions/27475820/webpack-browserify-and-ui-router
> ``` angular.module("app", [require("angular-ui-notification")]);```
在模塊依賴的時(shí)候憋槐,直接require双藕,當(dāng)然前提是要先npm install angular-ui-notification -D
###依賴css
要想完整實(shí)現(xiàn)功能,還需要引入css阳仔,這個(gè)比較簡(jiǎn)單
import 'angular-ui-notification/dist/angular-ui-notification.min.css'