关于AngularJS 框架的使用都有哪些经验值得分享

Posted 2023-03-05

AngularJS 与 jQuery 等传统操作 DOM 的思想有所不同，

对于 jQuery 等，一般是先有完整 DOM 然后在这些 DOM 的基础上进行二次调教。
而 AngularJS 等框架则是 根据 数据模型 以及其对应的 DOM 模版，然后通过模版像搭积木那样组合页面。

显然的，前者在 SEO 上有天然优势；而后者，搜索引擎还只能拿到某个模版，而无内容。
暂时没想到有什么特别好的解决方案，或许，对于内容页，可以继续使用传统方式，而只在需要更多交互的地方应用 AngularJS，特别是在移动端应用上。

同理适用于各种 前端的 MVC 框架，后端只要为前端提供数据接口，而不再需要为其拼接 html.

## 模块化

AngularJS 也是遵循 AMD 的。（AMD 是啥，参考：使用 AMD、CommonJS 及 ES Harmony 编写模块化的 javascript）

虽然它也可以按照传统代码方式来写（其首页介绍的用法 AngularJS — Superheroic JavaScript MVW Framework），但是，既然都提供了这么一种模块的方法，为何不用上呢

angular.module('app', [
'moduleA',
'moduleB',
])
.controller('MainCtrl', [
'$scope',
function ($scope)

]);

而且，这种写法还可以方便做代码的合并与压缩，在后面 Grunt 自动化 一节中，就会提到使用 Nodejs/Grunt 来自动的做这些事情。

## 可复用模版 or 业务逻辑模版

今年 Google 开发者大会中 提到的 Polymer（Welcome - Polymer）
这货让人感觉像是 Angular Directives 的进化。

而 Directives 做的事，就是把一堆 DOM 封装为一条或者一组 自定义的 HTML标签，作为可复用的模版，以供组装业务调用。 Demos 可参看：Angular directives for Twitter's Bootstrap

当然，为了方便修改，很多时候在做 directive 的时候需要将 template 用 templateUrl 代替，
不用担心文件的碎片化，不利于前端加载 Grunt 自动化 一节 会提到如何合并这些碎片化的 模版。

Directives 是作为可复用的模版，
而业务逻辑则是一般是一个业务对应一个 html 及其的 controller. 参考技术A 1. 面向数据编程
使用angularjs的思路简单：1）界面元素绑定数据，2）操作处理数据

我用这个思路编写了一个冒泡算法的可视化，实现十分简单，想清楚如何绑定数据后，接下来的工作就只是操作处理数据了。
冒泡排序算法的可视化

相比如果使用jQuery，jQuery的思想是面向界面元素编程，简单的说如何定位和操作界面（网页）元素，大量精力放在了界面元素的操作上，而应该是重点的数据处理却在这个思路体系中占了很小的位置。

2. 可测试模块化编程
这个思路有两点，1）模块化 2）可测试

angularjs虽然可以很傻瓜式的编程，但是更加推荐的还是模块化编程，而且是可测试模块化编程。它的教程也一直把如何测试模块的方式也写了进去。

angularjs
刚出来的时候，最诟病的地方，就是测试困难，也是backbone和其他框架使用者对它的质疑。后来angularjs
team花了很大的精力去解释angularjs如何测试，如何依赖注入，如何提高angularjs的可靠性。后来把官方网站把所有的例子上，都包括了
相应的测试代码。很好的回应了难以测试的质疑。

angularjs，本身有很多模块，而且推荐以模块的形式编写angularjs插件。很大一块是教人如何写service，route和Declarative ， 这些之间又是相互独立的模块，有可以把这些模块有机的组合在一起。

3. 前端模板引擎
angularjs本身是很好的前端模板引擎，未来发展就是后端的mvc产生json视图（view）作为前端的模型（model），而整个前端的mvc是后端的视图（view），中间通信就靠json。这样前后端高度解耦，可以完全达到模块化设计的要求。

