AngularJs 构建复杂应用（一）

近年来前端框架如雨后春笋，有革新的reactjs，有轻巧的backbone，有严肃的emberjs，当然也有强大的angularjs。 笔者写过一些demo后觉得angular比较适合生产。有人吐槽说angular会损耗资源，其实并不是什么逻辑的结论，控制好双向绑定和规划化代码，怎么可能让浏览器跑挂了。最近在考虑把AngularJs应用到一个比较复杂的生产项目，做了一些探索，发现angular是适用于大型项目的。成功的例子有worktile，apigee等。

首先需要考虑的是项目结构，先列出当前使用的文件结构方式：

-core
-helpers
-models
-serevices
-widgets
-modules
-app
-controllers
-widgets
-routers
-template
-themes
-app.js

简单介绍一下为什么这样处理：

（1）core：扩展核心
主要为了通过注入的方式扩展angular，例如我构造了一个model.js用于处理数据。Angular最诱人的一个特性就是注入，无处不在的注入让一切看起来都是可扩展的。

（2）helpers：封装工具脚架
我们经常需要在项目中使用各种扩展的函数，例如截取字符串，处理日期，操作数组等，如果这些东西散落各处非常不利于维护。总需要找个地方把他们放在一起，并且分好类，helpers这个目录就是他们的归宿了。

（3）models：数据模型
angular的model不是常规MVC里面的Model，因为它不具备结构。我希望实现ORM，以方便操作。例如
var lingxuan = new user();
lingxuan.setEmail(‘lingxuan’);
lingxuan.update();
常规的可能是以下的写法：
var lingxuan = {email: ‘lingxuan630@gmail.com’}
$.ajajx({
data: lingxuan
……
})
对比起来使用Model是多么优雅的实现方式呀，比services还要适合。

（4）service: 服务层
对于这一层没有什么好讲了，常规的service层，封装各种业务操作。

（5）widgets：组件库
那些赞美reactjs的人总喜欢提及组件化，reactjs放大了组件化的概念，其实angular很好地支持用组件方式组织界面。只要你喜欢，可以把header封装到directives，可以把footer封装到directives，一切都可以封装成挂件。我很喜欢directives，甚至觉得要比reactjs更加简洁，更加优化，尤其是组件之间的通讯更加流畅。

（6）modules：模块
一个大型项目可能有很多模块，有PC用户端，有管理员端，甚至还有手机端等等，一个合理的结构必须最大程度地让模块做独立的工作，让公共的东西很好地抽象出来。module里面会存放不同模块的router，controller，template等。

我已经用上述文件结构组织了两个项目，基本可以满足我的需要，不过日后仍然有可能会做一些改动。

下一篇会介绍anglar的一些最佳实践。