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）

猜你喜欢