gulp+webpack+angular1的一点小经验(第二部分webpack包起来的angular1)
又一周过去了,项目也已经做得有点模样了。收集来一些小经验,分享给大家,有疏漏之处,还望指正,海涵。
上周整合了gulp与webpack,那么工具准备差不多了,我们就开始编码吧。编码的框架就是angular了(现在已经出了es6了,配合angular2其实很酷,有兴趣的朋友们去玩喽,这里还是angular1)。
从哪开始呢?对的,我们要先有个angular。还要能让webpack通过一句:
require('angular');
完成导入。这样的话我就先去官网下载了一个angular.js文件,然后在我的webpack的入口文件index.js里这样写:
require('./angular.js');
事实证明这样写是错的。。。然后我就看网上的哥哥们怎么写,他们的代码里都是直接这样:
require('angular');
我就用npm来安装了一个angular
npm install --save-dev angular
然后,我在index.js里这样写:
var angular = require('angular');
var App = angular.module("App",[]);
ok,这样就对了。那么我们接下来要给angular加个ui-router的插件。那就采用相同的办法了:
首先要:
npm install --save-dev angular-ui-router
然后:
var angular = require('angular');
var uiRouter = require('angular-ui-router');
var App = angular.module("App",[uiRouter ]);
这样没有问题,可以简写一下:
var angular = require('angular');
var App = angular.module("App",[
require('angular-ui-router')
]);
那么我们自定义的module要怎么加入到App的依赖中去呢?我们自己写的又不能用npm去安装。
假如我在index.js(webpack的入口文件)的同级目录下,有个文件夹modules,里边放的是写好的模块文件如myModule.js,这是一次有益的尝试:
var angular = require('angular');
var App = angular.module("App",[
require('angular-ui-router'),
require('./modules/myModule.js')
]);
myModule.js的内容如下:
var angular = require('angular');
/**
* 这里是***模块
* @type {[type]}
*/
var myModule = angular.module('myModule', []);
myModule.controller('myModuleCtrl',function($scope,$http,$state,$stateParams) {
//这里是controller的内容
});
这样呢,又会报错了。为什么呢?因为webpack导入的模块要符合CMD或者AMD的规范,而这个module显然是不符合的。关于规范:webpack教程与规范
那么搞懂了这个规范的意思,那也就是说,我们这个myModule应该这样写:
var angular = require('angular');
/**
* 这里是***模块
* @type {[type]}
*/
var myModule = angular.module('myModule', []);
myModule.controller('myModuleCtrl',function($scope,$http,$state,$stateParams) {
//这里是controller的内容
});
module.exports = myModule;
试了一下,还是不行啊报这个错:“module-is-not-a-function”,又去stackOverflow上查了一下:如何解决module is not a function 1 以及:如何解决module is not a function 2
原来是导出的时候加上.name,像这样:
module.exports = myModule.name;
基本上可以跑起来了。
这里还有一个坑,已经填上了:unknow provider使用ngAnnotate来解决:ngAnnotate的git地址
好的,到此为止,我们已经能让angular在webpack的环境下运行起来了。
gulp+webpack+angular1的一点小经验(第二部分webpack包起来的angular1)的更多相关文章
- gulp+webpack+angular1的一点小经验(第三部分使用一些angular1的插件ui-bootstrap与highcharts)
第一个要介绍的是我们的麻烦制造器:angular-ui-bootstrap ui-bootstrap可以有很多通用的插件给大家用,比如弹窗啊(modal),翻页控件啊(pagination),为什么说 ...
- gulp+webpack+angular1的一点小经验(第一部分gulp与webpack的整合)
时间匆匆如流水继上周熟悉了gulp的初步安装与环境配置以后,我的项目又进入了新的阶段! 这篇文章将把我这一周遇到的一些问题,以及解决的方式做一个小小的总结,不一定记的完整,但都是个人的一点经验,分享给 ...
- 模仿下拉框datalist的jquery插件的一点小经验
原本项目里是用h5的新属性data-list,但是这个下拉框的数据太多,而data-list似乎没有设置高度的地方,所以写了个小插件,期间也发现了一些bug,目前这个版本算是可以一用的版本,故写一下这 ...
- Web应用程序并发问题处理的一点小经验
在web应用中,一个账户,会有N多个涉及到数字的字段.比如一个账户的金额,积分等.这些字段就涉及到增减的情况.如果是在测试环境下,靠程序员或者测试手动点击.一般是发现不了问题. 一旦上到正式环境下.有 ...
- 【Django】有关多用户管理的一点小经验分享
前言 最近,笔者因为需要开发一个系统作为毕设的展示,因此就产生了有关多用户管理的问题.在这里我把自己的需求重新阐明一下:能够通过Django自带的用户管理框架,实现多用户的管理,例如登录.登出.ses ...
- Global一点小经验
Global: Global.asax 文件,有时候叫做 ASP.NET 应用程序文件,提供了一种在一个中心位置响应应用程序级或模块级事件的方法,他位于应用程序根目录下. 这个 Global.asax ...
- KInect AR沙盒制作的一点小经验
最近在微博上看到这样一条 微博 >点这看< 看起来非常有意思,就去Google了一下如何制作. 没想到这是一个开源项目,而且还告诉你如何安装 OK,接下来就说说我的制作过程. 首先,先放 ...
- 关于前端js拼接字符串的一点小经验
1.今天在做项目的时候遇到一个问题,就是使用onclick="xxx()" 点击事件的时候,参数如果为全数字就会出现点击无反应的问题.但是当参数为字符串或者动态内容的时候就会出现 ...
- 关于win8开发的一点小总结
我今天做画面的时候,发现了一点小问题. 我在xmal文件里面加了一个CheckBox控件,设置IsChecked属性为True,并添加了Checked事件.Checked事件里面有对另外一个TextB ...
随机推荐
- Matplotlib 设置
# 导入相关模块 import matplotlib.pyplot as plt import numpy as np 设置 figure Matplotlib 绘制的图形都在一个默认的 figure ...
- Project Euler 57: Square root convergents
五十七.平方根收敛(Square root convergents) 二的平方根可以表示为以下这个无穷连分数: \[ \sqrt 2 =1+ \frac 1 {2+ \frac 1 {2 +\frac ...
- Project Euler 58: Spiral primes
从一开始按以下方式逆时针旋转,可以形成一个边长为七的正方形螺旋: 一个有趣的现象是右下对角线上都有一个奇完全平方数,但是更有趣的是两条对角线上的十三个数中有八个数是素数(已经标红),也就是说素数占比为 ...
- 编程工具 | VScode 使用快捷键
按 Press 功能 Function Ctrl + Shift + P,F1 显示命令面板 Show Command Palette Ctrl + P 快速打开 Quick Open Ctrl + ...
- python的变量内存管理
一.变量的引用机制 当你在python中定义一个值,如x = 500时,python会在内存中开辟一个小地方用于存储数值. x = 500 #定义一个变量 print(id(x)) #打印该变量的内存 ...
- PHP实现开发者模式出现该公众号提供的服务出现故障 请稍后再试解决方法
PHP实现开发者模式出现该公众号提供的服务出现故障 请稍后再试解决方法 仔细检查下有没有echo等输出的代码 echo没有输出东西 就是报这个信息 所以调试信息都必须写入日记
- jquery layui的巨坑
jquery layui的巨坑 layui 模块不能写在ajax里 因为 layui只能执行一次 第二次会没效果 再执行需要刷新页面再执行
- 解决mybatis中 数据库column 和 类的属性名property 不一致的两种方式
解决方式way1:resultMap (1)studentMapper.xml <!-- 当数据库的字段名 和 类的属性名 不一致的时候的解决方式:2种 way1--> <selec ...
- Kubernetes Horizontal Pod Autoscaling
HPA介绍 Horizontal Pod Autoscaler基于观察到的CPU利用率(或借助自定义指标 支持,基于其他一些应用程序提供的指标)自动缩放复制控制器,部署或副本集中的Pod数量 .请 ...
- 网站搭建 - 虚拟机的安装 - Linux 本地网站搭建第一步
搭建网站-1-域名申请参见公众号 生物信息系统(swxxxt) 搭建网站-域名绑定见稍后的一章,就是直接点解析,然后就完事了,可以不看的. 首先准备材料: 先装虚拟机,会要求重启,那就重启吧,安装界面 ...