如何在webpack中使用angular第三方插件angular-ui-notification

现在有个项目是用webpack来搭建的,用的前端框架是angular@1.2.32,现在要用一个提示框,选的是angular-ui-notification。通过npm来安装。

angular如何在webpack中依赖模块?

在npm包管理器介绍是通过script标签来引入的。

https://www.npmjs.com/package/angular-ui-notification

...
  <link rel="stylesheet" href="angular-ui-notification.min.css">
...
  <script src="angular-ui-notification.min.js"></script> 

我以为通过import方法可以同样引入

import name from 'angular-ui-notification'

然而当我import的时候,我犯难了。name ==angularUiNotification or ==angular-ui-notification。后者显然是不对的,js下直接报错,所以我选了前者。

import angularUiNotification from 'angular-ui-notification'


当我这样写的时候,js还是报了一大坨错误:

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'
});
});


报错的信息:

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`这个模块不可用。想想也是,angular-ui-notification第一次出现,程序当然不知道它是怎么来的。也就是`import angularUiNotification`的时候,`angular-ui-notification`并没有并导入进来。也就是下面的写法有问题。
>```import angularUiNotification from 'angular-ui-notification'```

然后又找了其他资料,最终在stackoverflow中找到答案。

http://stackoverflow.com/questions/27475820/webpack-browserify-and-ui-router

> ``` angular.module("app", [require("angular-ui-notification")]);```

在模块依赖的时候,直接require,当然前提是要先npm install angular-ui-notification -D

###依赖css
要想完整实现功能,还需要引入css,这个比较简单

import 'angular-ui-notification/dist/angular-ui-notification.min.css'








最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,242评论 7 35
  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,721评论 7 110
  • 构建工具逐渐成为前端工程必备的工具,Grunt、Gulp、Fis、Webpack等等,译者有幸使用过Fis、Gul...
    陈坚生阅读 6,067评论 4 64
  • 学习流程 参考文档:入门Webpack,看这篇就够了Webpack for React 一. 简单使用webpac...
    Jason_Zeng阅读 3,188评论 2 16
  • 一天雾霾在家,新风+净化器,室内降至1且空气新鲜,有感于科技对生活的改善,人工打造了一个避难所。
    捡石头的村童阅读 209评论 0 0