我是如何基于angular+requirejs+node做SPA项目架构的

ddlddx0000

　　本文章已经录制视频，地址是：http://v.youku.com/v_show/id_XODI3MjYyODI0.html
　　前端这两年技术飞速发展，各种优秀框架层出不穷。本文不是讨论各框架的比较，也不讨论为什么我要用angular，而不用backbone；不讨论为什么用requirejs，而不用browserify，seajs等。只是介绍平常我是怎么进行项目的前端架构。

一个成熟项目架构中应该具有哪些功能

　　* 快速的项目生成器——快速生成项目主体架构，单步实现controller，单步实现view，实现根据router自动生成view，controller
　　* 静态资源的管理——基于bower
　　* css动态编译——基于sass，compass实现css嵌套写法，跨浏览器实现css前缀等。
　　* 解耦，基于模块开发——基于requirejs
　　* mv*框架——基于angular实现view-model双向绑定。
　　* 代码管理——git管理代码版本，git submodule实现公共模块引入。
　　* 本地mock数据——基于express扩展，可支持get及post请求模拟
　　* 打包压缩上线——基于npm模块进行打包压缩，修改后时时刷新页面

项目生成器
　　项目生成器我已经发布为npm公共模块，地址是：
　　https://www.npmjs.org/package/generator-webbp
　　注意：因为项目生成器中默认你电脑支持sass，compass编译所依赖的环境，如果项目中最后跑步起来，请确认是否因为这个原因导致。当然有任何问题，欢迎加我的群讨论qq:236949405。
　　* 快速生成项目架构：



yo webbp

　　根据提示操作即可。生成后，打开项目目录，1. npm install   2.grunt 即可自动打开浏览器看到项目
　　* 单步生成controller



yo webbp:controllers detail.about.contact

　　即可生成如下文件：



|controllers
|detail
|about.js
|contact.js
detail.js

　　其中detail.js中会自动加载about.js及contact.js
　　*单步生成view



yo webbp:views detail.about.contact

　　生成如下文件：



|views
|detail
|about.html
|contact.html
detail.html

　　*生成routes，可自动关联view及controller



yo webbp:routess detail.about.contact

　　此命令会自动调用controller，及view命令。
　　而生成routers代码为：



define(['./states', '../cons/simpleCons'],
function (stateModule, simpleCons) {
stateModule.config(
['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$stateProvider.state("detail", {
abstract: true,
resolve: {
instanceBasicPromise: [ '$stateParams', function( $stateParams){
}]
},
url: "/detail",
controller: 'detailController',
templateUrl: simpleCons.VIEW_PATH + 'detail.html'
})
.state("detail.about", {
url: "/about",
views: {
detail: {
templateUrl: simpleCons.VIEW_PATH + 'detail/about.html',
controller: 'detail.aboutController'
}
}
})  
}
]);
})

　　其中controller及view文件都会自动生成。

静态资源的管理——基于bower
　　项目中引入的angularjs，jquery，bootstrap等基于bower进行依赖管理。
　　另外，我还发布了一个基于angular-form的扩展叫simple-form，地址是：https://github.com/cc17/angular-simple-form。是目前为止我觉得使用最方便的angular-form，基于form的model配置，并实现form-data表单提交数据和view的双向绑定。谁用谁知道，有问题欢迎提bug给我。

css动态编译——基于sass，compass实现css嵌套写法，跨浏览器实现css前缀等
　　这个已经不属于新姿势了，大家都知道为什么要用这个。如果你不知道这个，你肯定知道less吧
　　* 实现嵌套写法



.block-a{
.block-b{
.block-c{}
}
}

　　* 实现跨浏览器写法
　　该死的浏览器各种前缀，真是要醉了的节奏啊。用compass只要这么写就会编译成各浏览器识别的css，是不是很奇妙。



div{
@include border-radius(4px);
}

　　* 跟写js一样写css，定义变量是不是很爽
　　具体怎么用，大家去google吧。这个很简单。　

解耦，基于模块开发——基于requirejs　
　　很高兴的是前端代码越来越多了，我们再也不是只会切页面的美工了，很不幸的是我们永远不知道自己几点下班了。哎
　　这么多代码，我们再也不能只在一个 bigbig.js文件里放置了。怎么办呢，对分开，解耦，模块化开发。  a.js, b.js ,c.js,怎么处理依赖？ seajs，requirejs，还有个browserify等等，你还可以自己写个简单的。具体应该用那个，不讨论，我就用requirejs。

mv*框架——基于angular实现view-model双向绑定
　　都说不要重复造轮子了，还是有各种牛逼的新框架造出来。也就说说而已，不创新，哪有技术的发展。各种框架优劣也不讨论，我的生成器是基于angular的。还要支持ie6，7的我只能说句抱歉了。使用angular有什么好处：双向绑定，依赖注入，mvc，directive声明式的扩展html标签。。。太多了。用了之后你才惊讶发现，擦，原来写好多行的代码 ，几行就搞定。妈妈再也不用担心我加班了——不过实际上，我们也没早下班哈。

代码管理——git管理代码版本，git submodule实现公共模块引入
　　git，svn有什么区别呢？



1.GIT是分布式的，SVN不是
2.GIT把内容按元数据方式存储，而SVN是按文件
3.GIT分支和SVN的分支不同
4.GIT没有一个全局的版本号，而SVN有：
5.GIT的内容完整性要优于SVN

　　另外github上有太多好东西，所以git用的人是越来越多了。
　　另外git还有个submodule的东西挺好用的。假如你有多个子项目，需要将通用的组件提取出来，submodule很适合。

本地mock数据——基于express扩展，可支持get及post请求模拟
　　前后端分离，协同合作开发，提高效率，但是有个问题，我们需要本地模拟后端的数据接口。在不会nodejs之前，我用的是wamp框架，本地启动server服务。现在nodejs发展这么迅速，各种自动化工具都可以基于nodejs开发。所以我在这个代码生成器中基于express扩展，实现对get和post请求mock。另外还可以模拟接口延时。

打包压缩上线——基于npm模块进行打包压缩，修改后时时刷新页面
　　最后一个问题，项目开完后，需要打包压缩上线。这也是自动化的，我们只需要在生成的项目中grunt build，最后把这个build文件发布到线上服务器即可。
　　总结：其实说了很多废话，总的来说，我希望这个项目模板生成器可以满足你80%以上开发需求。simple-form也希望大家试用下，给我提bug。就这样把，越写越不想写，因为感觉涉及的知识点太多，如果往下写就没边了。