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了。

AngularJS2.0教程(一)快速上手之基础知识的更多相关文章

  1. React:快速上手(1)——基础知识

    React:快速上手(1)——基础知识 React(有时叫React.js或ReactJS)是一个为数据提供渲染为HTML视图的开源JavaScript库,用于构建用户界面. JSX.元素及渲染 1. ...

  2. python快速改造:基础知识

    改造"Hacking"并不同于破坏"cracking" python快速改造:基础知识 一行就是一行,不管多少,不用加分号 交互式python解释器可以当作计算 ...

  3. spring cloud系列教程第四篇-Eureka基础知识

    通过前三篇文章学习,我们搭建好了两个微服务工程.即:order80和payment8001这两个服务.有了这两个基础的框架之后,我们将要开始往里面添加东西了.还记得分布式架构的几个维度吗?我们要通过一 ...

  4. NodeJS 基于 Dapr 构建云原生微服务应用,从 0 到 1 快速上手指南

    Dapr 是一个可移植的.事件驱动的运行时,它使任何开发人员能够轻松构建出弹性的.无状态和有状态的应用程序,并可运行在云平台或边缘计算中,它同时也支持多种编程语言和开发框架.Dapr 确保开发人员专注 ...

  5. Visual Studio 2019/2017 安装使用教程(快速上手版)

    目录 Visual Studio 2017 安装使用教程(详细) 在此鸣谢范华对本文工作的大力支持 一.下载 二.安装 2017版本新建项目过程 2019版本新建项目过程 然后你就可以简单编写一段代码 ...

  6. 分享一个ReactiveCocoa的很好的教程(快速上手)

    这是我看到的比较全而且讲的很好的文章 https://www.raywenderlich.com/62796/reactivecocoa-tutorial-pt1 https://www.raywen ...

  7. AngularJS2.0 教程系列(一)

    http://my.oschina.net/u/2275217/blog/482178

  8. [转] Redux入门教程(快速上手)

    学习前提 在我们开始以前,确保你熟悉以下知识: 函数式JavaScript 面向对象JavaScript JavaScript ES6 语法 同时,确保你的设备已经安装: NodeJS Yarn(或者 ...

  9. 第0章Linux环境到内核基础知识

    #include<stdio.h> int main(void) { printf("hello world\n"); return 0; } gcc -g -wall ...

随机推荐

  1. Python Web简单加法器的实现--Python

    坚持写博客来记录学习过程,哪怕学习的东西多么简单!下面是python中cgi相关知识. Template.py:(模板引擎文件) #模板引擎def start_response(resp=" ...

  2. Gartner:影响2019年基础设施和运营的十大趋势

    ​​关注嘉为科技,获取运维新知 基础设施和运营(I&O)正越来越多地涉及现代企业的前所未有的领域.比起数据中心.托管和云等技术元素,I&O领导者们更多地着眼于如何让组织的基础架构和运营 ...

  3. 用where导致group by分组字段的索引失效

    把两个单独的索引合并成一个组合索引,即把where条件字段的索引和group by的分组字段索引组合成一个. 如果分组的字段需要用函数处理,可以用索引函数 Generated Column(函数索引) ...

  4. laravel的重定向

    Route::get("redirect1", function () { // redirct的三种写法 // return redirect()->route(" ...

  5. php7配置多线程

    1.下载pthreads 文件  http://windows.php.net/downloads/pecl/releases/pthreads/3.1.5/ 2.把   pthreadVC2.dll ...

  6. python中eval()和json.dumps的使用

    在python中通过requests.get(url)获取json数据,此时可能需要eval进行解析. # -*- coding: utf-8 -*- import requests r = requ ...

  7. Git:创建远程仓库并推送内容到远程库

    1.添加远程仓库 1.1点击该按钮创建一个新仓库 2.推送到远程仓库 2.1根据GitHub的提示,在本地的learngit仓库下运行命令git remote add origin https://g ...

  8. 【LeetCode】区间合并

    给定一组区间,将所有区间重叠的部分合并起来. e.g. 给出 { [1, 3], [2, 6], [8, 10], [15, 18] },返回 { [1, 6], [8, 10], [15, 18] ...

  9. 【九校联考-24凉心模拟】锻造(forging)

    题目背景 勇者虽然武力值很高,但在经历了多次战斗后,发现怪物越来越难打, 于是开始思考是不是自己平时锻炼没到位,于是苦练一个月后发现……自 己连一个史莱姆都打不过了. 勇者的精灵路由器告诉勇者其实是他 ...

  10. ActiveMQ consumer按顺序处理消息

    http://activemq.apache.org/exclusive-consumer.html producer发送消息是有先后顺序的,这种顺序保持到了broker中.如果希望消息按顺序被消费掉 ...