将Angular 1.x升级到Angular 2的无缝方法

The Scotchmas Day 7 and 8 giveaway can be found at the end of this article.

在本文的结尾可以找到第7天和第8天的苏格兰赠品。

Angular 2 was released a couple of months back and a beta version is just a couple of weeks old. Trust me, I can tell your thoughts about this change. You are probably asking yourself (or actually your computer screen) why on earth would the Angular team make such a huge jump. After all, you are (or at least you think you are) fine with what you already have in Angular 1.

Angular 2是几个月前发布的，而beta版本仅发布了几周。 相信我，我可以告诉您有关此更改的想法。 您可能正在问自己（或实际上是您的计算机屏幕），为什么Angular团队会做出如此巨大的飞跃。 毕竟，您对Angular 1中已经拥有的功能（或至少您认为自己很满意）。

Give your code editor a little break so we can discuss on why this jump is necessary and ways we can jump and not fall.

让您的代码编辑器稍作休息，以便我们讨论为什么必须执行此跳转以及我们可以跳转而不是跌倒的方式。

为什么转向Angular 2？ (Why Turn to Angular 2?)

Angular 1.x is fine and here to stay but Angular 2 is better. Do you think the Angular team are just jobless and work on creating something useless? No of course! So sit tight so we can talk about it.

Angular 1.x可以继续使用，但Angular 2更好。 您是否认为Angular团队只是失业，并致力于创造无用的东西？ 当然没有！ 所以请坐着，这样我们就可以谈谈。

The fact that Angular 2 exists does not mean Angular 1 will be deprecated or lack support. We know how it goes in IT generally, people still use IE 8, older versions of Android, Web Forms for .Net developers, etc. This is why Angular 1, for the time being is still here to stay.

Angular 2存在的事实并不意味着Angular 1将被弃用或缺乏支持。 我们知道它通常在IT中的发展，人们仍在使用IE 8，较旧版本的Android，面向.Net开发人员的Web Forms等。这就是Angular 1暂时仍然存在的原因。

Having made this point, let us actually take a look at why you should start considering Angular 2.

提出了这一点之后，让我们实际看看为什么您应该开始考虑Angular 2。

性能 (Performance)

Performance is always the first point when talking about benefits of Angular 2. The reason being that critics were on the team's neck concerning the speed and performance of Angular 1 even as mush. This could be found mostly in Angular's data binding concept.

在谈论Angular 2的好处时，性能始终是第一要点。原因是批评者对Angular 1的速度和性能不屑一顾。 这可以在Angular的数据绑定概念中找到。

Angular 2 had better strategies and concepts to improve the performance of web applications made with Angular.

Angular 2具有更好的策略和概念，可以提高使用Angular制作的Web应用程序的性能。

更好的移动支持 (Better Mobile Support)

Angular 1.x was not built with mobile support in mind, but fortunately frameworks like Ionic found favor in them.

Angular 1.x并不是在考虑移动支持的情况下构建的，但是幸运的是，像Ionic这样的框架在它们中受到了青睐。

Angular was implemented in frameworks like Ionic in a hard manner which was detrimental to the user's experience and performance of the application in general.

Angular 很难以类似Ionic的框架实现，这不利于用户的体验和整个应用程序的性能。

With all this terrible experience, Angular 2 was designed to be better and ready for any thing coming its way that is mobile oriented.

有了所有这些糟糕的经验，Angular 2的设计可以更好地为任何面向移动的方式做好准备。

更好的学习之路 (Better Learning Path)

It took me three weeks to wrap my head around the concept of Angular 1 but it took my co-developer who never used Angular 1 four days to understand Angular 2.

我花了三周的时间来思考Angular 1的概念，但我的联合开发人员却花了四天才使用Angular 1 来理解Angular 2 。

If you have looked at an Angular 2 app file, you should recognize this:

如果您查看了Angular 2应用程序文件，则应认识到以下几点：

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '<h1>{{ title }}</h1>'
})

export class AppComponent { 
    title = "My First Angular 2 App"
}

