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 ...
随机推荐
- [Jupyter Notebook]Notebook添加Ancona虚拟环境
1.首先安装ipykernel:conda install ipykernel 解决安装ipykernel权限报错问题 wangbin@Skyell_Cloud:~$ sudo chown -R wa ...
- DAY 4 基础算法
基础算法 本来今天是要讲枚举暴力还有什么的,没想到老师就说句那种题目就猪国杀,还说只是难打,不是难.... STL(一)set 感觉今天讲了好多,set,单调栈,单调队列,单调栈和单调队列保证了序列的 ...
- 洛谷P3452 [POI2007]BIU-Offices的思考
这题就是坑人的,因为way我前一半存正图,后一半存反图,导致一般扩大两倍过不了,而是要扩大四倍,就是这个坑!!!!! #include<iostream> #include<cstd ...
- MapReduce 人个理解
1.MapReduce 理解 拆分成 map 过程与 reduce 过程: map 可以理解为sql 中的 group by 操作, reduce相当于group by 后的聚合计算 : 一个map ...
- MATLAB基本使用及SIMULINK建模仿真实验
MATLAB基本使用及SIMULINK建模仿真实验 这是我总结的操作方法: 1 ) M脚本文件的编写 1.新建M-file: 2.输入指令: 3.保存(注意:保存路径需要与工作路径一致) 2 )在S ...
- python文件的基本操作
打开文件的三种方式: open(r'E:\学习日记\python\code\文件的简单操作.py') open('E:\\学习日记\\python\\code\\文件的简单操作.py') open(' ...
- CSS如何设置列表样式属性
列表样式属性 在HTML中有2种列表.无序列表和有序列表,在工作中无序列表比较常用,无序列表就是ul标签和li标签组合成的称之为无序列表,那什么是有序列表呢?就是ol标签和li标签组合成的称之为有序列 ...
- deepin 、 windows10,双系统安装
deepin . windows10,双系统安装: 首先,最好专门分一个盘用来存放deepin操作系统的安装位置(我这里分给它60个G). 1.在 http://rsync.deepin.com/de ...
- Java虚拟机的内存
JDK1.8之前,java内存分为 线程共享区:堆.方法区.直接内存(非运行时数据区的一部分).线程私有区:程序计数器.虚拟机栈.本地方法栈. JDK1.8开始,虚拟机取消了方法区,改为元空间. 程序 ...
- python_day05
今日内容 ''' post请求登录github Request URL: https://github.com/session Request Method: POST #Referer表示上一个请求 ...