zoukankan      html  css  js  c++  java
  • Angular 1与 Angular 2之间的一些差别

      现在在用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

  • 相关阅读:
    微信小程序路由跳转方式
    事务的隔离级别 乐观锁和悲观锁 f查询 q查询
    手机短信验证
    用git来操作项目
    git使用
    redis数据库 Python使用redis
    DRF框架:接口 ,restfui接口规范,基于restful规范的原生Django接口,Postman接口工具
    vue初识
    Win10玩游戏时听歌音量忽大忽小
    ASP.NET Core 2.0 WebApi全局配置及日志
  • 原文地址:https://www.cnblogs.com/xuechenlei/p/6072729.html
Copyright © 2011-2022 走看看