Looking at this piece of code, might get you intimidated at first but there is nothing more to Angular 2 than just that (and a more of it when your app grows). If you understand that basic syntax, you are good to go.

看着这段代码，可能一开始会让您感到胆怯，但是Angular 2的功能远不止于此（随着应用程序的增长，它的功能也会更多）。 如果您了解该基本语法，那就太好了。

On the other hand, compare it with the way we learned Angular 1.x. The docs were crazy. There were tons of complicated documentations to study. It took me three weeks to wrap my head around the concept of Angular 1 but it took my co-developer who never used Angular 1 four days to understand Angular 2.

另一方面，将其与我们学习Angular 1.x的方式进行比较。 这些文档太疯狂了。 有大量复杂的文档需要研究。 我花了三周的时间来思考Angular 1的概念，但我的联合开发人员花了四天时间才从Angular 1的角度来理解Angular 2。

未来 (The Future)

Angular 2 uses all the promising features the web as a whole is coming up with. ES2015 also known as ES6 is the major ECMAScript version for Angular implemented with TypeScript.

Angular 2使用了整个网络提出的所有有前途的功能。 ES2015也称为ES6，是使用TypeScript实现的主要Angular ECMAScript版本。

Web Components are the future of the Web and if you are not planning to accept that yet, then you are driving on the wrong lane.

Web组件是Web的未来，如果您还不打算接受它，那么您就走错了路。

升级到Angular 2 (Upgrading to Angular 2)

Upgrading to Angular 2 is quite an easy step to take, but one that should be made carefully.

升级到Angular 2相当容易，但是应该谨慎进行。

There are two major ways to feel the taste of Angular 2 in your project. Which you use depends on whatever requirements your project has. The angular team have provided two paths to this:

在您的项目中有两种主要的方式来感受Angular 2的味道 。 使用哪种取决于项目有什么要求。 角度小组为此提供了两种途径：

ngForward (ngForward)

ngForward is not a real upgrade framework for Angular 2 but instead we can use it to create Angular 1 apps that look like Angular 2.

ngForward不是Angular 2的真正升级框架，但是我们可以使用它来创建类似于Angular 2的Angular 1应用程序。

If you still feel uncomfortable upgrading your existing application to Angular 2, you can fall to ngForward to feel the taste and sweetness of the good tidings Angular 2 brings but still remain in your comfort zone.

如果您仍然不满意将现有应用程序升级到Angular 2，则可以使用ngForward来体验Angular 2带来的好消息的滋味和甜味，但仍会留在您的舒适范围内。

You can either re-write your angular app gradually to look as if it was written in Angular 2 or add features in an Angular 2 manner leaving the existing project untouched. Another benefit that comes with this is that it prepares you and your team for the future even when you choose to hold onto the past for a little bit longer.

您可以逐渐重新编写您的角度应用程序，使其看起来像是用Angular 2编写的，也可以以Angular 2方式添加功能，而不会影响现有项目。 这样做的另一个好处是，即使您选择保留过去的时间更长，它也可以为您和您的团队为未来做好准备。

I will guide you through a basic setup to use ngForward but in order to be on track, have a look at the Quick Start for Angular 2.

我将指导您完成使用ngForward的基本设置，但为了步入正轨，请查看Angular 2 快速入门 。

In your existing Angular 1.x (should be 1.3+) app run:

在现有的Angular 1.x（应为1.3+）应用中运行：

npm i --save ng-forward@latest reflect-metadata

This installs the latest version of ngForward and also the reflect-metadatamodule. Now prepare your index.html to look like what we have below:

这将安装最新版本的ngForward以及reflect-metadata模块。 现在，准备您的index.html使其看起来像下面的样子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <title>Ng-Forward Sample</title>

    <link rel="stylesheet" href="styles.css" />

    <script data-require="angular.js@1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
    <script data-require="ui-router@0.2.15" data-semver="0.2.15" src="http://rawgit.com/angular-ui/ui-router/0.2.15/release/angular-ui-router.js"></script>

    
    <script src="http://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.4/system.js"></script>
    <script src="config.js"></script>

    <script>
      //bootstrap the Angular2 application
      System.import('app').catch(console.log.bind(console));
    </script>
  </head>

  <body>
    <app>Loading...</app>
  </body>