这样前端只要知道后端产生数据的结构，给了一些数据样本，就可以直接开发了，而无需等待后端代码完成。 参考技术B AngularJS 与 jQuery 等传统操作 DOM 的思想有所不同，

对于 jQuery 等，一般是先有完整 DOM 然后在这些 DOM 的基础上进行二次调教。
而 AngularJS 等框架则是 根据 数据模型 以及其对应的 DOM 模版，然后通过模版像搭积木那样组合页面。

显然的，前者在 SEO 上有天然优势；而后者，搜索引擎还只能拿到某个模版，而无内容。
暂时没想到有什么特别好的解决方案，或许，对于内容页，可以继续使用传统方式，而只在需要更多交互的地方应用 AngularJS，特别是在移动端应用上。

同理适用于各种 前端的 MVC 框架，后端只要为前端提供数据接口，而不再需要为其拼接 HTML.

## 模块化

AngularJS 也是遵循 AMD 的。（AMD 是啥，参考：使用 AMD、CommonJS 及 ES Harmony 编写模块化的 JavaScript）

虽然它也可以按照传统代码方式来写（其首页介绍的用法 AngularJS — Superheroic JavaScript MVW Framework），但是，既然都提供了这么一种模块的方法

angular.module('app', [
'moduleA',
'moduleB',
])
.controller('MainCtrl', [
'$scope',
function ($scope)

]);

而且，这种写法还可以方便做代码的合并与压缩，在后面 Grunt 自动化 一节中，就会提到使用 Nodejs/Grunt 来自动的做这些事情。

## 可复用模版 or 业务逻辑模版

今年 Google 开发者大会中 提到的 Polymer（Welcome - Polymer）
这货让人感觉像是 Angular Directives 的进化。

而 Directives 做的事，就是把一堆 DOM 封装为一条或者一组 自定义的 HTML标签，作为可复用的模版，以供组装业务调用。 Demos 可参看：Angular directives for Twitter's Bootstrap

当然，为了方便修改，很多时候在做 directive 的时候需要将 template 用 templateUrl 代替，
不用担心文件的碎片化，不利于前端加载 Grunt 自动化 一节 会提到如何合并这些碎片化的 模版。

Directives 是作为可复用的模版，
而业务逻辑则是一般是一个业务对应一个 html 及其的 controller. 参考技术C 国内的确用的不多，但我们是一个，规模算大，用的人100左右，代码100w行以上，以后还会增加。十多个系统，金融类核心系统。经验个人积累一点，可能和做互联网应用尤其是spa不太一样。1.业务类系统，赶快用吧，代码量少一半一般，越复杂优势越明显2.性能很多坑，网上的方案不够用的，ie8下很多不能直接theangularway，延迟加载是王道，多次bootstrap也常有，直接改源码常有3.ui控件太少，完整套的要团队自己开发维护，个性化需求更需要从最底层定制4.官方的检验机制要吃透，复杂检验需求变化很多，要设计足够灵活，用watch$error方式又有性能坑5.指令是个好东西，重客户端组件化的方向，要理解透，用好6.模型设计上，服务端的贫血，充血之分这里可以借鉴。另外模型分类命名空间很重要如果你的页面不复杂，就没那么多讲究了最后，seo的，建议html两套，angular有类似工具 参考技术D AngularJS 与 jQuery 等传统操作 DOM 的思想有所不同，

对于 jQuery 等，一般是先有完整 DOM 然后在这些 DOM 的基础上进行二次调教。
而 AngularJS 等框架则是 根据 数据模型 以及其对应的 DOM 模版，然后通过模版像搭积木那样组合页面。

显然的，前者在 SEO 上有天然优势；而后者，搜索引擎还只能拿到某个模版，而无内容。
暂时没想到有什么特别好的解决方案，或许，对于内容页，可以继续使用传统方式，而只在需要更多交互的地方应用 AngularJS，特别是在移动端应用上。

同理适用于各种 前端的 MVC 框架，后端只要为前端提供数据接口，而不再需要为其拼接 HTML.