另类angularjs应用
回顾
上一篇文章主要讲解了创建兼容任意浏览器(主要是ie的一些奇葩问题)的angularjs web应用，但是项目开发中其实更重要的还是在功能的模块化、代码自动压缩上面，这样项目在后期维护或者功能的重复利用上才会更方便，那么今天主要围绕以下几个主题来讲讲如何在不是用其他js模块化库的情况下，开发便于管理的angualrjs模块化代码：
- 使用service来创建模块
- 模块间引用
- 代码合并及压缩
本文中的代码均已nodejs来实现。
nodejs中，使用UglifyJS2来实现代码压缩
使用service来创建模块
以前创建angualrjs应用都是直接基于对scope的直接绑定来完成的，例如：登录功能，代码如下：
//html
<div ng-controller="loginController">
<div>
用户名：
<input type="text" ng-model="name" />
</div>
<div>
密 码：
<input type="password" ng-model="pwd" />
</div>
<a href="javascript:void(0)" ng-click="login()">
登录
</a>
</div>
//js
var myApp = angular.module('myApp', []);
myApp.controller('loginController', function ($scope) {
$scope.name = '';
$scope.pwd = '';
$scope.login = function () {
//代码略
};
});
当有很多的功能的时候，有些人可能会创建很多的controller来完成，也有些人会像我一样，使用一些js模块化库(seajs\requirejs)来实现，但是整合js模块化库会带来一些问题，而且效果也不尽人意，代码也会变得很复杂。
鉴于以上的一些问题，我不得不寻找一些其他的方案来替代，于是后来就想到了使用service来替代模块化(可能是资质比较差的原因吧)，这样便可以充分利用angularjs的特性来完成，首先创建一个user的service，其实就是将当前scope内的代码迁移到user.js内，代码如下：
myApp.service('user', function () {
function User() {
this.name = '';
this.pwd = '';
}
User.prototype.login = function () {
//代码略
};
return new User();
});
然后只要稍微修改一下上面的代码便可以实现这个功能了，改完代码如下：
//html
<div ng-controller="loginController">
<div>
用户名：
<input type="text" ng-model="user.name" />
</div>
<div>
密 码：
<input type="password" ng-model="user.pwd" />
</div>
<a href="javascript:void(0)" ng-click="user.login()">
登录
</a>
</div>
//js
myApp.controller('loginController', function ($scope, user) {
$scope.user = user;
});
使用这种方法，功能开发就简单多了，只要将功能的代码变成一个个的js，然后页面上引用后在controller初始化的时候，一个个绑定到scope上就可以了。
模块间引用
项目开发当中，免不了模块之间的交互，由于以上我们只用了service来创建模块，而angularjs的service跟许多js模块化库是一样的，不允许模块之间的循环引用，这样如果我们有一个user和userAddress，当user需要引用userAddress的时候就会遇到一些问题。
遇到此类问题的时候，其实可以引入一个类似缓存的模块来解决，首先将所有的功能模块都加入到缓存模块中(controller内)，然后当user模块需要引用到userAddress模块的时候，只要引用缓存模块并从其开放的接口中获取userAddress模块即可。
其实缓存模块就只要有2个方法(get\set)，大致代码如下：
myApp.controller('loginController', function ($scope, cache, user, userAddress) {
$scope.user = user;
$scope.userAddress = userAddress;
caceh.set('user', user);
caceh.set('userAddress', userAddress);
});
//user
myApp.service('user', function(cache) {
//需要引用的时候
var userAddress = cache.get('userAddress');
//其他代码省略
});
代码合并及压缩
当功能模块越来越多的时候，controller内就会有很多类似的代码了，而且每增加一个js模块，都需要在controller内注册并添加到cache中去，实在是很麻烦。
其实大家应该已经发现了，只要我们将模块放在同一的文件夹内，然后通过扫描这个文件夹，并使用模板来进行代码生成就可以免去这些麻烦的注册代码了，代码如下：
//模板
window.myApp= angular.module('myApp', []);
myApp.controller('mainController', function ($scope, cache, <%= modules.join(', ') %>){
<% modules.forEach(function (m){ %>
$scope.<%= m %> = <%= m %>;
cache.set('<%= m %>', <%= m %>);
<% }) %>
});
<% codes.forEach(function (c){ %>
<%- code %>
<% }) %>
//合并
var ejs = require('ejs');
var fs = require('fs');
var path = require('path');
var jsDir = 'js文件夹路径';
var codes = [];
var modules = [];
fs.readdirSync(jsDir).forEach(function (filename) {
if (filename.indexOf('.js') == -1)
return;
codes.push(fs.readFileSync(path.join(jsDir, filename), 'utf8'));
modules.push(filename.replace('.js', ''));
});
var tplCode = fs.readFileSync('模板路径', 'utf8');
codes.unshift(ejs.render(tplCode, {
modules: modules,
codes: codes
}));
fs.writeFileSync('整合后的js文件路径', codes.join('\r\n'), 'utf8');
这样我们便可以在js文件变化的时候，通过合并所有的js，但是这里要注意将功能模块的js和公用库的js放在不同的文件夹下，引用公用代码并不会去引用功能模块，因此不需要加入到cache中去，并在合并的时候通过额外的代码去拼接公用js。
通过以上的操作，我们只需要在页面上只引入一个js，这样开发起来也会比较方便，但是测试的时候，就略微麻烦。
在这里我建议将angularjs创建module和controller的生成代码独立放在一个生成模块中，并生成一个js(如：config)；将合并公用js和模块js放在另一个生成模块中；并在项目中添加一个诸如development的变量来标识是否为开发模式。
开发模式的时候，页面上引用生成的config及其他公用js和功能js；非开发者模式下，则引用合并且压缩后的js，示例代码如下:
<%
var app = process.app;
if (app.get('development')) {
%>
<script type="text/javascript" src="/js/config.js"></script>
<script type="text/javascript" src="/js/lib/cache.js"></script>
<script type="text/javascript" src="/js/main/user.js"></script>
<script type="text/javascript" src="/js/main/userAddress.js"></script>
<% }
else { %>
<script type="text/javascript" src="/js/myApp.min.js"></script>
<% } %>
2个代码生成的模块代码这里就不再写出来了，因此大致的代码上面都已经给出来了，其他的就靠大家自己根据实际情况去重构了，^_^。
压缩js脚本的代码也不写了，具体的可以查看文章开头的UglifyJS2的示例代码，需要注意的是except参数是不能少的，不然会将合并脚本内的angularjs的模块名和功能模块名替换成其他的简单变量，项目运行起来会出现错误。
结尾
由于近段时间都是使用angualrjs配合nodejs来进行开发的，开发中遇到的问题和解决的方案整理了一下跟大家分享一下，希望对大家有所帮助。
大致的代码基本上都有提供，其他的就要靠大家自己去编码了，这样才能将分享的东西转化成自己的。
今天的文章就到这里了，如果有什么错误、问题请留言给我，谢谢大家！
