文档章节

学习 AngularJS (一)

刘军兴
 刘军兴
发布于 2015/12/04 17:44
字数 874
阅读 229
收藏 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); 用来创建自定义的标签, 等.
额外的特性: 测试.

======

下篇接着学习了解.

© 著作权归作者所有

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

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

开元中国2015
2018/11/09
0
0
[Angular Material完全攻略] Day 01 - 开始 & 简介

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

readilen
2018/05/21
0
0
高手问答第 143 期 — 重新认识前端开发利器 Angular

OSCHINA 本期高手问答(2017 年 2 月 28 日 — 3 月 6 日)我们请来了 @大漠穷秋 为大家解答 Angular 相关的问题。 @大漠穷秋 章小飞,Google Angular developers PM,目前负责 Angular 在国...

局长
2017/02/27
6.8K
54
angular.js 1.3.17/1.4.2 发布

其中:1.3.17 更新内容如下: Bug Fixes +- **$browser:** prevent infinite digest if changing hash when there is no hashPrefix + ([61a3fb67](https://github.com/angular/angular.js/......

oschina
2015/07/07
2.6K
9
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.1K
26

没有更多内容

加载失败,请刷新页面

加载更多

rabbitMQ 在spring 的使用

一、准备工作 maven依赖 <dependency>  <groupId>com.rabbitmq</groupId>  <artifactId>amqp-client</artifactId>  <version>4.0.2</version></dependency> <dependency......

狼王黄师傅
昨天
1
0
Android JNI总结

0x01 JNI介绍 JNI是Java Native Interface的缩写,JNI不是Android专有的东西,它是从Java继承而来,但是在Android中,JNI的作用和重要性大大增强。 JNI在Android中起着连接Java和C/C++层的作...

天王盖地虎626
昨天
1
0
大数据教程(11.8)Hive1.2.2简介&初体验

上一篇文章分析了Hive1.2.2的安装,本节博主将分享Hive的体验&Hive服务端和客户端的使用方法。 一、Hive与hadoop直接的关系 Hive利用HDFS存储数据,利用MapReduce查询数据。 二、Hive与传统数...

em_aaron
昨天
3
0
跟我学Spring Cloud(Finchley版)-15-Hystrix监控详解

Hystrix提供了监控Hystrix Command的能力,本节来详细探讨。 监控端点与数据 应用整合Hystrix,同时应用包含spring-boot-starter-actuator 依赖,就会存在一个/actuator/hystrix.stream 端点...

周立_ITMuch
昨天
7
0
day26:shell题

1、 判断当前主机的CPU生产商,其信息在/proc/cpuinfo文件中vendor id一行中。 如果其生产商为AuthenticAMD,就显示其为AMD公司; 如果其生产商为GenuineIntel,就显示其为Intel公司; 否则,...

芬野de博客
昨天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部