angular项目总结——angular + browserify + gulp + bower + les

一眨眼，快三个月没有写博客了。一直在为自己没有写博客而懊恼，忙过这段时间，好好总结一下。

新项目主要是自己一个人在写，先搭建了一个初步的架构，用了我并不熟悉的angular，这个过程中，慢慢也熟悉了angular，同时也优化了自己的项目架构。

这两个多月里一直处在高强度的工作中，项目是一个面向用户的创作中心，涉及到数据、语音、图片、地图等等。

地图上的交互很复杂，由于项目需要还会同时用两种地图，一个谷歌一个高德，谷歌主要面向国外数据，高德面向国内数据，

两个地图可以任意切换，但是内容都要保持一致，并且最好能够相互补充，地图开发商的接口不一样，很多逻辑的实现方法也会不一样，

逻辑虽然是通的，但是适应每一个地图的代码却略有不同。这是这个项目比较难的一个地方。

使用angular后，前后端进行了分离，前端需要去调用后端接口，后端接口比较抽象，常常不能一次性拿到自己想要的数据，请求一个接口获取到内容之后往往还需要根据当前数据，

再次去请求另一个接口，前后端分离之后对前端的要求其实就更高了，同步明明可以很简单就解决的问题，异步之后就需要花费更多的逻辑去处理。

现在想想这个项目开发过程中会发生很多事情：

? ? angular 主要使用了扩展：?angular-ui-router、angular-bootstrap

? ? browserify管理打包js

? ? bower管理三方库

? ? gulp自动化构建项目

项目根目录如下：

? ??

?build文件夹是构建工具最后生成的部署代码，src是所有源代码，temp只是一些临时文件

? ?

源码根目录如下：

app.js注册了根模块：

引入src目录下的config.js、http.js，最后browserify会编译app.js，gulp输出到 build->app.js

存有所有img资源，

一些全局js放在js文件夹（例如：我放置了环境配置和配合rem的resize），

三方的css库、webfont和自己抽象的css，最后会把所有的less引入到app.less中，编译为一个app.css到build

?modules：

所有业务按模块写在modules里：

modules目录下有一个modules.less，所有模块里的less会被引入到modules.less里，common的app.less会引入此文件

modules.less

js代码按控制器、指令和服务划分，控制器控制页面和逻辑，公用的页面或者独立的插件抽离为指令，服务写后台请求接口

每个模块下同样有app.js，用来注册模块和引入当前模块下所有的js，最后编译成一个文件。

config控制路由

templates管理模块html，最后被打包到build（less会被打包到common的app.css里），如下：

test模块的app.js生成到build->modules->test->js->test.js，生成出的js我命名为模块的名字test.js，这样是为了在入口html引入js资源的时候，不想结尾看到的全是app.js，最终如下：