Angular 1与 Angular 2之间的一些差别

news/2024/7/23 8:47:03

  现在在用ng1.5.8做一个项目,ng的优点和特性我就不用多说了,ng1在陆续更新到1.5/1.6后就没再推出新版本了,ng2已经面世测试很久了,如同很多系统和框架一样,每个大的版本更新都会有新特性加入进来,虽然还没有用ng2做过企业级项目,平时也了解了很多ng2的改进的地方,下面就来梳理一下ng1和ng2之间一些差异;

  • Angular2不是从Angular1升级过来的,Angular2是重写的,所以他们之间的差别比较大,不是你用过1就能直接上手2的,计划可以认为是一个新的框架;
  • Angular2使用了javascript的超集‘Typescript’,所以angular1和angular2从设定之初就是不一样的;
  • Angular1.x在设计之初主要是针对pc端的,对移动端支持较少(当然也有其他一些衍生框架如ionic),而Angular2是设计包含移动端的;
  • Angular 1的核心概念是$scope,但是angular2中没有$scope,angular2使用zone.js来记录监测变化;
  • Angular 1 中的控制器在angular2中不再使用,也可以说控制器在angular2中被‘Component’组件所替代:

////Angular 1.x using Controller and $scope.........
var myApp = angular
 .module("myModule", []) 
.controller("productController", function($scope) {
var prods = { name: "Prod1", quantity: 1 }; 
$scope.products = prods;
});
 
///Angular 2 Components using TypeScript........
import { Component } from ‘angular2/core’;
@Component({
 selector: ‘prodsdata’,
 template: `
 <h3>{{techncalDiary}}</h3> `
})
export class ProductComponent {
 prods = { name: ‘Prod1’, quantity: 1 };
}
  • Angular 2中, 指令的结构、用法作了一些调整,比如1中的ng-repeat被*ngFor替代
///Angular 1.x structural directives:........
<ul>
     <li ng-repeat="item in items">
         {{item.name}}
     </li>
</ul>
 
///Angular 2 structural directives:.............
<ul>
     <li *ngFor="#item of items">
         {{item.name}}
     </li>
</ul>
  • Angular 2中, 自带原始指令在使用的时候要加上哈希(#)前缀
<div *ngFor="#technicalDiary of technicalDiries">
  • 双向数据绑定: [(ngModel)]的写法替换了ng-model
///Angular 1.x, two-way data binding using 'ng-model'..........
<input ng-model="technology.name"></input>
 
/////In Angular 2,two-way data binding using '[(ngModel)]'..........
<input [(ngModel)]="http://technology.name"></input>
  • Angular 2主要的性能优化改进是使用了分层依赖注入系统。 Angular 2实现了基于单向树的变化检测,这再次提高了性能;这些优化改进是的angular2的速度比angular1的速度提高很多;
  • Angular 2的大小是20kb左右,相对于angular1体积减少很多,在移动端的应用中,流量方便更占优势;
  • 支持影子 DOM;
  • 支持 Android 和 iOS 的原生移动渲染;
  • 支持服务端渲染

总结:

  很多人觉得从angular1转向angular2的时候学习曲线陡峭,所以在进军angular2的时候还是先做点预习功课比较好,也是因为改动较大,对angular2的设计思想、原生组件写法和工作原理有一定的了解,学习使用的过程中也更好跨阶。

  尽管angular2还在应用测试阶段,但是新版本相对于angular1有了长足的优化改进,相信它会越来越多的被应用到各个应用开发中,并且angular2只会load应用所需的组件(components),这也是个很好的改进,一些统计网站上的数据显示angular的速度比angular1快五倍,不得不说这次angular2的改版升级是非常给力的;本篇列举了一些本人针对angular2新特性的理解,很多point没有写出来(有些还不很了解熟悉),开发正式项目后或者了解更多新特性后再慢慢填补更新;

 

  原文地址:Angular 1与 Angular 2之间的一些差别,薛陈磊 | Share the world

转载于:https://www.cnblogs.com/xuechenlei/p/6072729.html


http://www.niftyadmin.cn/n/3746522.html

相关文章

团队建设与团队文化

其实我也感到奇怪&#xff0c;为什么选择写这个话题而不写一些技术相关&#xff0c;说到团队建设和团队文化&#xff0c;好像是中高层往上的管理者才会涉及考虑的&#xff0c;作为下属的各个岗位做好当前的工作&#xff0c;圆满的完成任务并持续创新就行了&#xff1b;在从业这…

有意思的Console

在很久的以前&#xff0c;因为经常在浏览器控制台调试修改数据&#xff0c;想到用户如果使用控制台配合抓包工具修改上下行流量中的数据&#xff0c;会给站点带来不定的安全威胁&#xff0c;所以一直想找个方法&#xff0c;准确的说是js的方法“禁用”控制台&#xff0c;也就是…

【招聘】广州国盈医药有限公司 招聘前端、运维

为什么80%的码农都做不了架构师&#xff1f;>>> 运维工程师 薪酬&#xff1a;&#xff08;6k-13k&#xff09; 岗位职责&#xff1a; 负责内部计算机系统的日常维护与更新&#xff0c;包括软件及硬件&#xff1b;负责确保各类服务器、交换机、路由器等正常运行&am…

Progressive web app理念及发展前景

前一段时间微信推出微信小程序进行公测&#xff0c;着实火了一把&#xff0c;博得了大众的眼球&#xff0c;不明真相的吃瓜观众们纷纷围观&#xff0c;所谓的“微信小程序”&#xff0c;通俗的讲就是一种不需要下载安装即可使用的应用程序&#xff0c;脱离于app商店依托于浏览器…

网站页面广告屏蔽监测

烦人的网页广告&#xff0c;讨厌的页面弹窗&#xff0c;想必大家都见过&#xff0c;对于这些乱七八糟的东西&#xff0c;我是最不能忍的&#xff0c;所以每次装浏览器后的第一件事就是安装浏览器插件去广告&#xff0c;基本能屏蔽所有网页广告和弹窗(对于大部分用户&#xff0c…

前端知识树-构建你的知识体系

经常有人问&#xff0c;我想学前端&#xff0c;要从哪里学起&#xff0c;或者有点基础&#xff0c;想学点其他的&#xff0c;要学什么&#xff1f; 两年前我同样带着这样的疑问&#xff0c;搜索了前端知识体系这个关键词&#xff0c;被大神们各种图解和list吓到了&#xff0c;心…

Js方法集

收集一些常用方法&#xff0c;思之补之踩过的坑&#xff1b; 判定浏览器是否为移动端&#xff0c;然后to do something: $(function isMobileBrowser() {var sUserAgent navigator.userAgent.toLowerCase(); var bIsIpad sUserAgent.match(/ipad/i) "ipad"; …

myeclipse+javamail发送邮件邮件内容乱码解决

一、问题背景&#xff1a;使用myeclipsejavax.mail.jar开发邮件接口二、问题描述&#xff1a;收到的邮件内容如下&#xff0c;无发件人无主题内容看似乱码(无主题)发件人&#xff1a; <> (由 XXX163.com.cn 代发)时 间&#xff1a;2015年8月19日(星期三) 晚上7:41---…