用“MEAN”技术栈开发Web应用.docxVIP

用“MEAN”技术栈开发Web应用前言不知何时突然冒出“MEAN技术栈”这个新词，听起来很牛逼的样子，其实就是我们已经熟悉了的近两年在前端比较流行的技术，Mongodb、Express、AngularJs、Nodejs，由于这几项技术涵盖了从前端到后端再到数据库，可以用他们完整的开发一个Web应用了，所以成了一个非常牛逼的组合，颇有当年LAMP的气势。前端要从切图仔迈向全栈的路上，这几门技术必须得有所涉猎。本系列文章利用自己虚构的一个小项目为例，对“使用MEAN技术栈开发Web应用”做一个入门级的介绍。AngularJs的争议Angular，简称ng，是Google出品的优秀框架，在2013~2014年大红大紫，但是国内好像慢一拍，我从2015年才看到使用ng的项目大量出现。ng自出现伊始就有人诟病太难上手了，完全不同的开发方式，团队开发更是不知道如何组织代码。不过随着jQuery这位老大哥逐渐被抛弃，大家开始慢慢接受mvvm这样的编程思维。然而一个不好的消息是，ng团队打算重构的Angular2.0版本要发生重大变革，与1.0不能同日而语，虽然官方有1.0向2.0迁移的方案，但额外的工作总是不太好的，而且使用2.0还要付出更多的学习成本。再加上今年又有React这个实力派雄起，ng的风头顿时被抢过去了，人们又开始研究React下的编程方式。不过我估计react的真正实用也得等到一两年后。眼下Angular1.x也仍然是一个不错的选择。尽管有2.0的变革，但是1.4还是一个稳定版本，我们使用稳定版本肯定是不会有问题的。所以我的结论是，但用无妨，不会存在白学了这种事情，就算将来angular1.x废弃了，你学到的编程思维还是在的。本文讨论如何使用AngularJs进行前端的架构，对于ng的基础知识不做讲解，需要了解的同学可以看我之前写过的一个系列（点击查看）。练手项目简介为了系统的学习“MEAN”技术栈，我虚构了一个小项目，先做一个介绍。QuestionMaker，是一个用于生成调查问卷的系统，用户可以编辑试题（选择题、填空题），并可以实时预览编辑结果。然后还可以编辑一份试卷，为试卷添加试题，然后保存为一分完整的调查问卷。有点类似于调查派。先上一张截图吧：项目的功能主要是CRUD操作，所以非常适合angular的应用场景，双向绑定对于实现实时预览这样的功能简直是信手拈来。项目的前后端是完全分离的，后端不渲染页面，只提供数据接口，前端使用ng的动态模板来渲染页面，通过ajax请求来获取所需数据。项目我已经开源到github，有兴趣的同学可以查看：/Double-Lv/QuestionMaker前端目录结构用ng来构建一个项目应该如何安排目录结构呢？为了不人工增加复杂度，我这里没有用bower来管理依赖库，也没有其他文章中介绍的那样用yeoman来生成项目，只是单纯的手动来创建目录，这样可以把我们的注意力集中到项目的核心上，目录结构是这样的：前端的代码都在src目录下，包括入口文件index.html，这样方便我们后续做合并压缩等编译工作，编译后的文件可以一并放入dist目录下。首页index.html这是项目的入口页面，其实就是一个大容器，在这里加载所有的js和css文件，然后提供一个视图容器就够了，因为从这个页面以后，我们页面就不再会有跳转，全部是通过前端路由来做局部刷新，首页的代码非常精简：Question?Maker?Question?Maker?入口文件app.js有了入口页面，还得有一个js的启动入口，就是这个app.js了，在这里它只做了两件事情：1. 启动angular，代码只有一行：?var?app?=?angular.module(QMaker,?[ui.router]);?我们拥有了一个名为app的全局模块。这里把ui.router给注入了，因为我们整个应用都用ui-router来做路由，后面会做详细介绍。2. 把ui-router的$state和$stateParams服务挂到$rootScope上，这样我们在后面所有的模块中，都能够访问到路由参数，不必在每个地方都注入一次了。代码也是相当简单：app.run(function($rootScope,?$state,?$stateParams)?{?$rootScope.$state?=?$state;?$rootScope.$stateParams?=?$stateParams;?});?控制器合集controllers.jscontroller.js里面是所有的controller定义，由于这个项目比较小，而且反正最后都要合并，所以就都放在一个文件里了，这样可以使用链式写法app.controller(a, ...).controller(b, ...)，