Angular2 & angularjs1

迭代之路:

12年6月,Angularjs1.0.0正式版推出,亮点功能基本齐备,如双向绑定、依赖注入、指令等

Angularjs 1.3.x放弃支持IE8浏览器,推出单次绑定语法

Angularjs 1.5.x增加类似组件式书写体验,主要是为过渡Angualr2做铺垫

Angularjs1.x 缺点;

性能问题,angular是采用脏检查来实现数据的更新,当页面的数据越来越多,脏检查的效率也会相应下降,页面的卡顿会越来越明显

落后于当前Web发展理念,如组件式开发

对手机端支持不够友好

14年9月下旬,Angualr2正式亮相,16年9月Angular2正式版发布

Angular2新特性:

1、移除controller+$scope设计,改用组件式开发

2、性能更好(渲染更快,变化检测效率更高)

3、优先为移动应用设计(Angular Mobile Toolkit)

4、更加贴合未来的标准(ES6/7  WebComponent)

无缝升级方案,可将angulajs1平滑过渡到Angular2

Angular2核心概念:

组件(核心),模块,依赖注入,指令,服务,数据绑定,模板,元数据

组件有完整的生命周期钩子:

组件示例:

数据绑定:

插值(两个花括号)

单向绑定——属性绑定(把组件类的数据传递到组建模板中 <input [value]="myData" /> 数据流向为自上而下 父组件到子组件 @Output),事件绑定(模板产生的数据通过函数调用的方式传递到组件类<input [keyup]="handle($event)" /> 数据流向为自下而上  子组件到父组件 @Input)

双向绑定—— <input    [(ngModel)]="myData" />

指令:

属性指令,结构指令  与Angularjs1并不是完全相同的概念

例子:

服务:

服务是实现专一目的的逻辑单元,如日志服务

依赖注入:

组件引入外部构建(如服务)的一种机制

模块:

TypeScript简述:地址 http://www.typescriptlang.org/

Angular2官方推荐的开发语言,是微软开发的编程语言

1、JavaScript的超集,兼容JavaScript

2、运行前需预编译生成JavaScript

3、加入类型判断,编译时进行类型检查

4、文件扩展名.ts

angularjs1可参考:

1、http://www.tuicool.com/articles/ymmq2mf

2、http://blog.csdn.net/u013063153/article/details/52458362

原文地址:https://www.cnblogs.com/fexh/p/6690201.html

时间: 2024-08-04 23:55:15

Angular2 & angularjs1的相关文章

浅谈angular2与angularJS的区别

简介 大家好,今天给大家介绍一下angular,相信做过前端的小伙伴们都知道angular的大名,angularJS自2012年发布起就受到了大家的广泛关注.他首次提出了双向绑定概念让所有人都耳目一新,2016年angular2正式被发布,那么angular2到底有什么值得期待的地方呢,接下来讲一下angular2吸引人的地方. 1.1.1  angularJS的困境以及angular2的新特性 首先呢我们讨论一下angularJS的一些不足之处: 1.饱受诟病的性能问题 通过检查进行数据更新,

AngularJS1.X版本基础

AngularJS 知识点: DataBinding Providers Validators Directives  Controllers Modules Expressions Factories Services Filters Dependency Injection Scope  AngularJS优缺点比较 优点 MVVM 数据和视图绑定,省去频繁操作jquery更新dom,自带了丰富的Angular指令,整体功能比较完善,包含模板,数据双向绑定,路由,模块化,服务,过滤器,依赖注

angular2开发01

angular2开发01 1. angular2 开发准备 1.1. 安装node 1.2. 安装npm 1.3. 运行qickStart 1 angular2 开发准备 开发环境是linux mint 17.3 64位 1.1 安装node node在linux的部署主要有三种方式,第一种方式,使用apt-get install nodejs安装,这种方式有缺点,安装后的版本太低(0.10),官网都已经到4.5了; 第二种就是自己下载源码,手动编译二进制,这种方式要求有点高,属于高级用 户方式

[Step-By-Step Angular2](1)Hello World与自动化环境搭建

随着rc(release candidate,候选版本)版本的推出,万众瞩目的angular2终于离正式发布不远啦!五月初举办的ng-conf大会已经过去了整整一个月,大多数api都如愿保持在了相对稳定的状态——当然也有router这样的例外,在rc阶段还在大面积返工,让人颇为不解——不过总得说来,现在学习angular2不失为一个恰当的时机. Google为angular2准备了完善的文档和教程,按理说,官网(https://angular.io)自然是学习新框架的最好教材.略显遗憾的是,在B

angular2系列教程(九)Jsonp、URLSearchParams、中断选择数据流

大家好,今天我们要讲的是http模块的第二部分,主要学习ng2中Jsonp.URLSearchParams.observable中断选择数据流的用法. 例子 例子的第一个程序,上节课已经讲过了.这节课我们学习第二个程序,从wiki的api中跨域获取数据,可实现300毫秒内中断和选择最近请求等炫酷功能,这些功能都来自于observable! 运行方法: 在http目录或者上级目录起个服务即可: http-server 没有则需要安装http-server: sudo npm install htt

迈向angularjs2系列(2):angular2组件和指令详解

<%= INIT %> 内容 一:angular2 helloworld! 为了简单快速的运行一个ng2的app,那么通过script引入预先编译好的angular2版本和页面的基本框架. index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> &l

从Angular2路由引发的前后端路由浅谈

笔者的学习进度比较慢,直到两年以前写的网站都还是以服务端为主导的,即网站的所有视图都由服务器视图模板来渲染,笔者使用的是 DotNet MVC,开发套路就是在Controller里面写Action,在Views里写对应的Action.cshtml,使用ajax发起请求已经是比较前端的事情了.这种时候由于DotNet MVC框架继承的微软风格的懒人模式,甚至不需要去知道其路由是如何实现的,给人一种感觉是只要在浏览器里敲进去Controller名与Action名,就访问到视图了. 后来笔者开始使用n

最好的Angular2表格控件

最好的Angular2表格控件 现在市面上有大量的JavaScript数据表格控件,包括开源的第三方的和自产自销的.可以说Wijmo的Flexgrid是目前适应Angular 2的最好的表格控件. Angular 2数据表格基本要求: 更小.更快.更熟悉. 为了使用Angular 2表格,首先你需要了解表格的基本要求.FlexGrid开始于1996年,当时使用C++为Visual Basic编写的控件.多年来,它不断进化并在多个平台得到完善,尤其是JavaScript平台.FlexGrid 因为

Angular2 - Starter - Pipes, Custom Pipes

在Angular2 模板中,我们在显示数据时,可以使用通道将数据转换成相应的格式的值的形式来显示,而且这不改变源数据.比如,我们可以使用date通道来转换时间显示的格式: {{date | date:'yyyy-MM-dd'}} ,(1) 以下是Angular提供的基本的通道. Basic Pipes Pipe Name Usage Parameters or Effection currency {{test.currency | currency }} 1234569678 > USD1,2