</html>

Notice the config.js we are referencing. We can create it now:

注意我们正在引用的config.js 。 我们现在可以创建它：

System.config({
  defaultJSExtensions: true,
  transpiler: 'typescript',
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  map: {
    'ng-forward': 'https://gist.githubusercontent.com/timkindberg/d93ab6e17fc07b4db7e9/raw/b311a63e0e96078774e69f26d8e8805b7c8b0dd2/ng-forward.0.0.1-alpha.10.js',
    'typescript': 'https://raw.githubusercontent.com/Microsoft/TypeScript/master/lib/typescript.js',
  },
  paths: {
    app: 'src'
  },
  packages: {
    app: {
      main: 'app.ts',
      defaultExtension: 'ts',
    }
  }
});

If you took time to review the Quick Start as I suggested, you won't be lost with the configuration. SystemJS is used to load the Angular application after it has been bootstrapped as we will soon see. Finally in our app.ts, we can code like it's Angular 2.

如果您按照我的建议花时间阅读《快速入门》，则不会丢失配置。 我们将很快看到，在启动后，SystemJS用于加载Angular应用程序。 最后在app.ts ，我们可以像Angular 2一样进行编码。

import {Component,  bootstrap} from 'ng-forward';

@Component({
    selector: 'my-app',
    template: '<h1>{{title}}</h1>'
})
class AppComponent { 
    title = "My First Angular 2 App"
}
bootstrap(AppComponent);

You can view a detailed demo here

您可以在此处查看详细的演示

ngUpgrade (ngUpgrade)

Writing an Angular 1.x app that looks like Angular 2 is not good enough. We need the real stuff. The challenge then becomes that with a large existing Angular 1.x project, it becomes really difficult to re-write all our app to Angular 2, and even using ngForward would not be ideal. This is where ngUpgrade comes to our aid. ngUpgrade is the real stuff.

编写看起来像Angular 2的Angular 1.x应用程序还不够好。 我们需要真正的东西。 然后面临的挑战是，对于现有的大型Angular 1.x项目，将所有应用程序重新编写为Angular 2确实变得非常困难，甚至使用ngForward也不是理想的选择。 这就是ngUpgrade帮助我们的地方。 ngUpgrade是真正的东西。

Unlike ngForward, ngUpgrade was covered clearly in the Angular 2 docs. If you fall in the category of developers that will take this path, then spare few minutes and digest this.

与ngForward不同，Angular 2文档清楚地介绍了ngUpgrade。 如果你的开发人员会走这条路，那么备用几分钟，消化类下降这样 。

We'll also be writing more articles on upgrading to Angular 2 and we'll focus more on ngUpgrade in a future article.

我们还将撰写更多有关升级到Angular 2的文章，并且在以后的文章中将重点关注ngUpgrade。

结束语 (Final Remarks)

One thing I have observed as an experienced Angular developer is that the Angular team has a good habit of providing tons of option to solve a single problem.

作为经验丰富的Angular开发人员，我观察到的一件事是Angular团队习惯于提供大量选择来解决单个问题。

Just as we saw in this guide, you can just use Angular 2 from scratch, write Angular 1 in Angular 2 form or gradually leverage ngUpgrade to upgrade your existing.

就像我们在本指南中看到的那样，您可以从头开始使用Angular 2，以Angular 2形式编写Angular 1，或者逐渐利用ngUpgrade升级现有的。

苏格兰赠品第7天和第8天 (Scotchmas Giveaway Day 7 and 8)

Enter for your chance to win a Misfit Flash and a $50 Starbucks Gift Card.

输入您的机会赢取Misfit Flash和价值$ 50的星巴克礼品卡。

a Rafflecopter giveaway

Rafflecopter赠品

a Rafflecopter giveaway

Rafflecopter赠品

翻译自: https://scotch.io/tutorials/seamless-ways-to-upgrade-angular-1-x-to-angular-2