文档章节

学习 AngularJS (一)

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

======

下篇接着学习了解.

© 著作权归作者所有

共有 人打赏支持
刘军兴
粉丝 54
博文 184
码字总数 226359
作品 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
Angular 6.0正式版发布,都有哪些新功能

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

异步社区
05/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

基于TP5的微信的公众号获取登录用户信息

之前讲过微信的公众号自动登录的菜单配置,这次记录一下在TP5项目中获取自动登录的用户信息并存到数据库的操作 基本的流程为:微信设置自动登录的菜单—>访问的URL指定的函数里获取用户信息—...

月夜中徘徊
今天
0
0
youTrack

package jetbrains.teamsys.license.runtime; 计算lis package jetbrains.ring.license.reader; 验证lis 安装后先不要生成lis,要把相关文件进行替换 ring-license-checker-1.0.41.jar char......

max佩恩
今天
0
0
12.17 Nginx负载均衡

Nginx负载均衡 下面的dig看到可以返回2个IP,就是解析出来的IP,这样我们可以做负载均衡。 dig www.qq.com 1.vim /usr/local/nginx/conf/vhost/fuzai.conf 2.添加如下配置 upstream qq //定义...

芬野de博客
今天
0
0
SSE(Server Send Event 服务端发送事件)

package com.example.demo.controller;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframe......

Canaan_
今天
0
0
jvm调优

1.jvm运行模式 client模式:启动快,占用内存少,jit编译器生成代码的速度也更快. server模式:主要优势在于代码优化功能,这个功能对于服务器应用而言尤其重要. tiered server模式:结合了client与...

Funcy1122
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部