使用Angular开发“云平台控制台”的实践总结

CSDN的阅读体验太差，建议大家移步到https://segmentfault.com/a/1190000004525913 阅读文章

前言

笔者目前在互联网公司负责开发私有云平台。云平台控制台，是一个典型的管控CRUD系统，用于管理各种IaaS资源。为了让前端能达到仿客户端体验，同时保障代码架构清晰规范，易维护，最终我们选择了Angular（1.X）`作为云平台控制台的前端框架。本文主要围绕Angular，介绍我们在开发控制台过程中的点点滴滴。

1 为什么选择Angular

1.1 轻松构建SAP(single application page，单页面应用)

可以说，这是我们最终选择了Angular的重要原因，如果你希望构建一个结构清晰，可维护，开发效率高，体验好的单页应用，Angular是相当不错的一个框架。

单页面应用的魅力

什么是单页面应用？Single Page Application指一种基于web的应用或者网站，页面永远都是局部更新元素，而不是整页刷新。当用户点击某个菜单或者按键时，不会跳转到其他的页面，前端会从后端获取对应页面的数据而不是html，之后在页面中需要更新内容的地方，局部动态刷新，而如果是多页网站，当用户访问不同的页面时，服务器会直接返回一个html，然后浏览器直接将这个html展现给用户。现在大部分云控制台，都是单页应用架构，单页应用能带来一种更近似客户端，而不是网页的体验。
单页面应用网站，在体验方面，具有如下优点：
1. 做“页面跳转”时，永远都是局部动态刷新，用户不会感觉整个屏幕闪了一下，而是需要变化的区域做了局部刷新。例如两个不同的页面，假设页面元素都是一样的，只是元素中的文字不一样（例如每个页面都有一个面包屑，一排按钮及一个表格，这几个元素的布局也是一样的），当用户跳转到另外一个页面时，会看到整个页面并没有重新渲染，只是文字发生了变化。简单地说，这有点类似你在使用一个app，永远都是局部发生变化，你见过哪个app，当你点击到不同的功能视图时，整个屏幕会白屏闪一下的么？
2. URL可收藏，可回退。如果浏览器的url一直不变，那还不能称为真正的单页应用。不同的模块，不同的资源页面，对应的url是不一样的。当用户跳转到另外的功能时，会发现url会变成对应的url；通过回退键，也可以回到之前浏览的页面。这个特性有什么用呢？如果url不会随着功能而变化，当用户刷新当前页面时，就会回到之前的默认页面，而不是预期的当前功能页面，同样的，url也不具备可收藏性，因为点开之前收藏的url，永远都是网站的默认页面。这对一些强交互的管控系统来说，体验是不好的。
3. 功能切换时快速流畅。快速流畅主要因为两个原因：1、页面都是局部刷新，从用户感官来说更快；2、和后台通信的内容，都是数据，而不是页面模板，请求量更少；而传统的网站，在访问不同页面时，服务端返回的是html，体积更大，而且还需要一直重复加载js、css文件。
4. 因为网站的单页化，可以更好地使用一些全局类的交互（做页面切换时，可以一直保持不变的交互）。例如，页面上需要显示某次耗时操作的进度，例如上传文件进度，耗时操作的当前状态等，你可以在页面最右侧固定显示进度。当用户访问单页应用时，他会明白，当他点击其他模块时，这个右侧的通知栏不会消失，会固定显示。而如果是多页网站，用户则会困惑，担心自己跳转到其他页面后，这个进度通知就会消失。

为什么Angular是构建SAP的利器

1. SAP对于代码分层，结构清晰有更高的要求，而Angular是一个MV**框架，其自身的约定，减少了我们写出“一锅粥”代码的可能性（在下面讨论“编写更易维护的代码”时会详述）
2. Angular的著名第三方组件ui router，是一个控制页面路由的组件，它支持我们快速搭建单页应用（Angular本身的路由功能也可以，但功能会稍微弱一些）

1.2 编写更易维护的代码

很多人经常会抱怨，不同水平的人凑在一起写js，到最后项目经常就是一锅粥，同一个js文件里面，各种各样的逻辑都混在一起，要增删一个功能，都简直是恶梦。无规矩不成方圆。作为一个框架，Angular无疑能大大改善这种状况，使得项目整体的分层明了，职责清晰。

关注点分离

关注点分离是Angular的一大特点。所谓关注点分离，指的是各个逻辑层职责清晰，例如，当你需要修改甚至替换展现层时，你无需去关注业务层是怎么实现的。在Angular中，服务层（Ajax 请求）- 业务层（Controller）- 展现层（HTML 模板）- 交互层（animation）这些都有对应的基础组件。不同组件职责不同，你也很难将本属于B组件的职责放到A组件上去实现。举几个例子：
1. html及controller需要协同工作，但职责分明。视图、交互层面的逻辑，只能放到html模板中，controller只能用于数据初始化，它没有办法去操作dom元素（不用jquery的话）。这一点非常重要，传统的js代码，经常会出现的情况，就是js里面会有大量dom操作的逻辑，同时还有大量数据操作相关的逻辑，这些逻辑耦合到一起，当需要单独重构数据层或者视图层时，都会捉襟见肘，同时，由于代码量的迅速膨胀，维护起来也会很麻烦。
2. 你无法将后台通信逻辑放到controller中实现，而要放到factory中。后台通信逻辑，一般要做成公用的。而由于controller之间是不能相互调用的，所以你也不可能将后台通信逻辑放到其中一个controller，然后其他controller来调用这个controller暴露的接口。你唯一的办法，就是将后台通信逻辑放到factory或者service中。
3. filter及directive看似都可以用于数据转换，但