文档章节

学习 AngularJS (一)

刘军兴
 刘军兴
发布于 2015/12/04 17:44
字数 874
阅读 217
收藏 3

进一步看入 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); 用来创建自定义的标签, 等.
额外的特性: 测试.

======

下篇接着学习了解.

© 著作权归作者所有

共有 人打赏支持
刘军兴
粉丝 55
博文 185
码字总数 227015
作品 0
昌平
私信 提问
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
11/09
0
0
AngularJS 中文资料+工具+库+Demo 大搜集

中文学习资料: 中文资料且成系统的就这么多,优酷上有个中文视频。 http://www.cnblogs.com/lcllao/archive/2012/10/18/2728787.html 翻译的官方的Guide http://www.ituring.com.cn/miniboo...

liaolzy2
2015/05/31
0
0
[Angular Material完全攻略] Day 01 - 开始 & 简介

转载 从Angular第2版正式release后,根据全球最大工程师讨论区StackOverflow的统计,从2016开始的Angular讨论度就不断窜升,甚至超越了React,直到了2017年,甚至摆脱了前一代Angularjs的阴影...

readilen
05/21
0
0
7本学习AngularJS的免费电子书

电子书可以给我们一个有结构有组织的方式学习新的知识。学习 AngularJS也一样。现在最棒的事情莫过于电子书中提供大量实践练习,帮助我们理解各种方面。 让我们度下面7本书探究 AngularJS 吧...

咲晚杍
2015/01/28
0
0
Angular中ui-grid的使用详解

Angular中ui-grid的使用   在项目开发的过程中,产品经理往往会提出各种需求,以提高用户体验。最近,项目中用到的表格特别多,而且表格的列数和行数也超多。为了让用户浏览更爽,产品经理...

半指温柔乐
08/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Linux学习-1031(rsync同步工具 上)

10.28 rsync工具介绍 10.29/10.30 rsync常用选项 10.31 rsync通过ssh同步 一、 rsync工具介绍 rsync是一个同步工具,在日常的运维中常会用到。它可以本地同步,也实现可以远程两台机器同步。...

wxy丶
15分钟前
1
0
python实战一期:第一天

1. 为什么学习python 1.1 为什么要学Python? Python第一是个非常牛B的脚本语言,能满足绝大部分自动化运维的需求,又能做后端C/S架构,又能用WEB框架快速开发出高大上的Web界面,只有当你自...

laoba
17分钟前
2
0
Java并发编程学习三:线程同步的关键字以及理解

上篇文章中介绍了Java线程的带来的问题与内存模型中介绍了线程可能会引发的问题以及对应Java的内存模型,顺带介绍了Volatile和Sychronized关键字。今天对Java中涉及到的常见的关键类和关键字...

JerryLin123
24分钟前
0
0
我用代码来给你们分析一个赚钱的技巧

赚钱是个俗气的话题,但又是人人都绕不开的事情。我今天来“科学”地触碰下这个话题。 谈赚钱,就会谈到理财、投资,谈到炒股。有这样一个笑话: 问:如何成为百万富翁? 答:带一千万进入股...

crossin
24分钟前
1
0
spring MatchingBean应用

1、编写接口FactoryList import java.util.List;public interface FactoryList<E extends MatchingBean<K>, K> extends List<E> { E getBean(K factor); List<E> getBeanLi......

重城重楼
37分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部