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的环境下运行起来了。