学习 AngularJS (一)

进一步看入 kityminder-editor 部分了, 打开示例文件 index.html, 开头就是引入三个著名 js 开源库:
jQuery.js, bootstrap.js, angular.js
这意味着我又得学习了解这些库都是干什么的了. 略知一二的 jQuery,bootstrap 可以稍后, 而 angular 是做什么的呢?

(TODO: angularjs 从菜鸟到专家: http://developer.51cto.com/art/201311/416334.htm )

打开 https://anglarjs.org(官网,英文版), 中文版是 www.apjs.net, 为了节省时间先看看中文版, 然后有需要再看英文官网吧.

其自我介绍: ANGULARJS (by Google), 为克服 HTML 在构建应用上的不足而设计!

(一般)是通过以下技术来解决静态网页技术在构建动态应用上的不足:
类库(如 jQuery等);
框架(如knockout, sproutcore, --- 都不知道...)

AngularJS 使用了不同(于以上)的方法, 通过使用称为标识符(directives, ?指令符,?描述符)的结构, 让浏览器能够
识别新的语法. 如 {{}} -- 数据绑定; 等(后面详细了解)

在构建一个 CRUD 应用时显得很"固执"... 只是起点, 你仍然能灵活变动.
AngularJS 的出众之处:
构建CRUD应用可用的: 数据绑定,基本模板标识符,表单验证,路由,深度链接,组件重用,依赖注入.
测试: 单元测试; 端对端测试; 模拟和自动化测试框架.
...

AngularJS 主要考虑的是构建 CRUD 应用... , 要了解什么适合用 AngularJS 构建(及什么不适合).

如游戏, 图形界面编辑器(等), 和CRUD 应用有很大不同, 就不适合用 angular
(问题: kityminder 很大程度上是图形处理, 为什么用 angular ? 也许某些界面部分也在一起? )

=== 开始学习写 hello-world ===

(官网说, 想了解 AngularJS 处理整个 HTML 页的细节, 请看 Bootstrap. (程序员会不会疯掉?))

按照所说谢了一个 Hello {{'World'}}! 网页, 打开浏览器, 果然 {{}} 中间内容展开为 World.

下面的例子演示 angularjs 双向数据绑定的概念...

=== AngularJS 应用解析 ===

分三个组成部分, 并映射到 MVC(模型-视图-控制器)设计模式:

模板(Template): 可给 html 添加新的元素,属性. (像模板语言?)

应用程序逻辑(Logic)和行为(Behavior): (开发者)用 js 定义的控制器. ...容易编写,测试,维护,理解.

模型数据(Data): 可能是 js 对象, 数组或基本类型. 待学习的新概念: angularjs 作用域对象.
AngularJS 通过作用域来保持 Data/UI 的双向同步.

此外 angular 提供的有用的服务特性:
1. 底层服务: 包括依赖注入, XHR, 缓存, URL路由, 浏览器抽象服务.
2. 可以扩展和添加自己特定的应用服务.
3. 这些服务方便于编写 WEB 应用.

用 {{}} 包围的表达式叫 Angular expression, 类似于 js 代码片段.

高级开发中, 可使用 bootstrap 手动引导 angularjs 应用...

下载 angular.js 从 github... 速度很慢...

=== Angular 的五个 Cool 特性 ===

http://www.gbtags.com/technology/javascript/20120717-AugularJS-features/

1. 数据双向绑定(MVC模式);
2. 模板; angular 编译器遍历dom生成directive(指令);
3. MVC, 吸收传统 MVC 基本原则, 更接近 MVVM; model 一般是简单的 js 对象;
viewmodel 是一个用来提供特别数据和方法从而维护指定view 的对象.
controller 定义行为; view 对应 html dom;
4. 依赖注入(DI);
5. 指令(Directives); 用来创建自定义的标签, 等.
额外的特性: 测试.

======

下篇接着学习了解.