AngularJS2.0教程(一)快速上手之基础知识
Why Angular2
Angular1.x显然非常成功,那么,为什么要剧烈地转向Angular2?
性能的限制
AngularJS当初是提供给设计人员用来快速构建HTML表单的一个内部工具。随着时间的推移,各种特性 被加入进去以适应不同场景下的应用开发。然而由于最初的架构限制(比如绑定和模板机制),性能的 提升已经非常困难了。
快速变化的WEB
在语言方面,ECMAScript6的标准已经完成,这意味着浏览器将很快支持例如模块、类、lambda表达式、 generator等新的特性,而这些特性将显著地改变JavaScript的开发体验。
在开发模式方面,Web组件也将很快实现。然而现有的框架,包括Angular1.x对WEB组件的支持都不够好。
移动化
想想5年前…现在的计算模式已经发生了显著地变化,到处都是手机和平板。Angular1.x没有针对移动 应用特别优化,并且缺少一些关键的特性,比如:缓存预编译的视图、触控支持等。
简单易用
说实话,Angular1.x太复杂了,学习曲线太陡峭了,这让人望而生畏。Angular团队希望在Angular2中将复杂性 封装地更好一些,让暴露出来的概念和开发接口更简单。
Rob Eisenberg / Angular 2.0 Team
ES6工具链
要让Angular2应用跑起来不是件轻松的事,因为它用了太多还不被当前主流浏览器支持 的技术。所以,我们需要一个工具链:
001
Angular2是面向未来的科技,要求浏览器支持ES6+,我们现在要尝试的话,需要加一些 垫片来抹平当前浏览器与ES6的差异:
systemjs - 通用模块加载器,支持AMD、CommonJS、ES6等各种格式的JS模块加载
es6-module-loader - ES6模块加载器,systemjs会自动加载这个模块
traceur - ES6转码器,将ES6代码转换为当前浏览器支持的ES5代码。systemjs会自动加载 这个模块。
初识Angular2
写一个Angular2的Hello World应用相当简单,分三步走:
1. 引入Angular2预定义类型
import {Component,View,bootstrap} from "angular2/angular2";
import是ES6的关键字,用来从模块中引入类型定义。在这里,我们从angular2模块库中引入了三个类型: Component类、View类和bootstrap函数。
2. 实现一个Angular2组件
实现一个Angular2组件也很简单,定义一个类,然后给这个类添加注解:
[@Component](/user/Component)({selector:"ez-app"})
[@View](/user/View)({template:"<h1>Hello,Angular2</h1>"})
class EzApp{}
class也是ES6的关键字,用来定义一个类。@Component和@View都是给类EzApp附加的元信息, 被称为注解/Annotation。
@Component最重要的作用是通过selector属性(值为CSS选择符),指定这个组件渲染到哪个DOM对象上。 @View最重要的作用是通过template属性,指定渲染的模板。
3. 渲染组件到DOM
将组件渲染到DOM上,需要使用自举/bootstrap函数:
bootstrap(EzApp);
这个函数的作用就是通知Angular2框架将EzApp组件渲染到DOM树上。
简单吗?我知道你一定还有疑问,别着急,我们慢慢把缺失的知识点补上!
注解/Annotation
你一定好奇@Component和@View到底是怎么回事。看起来像其他语言(比如python) 的装饰器,是这样吗?
ES6规范里没有装饰器。这其实利用了traceur的一个实验特性:注解。给一个类 加注解,等同于设置这个类的annotations属性:
//注解写法
[@Component](/user/Component)({selector:"ez-app"})
class EzApp{...}
等同于:
class EzApp{...}
EzApp.annotations = [new Component({selector:"ez-app"})];
很显然,注解可以看做编译器(traceur)层面的语法糖,但和python的装饰器不同, 注解在编译时仅仅被放在annotation里,编译器并不进行解释展开 - 这个解释的工作是 Angular2完成的:
002
据称,注解的功能就是Angular2团队向traceur团队提出的,这不是traceur的默认选项, 因此你看到,我们配置systemjs在使用traceur模块时打开注解:
System.config({
map:{traceur:"lib/traceur"},
traceurOptions: {annotations: true}
});
小结
如果你了解一点Angular1.x的bootstrap,可能隐约会感受到Angular2中bootstrap的一些 变化 - 我指的并非代码形式上的变化。
以组件为核心
在Angular1.x中,bootstrap是围绕DOM元素展开的,无论你使用ng-app还是手动执行bootstrap()函数,自举过程是建立在DOM之上的。
而在Angular2中,bootstrap是围绕组件开始的,你定义一个组件,然后启动它。如果没有一个组件, 你甚至都没有办法使用Angular2!
支持多种渲染引擎
以组件而非DOM为核心,意味着Angular2在内核隔离了对DOM的依赖 - DOM仅仅作为一种可选的渲染引擎存在:
003
上面的图中,DOM Render已经实现,Server Render正在测试,iOS Render和Android Render 是可预料的特性,虽然我们看不到时间表。
这有点像React了。
转载于:https://www.cnblogs.com/shitoupi/p/6618500.html
AngularJS2.0教程(一)快速上手之基础知识相关推荐
- Python基础教程(第3版)中文版 第一章 快速上手:基础知识(笔记)
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,分享给大家: https://www.captainai.net/lf 如果你学完了Python不知道干什么,不妨去了解一下. 第一章 快速 ...
- 教程▍一步步上手TensorFlow——基础知识
作者|blackblog 编辑| 布袋熊 AI基础技能学习 一步步上手TensorFlow TensorFlow 是一个用于人工智能的开源神器.作为常用的机器学习框架,可被用于语音识别或图像识别等多 ...
- MongoDB 4.0 事务实现快速上手
MongoDB 4.0 事务实现快速上手 原创陈小生网易游戏运维平台 陈小生 网易游戏运维工程师,目前主要负责数据库相关的运维工作. MongoDB 4.0 引入了多文档事务的支持,不过目前仅限于单个 ...
- tensorflow2.0教程- Keras 快速入门
tensorflow2.0教程-tensorflow.keras 快速入门 Tensorflow 2.0 教程持续更新: https://blog.csdn.net/qq_31456593/artic ...
- 计算机java语言教程,计算机JAVA教程二讲Java语言基础知识.doc
计算机JAVA教程二讲Java语言基础知识 2.1简单数据类型 2.1.1 标识符和保留字 1.标识符 程序员对程序中的各个元素加以命名时使用的命名记号称为标识符(identifier).Java语言 ...
- 自用的快速复习Java基础知识,不适用于每一个人
自用的快速复习java基础知识,不适用于每一个人 问题背景 1. 类定义出来的变量称为**对象** [IDEA安装](https://www.jb51.net/article/193853.htm) ...
- 软考 程序员教程-第三章 数据库基础知识
软考 程序员教程-第三章 数据库基础知识 第三章 数据库基础知识 3.1 基本概念 数据库系统(DataBase System,DBS)由数据库(DataBase,DB).硬件.软件和人员4大部分组成 ...
- 快速学习mysql_快速学习MySQL基础知识
这篇文章主要梳理了 SQL 的基础用法,会涉及到以下方面内容: SQL大小写的规范 数据库的类型以及适用场景 SELECT 的执行过程 WHERE 使用规范 MySQL 中常见函数 子查询分类 如何选 ...
- JAVA转GO第一步,我跟着教程看了一遍基础知识
** JAVA转GO第一步,我跟着教程看了一遍基础知识 ** 时间飞逝,转眼间工作快满5年了,看着同期毕业的朋友们大部分都选择了稳定的公务员.事业单位.学校的老师,前途大好.而我毕业后一直留在互联网公 ...
最新文章
- OpenGL中的VAO和VBO使用技巧
- hdu 1306(字符串匹配)
- python 处理url 参数_Python 优雅的处理网页URL参数
- 用Scikit-learn和TensorFlow进行机器学习(三)
- 教你如何区分描述统计学与推断统计学
- 0编译器详解_详解Java枚举类型(Enum)中的方法
- 细说 | 失效的private修饰符
- leetcode题解—1021、删除最外层的括号
- Spring 框架简单介绍
- 在 Mac 上用输入法如何以另一种语言键入?
- wps vba宏插件_wps下载_wps下载免费完整版客户端[办公软件]
- 苹果系统下怎么设置iChat 登陆MSN?
- java opencv 提取车牌_OpenCV实现车牌字符分割(C++)
- java 二叉树详解 + 实现代码
- ketchup 消息队列rabbitmq使用
- 国风·召南·野有死麕
- Kaggle天池比赛经验
- 侯捷C++->参数传递与返回值
- Multisim光耦继电器仿真电路
- shell 中转换16进制10进制
热门文章
- TAUCS库的编译(vs2010)
- 静态锁 java_为什么锁定对象必须是静态的?
- java8 optional使用_[Java8]如何正确使用Optional
- idea通过svn上传_SVN客户端使用(Windows)图文详解
- python实现雪花动态图_如何通过雪花算法用Python实现一个简单的发号器
- python3 常见命令
- tp5 linux定时,TP5 用cron实现linux定时任务
- 【AngularJS】—— 3 我的第一个AngularJS小程序
- 前端开发框架整理(一些记录给自己看的)
- SpringBoot2.0之三 优雅整合Spring Data JPA