文档章节

学习 AngularJS (一)

刘军兴
 刘军兴
发布于 2015/12/04 17:44
字数 874
阅读 200
收藏 3
点赞 0
评论 0

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

======

下篇接着学习了解.

© 著作权归作者所有

共有 人打赏支持
刘军兴
粉丝 54
博文 150
码字总数 226172
作品 0
昌平
[Angular Material完全攻略] Day 01 - 开始 & 简介

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

readilen ⋅ 05/21 ⋅ 0

Angular 6.0正式版发布,都有哪些新功能

点击关注异步图书,置顶公众号 每天与你分享IT好书 技术干货 职场知识 在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在...

异步社区 ⋅ 05/08 ⋅ 0

Angular 6正式版发布,都有哪些新功能

在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。除此之外,这次更新还包括框架包(@angu...

code_xzh ⋅ 05/05 ⋅ 0

【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878 ⋅ 05/19 ⋅ 0

[Angular Material完全攻略] Day 02 - 环境设定 & 安装 & Hello World

今天我们将开始正式迈入Angular Material的世界,要学习使用Angular Material打造高品质及高质感的网页,当然要从安装Angular Material套件开始,本篇文章就来介绍基本的Angular Material安装...

readilen ⋅ 05/21 ⋅ 0

Angular 6 服务端渲染之 udao 终章

先介绍下小朋友 udao,首先是一个开源项目,代码足够简单,其次是跟随 Angular 大小版本一起成长的项目,会定期更新所有依赖包以及兼容最新版本的写法 Github 地址也贴出来好多次了:github....

orangexc ⋅ 05/10 ⋅ 0

【Angular】之Angular环境搭建

前言 小编最近在学习angular的内容,万事开头难,完成了开头也便成功了一半。这句话小编在这次的学习实践之旅中,深有体会,下面小编就来讲一讲,angular环境搭建之旅吧! 一、环境搭建 1.下...

m18633778874 ⋅ 05/08 ⋅ 0

初学angular 看到网上有angular js 也有angular2 ,到angular官网发现最近版本是6了,那么现在大家说的angular js到底是什么啊?

初学angular 看到网上有angular js 也有angular2 ,到angular官网发现最近版本是6了,那么现在大家说的angular js到底是什么啊? angular2和现在官网的angular6 就是 angular js 只是版本不同...

Jordan裔 ⋅ 05/19 ⋅ 0

AngularJS 的 Material Design 风格框架 - AngularJS Material

AngularJS Material 是 AngularJS 框架的谷歌 Material Design 标准的实现。AngularJS Material 包含一组丰富的、可重用、经过充分测试并可访问的 UI 组件。 针对 Angular 2 或更高版本的实现...

匿名 ⋅ 05/15 ⋅ 0

想开发Angular项目,但是没有开发环境?使用Docker So Easy!

不管是的开发还是学习Angular,环境是一个很大的问题,大家要在自己电脑上搭建一个Angular的开发测试环境还是非常麻烦的,请大家自行百度“搭建Angular开发环境”。OMG,要安装一堆东西。 但...

麦兜搞IT ⋅ 05/21 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

编译安装apache2.4.33

1. 环境 编译安装apache2.4.33,错误 error: ld returned 1 exit status。 CentOS 7.2apr-1.6.3apr-util-1.6.1httpd-2.4.33 2. 编译报错 编译安装完 apr apr-util 之后,安装httpd-2.4.3......

周云台 ⋅ 20分钟前 ⋅ 0

jsonrpc-4j代码解析

解析文件 AutoJsonRpcServiceImplExporter JsonServiceExporter AutoJsonRpcServiceImplExporter 路径:com.googlecode.jsonrpc4j.spring.AutoJsonRpcServiceImplExporter AutoJsonRpcServi......

郭恩洲_OSC博客 ⋅ 29分钟前 ⋅ 0

百度搜索

from selenium import webdriver import time brower=webdriver.Firefox() brower.get('http://www.baidu.com') input=brower.find_element_by_id('kw') input.send_keys('中南大学') time.s......

南桥北木 ⋅ 35分钟前 ⋅ 0

tomcat 日志记录器

1、日志记录器是记录消息的组件 日志记录器需要与某个servlet 容器相关联 2、Logger 接口 共定义了5种日志级别:FATAL、ERROR、WARNING、INFORMATION、DEBUGGER setVerbosity 设置级别 setC...

职业搬砖20年 ⋅ 37分钟前 ⋅ 0

Thrift RPC实战(三) Thrift序列化机制

1.Thrift基础架构 Thrift是一个客户端和服务端的架构体系,数据通过socket传输; 具有自己内部定义的传输协议规范(TProtocol)和传输数据标准(TTransports); 通过IDL脚本对传输数据的数据结构...

lemonLove ⋅ 37分钟前 ⋅ 0

网站建设就要像2018世界杯的俄罗斯队大杀四方[图]

今天心情不错,因为昨天晚上观看了世界杯比赛,尤其是对俄罗斯队的大杀四方感到十分霸气侧漏啊,因此我联想到了自己的博客网站,我的博客是去年年底上线的,一直想建设一个关于读书和读后感作...

原创小博客 ⋅ 46分钟前 ⋅ 0

Greenplum 三节点安装教程(非root用户)

Greenplum 三节点安装教程(非root用户) 环境准备 安装vmware,装三台centos 虚拟机设置: 主机名 IP 内存 硬盘 node1 Xxx1 2G 80G node2 Xxx2 2G 80G node3 Xxx3 2G 80G CSDN下载greenplum...

仔仔1993 ⋅ 46分钟前 ⋅ 0

linux 信号机制

signal(SIGPIPE, SIG_IGN); TCP是全双工的信道, 可以看作两条单工信道, TCP连接两端的两个端点各负责一条. 当对端调用close时, 虽然本意是关闭整个两条信道, 但本端只是收到FIN包. 按照TCP协...

xxdd ⋅ 47分钟前 ⋅ 0

SpringWind

环境搭建和系统部署

颖伙虫 ⋅ 今天 ⋅ 0

vim命令用法

第五章 vim命令 vim和vi几乎是一样的,唯一的区别就是当编辑一个文本时,使用vi不会显示颜色,而使用vim会显示颜色。 vim有三个模式:一般模式,编辑模式,命令模式。 系统最小化安装时没有安...

弓正 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部