从 AngularJS 升级到 Angular

Angular是现在和未来的 Angular 名称。

AngularJS是所有 1.x 版本的 Angular 的名称。

有很多大型 AngularJS 应用。在迁移到 Angular 之前，请始终考虑其业务案例。该案例的一个重要部分是迁移的时间和精力。本指南描述了用于将 AngularJS 项目高效迁移到 Angular 平台的内置工具，一次一个。

有些应用可能比其它的升级起来简单，还有一些方法能让把这项工作变得更简单。 即使在正式开始升级过程之前，可以提前准备 AngularJS 的程序，让它向 Angular 看齐。 这些准备步骤几乎都是关于如何让代码更加松耦合、更有可维护性，以及用现代开发工具提高速度的。 这意味着，这种准备工作不仅能让最终的升级变得更简单，而且还能提升 AngularJS 程序的质量。

成功升级的关键之一是增量式的实现它，通过在同一个应用中一起运行这两个框架，并且逐个把 AngularJS 的组件迁移到 Angular 中。 这意味着可以在不必打断其它业务的前提下，升级更大、更复杂的应用程序，因为这项工作可以多人协作完成，在一段时间内逐渐铺开。 Angular upgrade 模块的设计目标就是让你渐进、无缝的完成升级。

准备

AngularJS 应用程序的组织方式有很多种。当你想把它们升级到 Angular 的时候， 有些做起来会比其它的更容易些。即使在开始升级之前，也有一些关键的技术和模式可以让你将来升级时更轻松。

遵循 AngularJS 风格指南

AngularJS 风格指南收集了一些已证明能写出干净且可维护的 AngularJS 程序的模式与实践。 它包含了很多关于如何书写和组织 AngularJS 代码的有价值信息，同样重要的是，不应该采用的书写和组织 AngularJS 代码的方式。

Angular 是一个基于 AngularJS 中最好的部分构思出来的版本。在这种意义上，它的目标和 AngularJS 风格指南是一样的： 保留 AngularJS 中好的部分，去掉坏的部分。当然，Angular 还做了更多。 说这些的意思是：遵循这个风格指南可以让你写出更接近 Angular 程序的 AngularJS 程序。

有一些特别的规则可以让使用 Angular 的 ​upgrade/static​ 模块进行增量升级变得更简单：

• 单一规则 规定每个文件应该只放一个组件。这不仅让组件更容易浏览和查找，而且还让你能逐个迁移它们的语言和框架。 在这个范例程序中，每个控制器、工厂和过滤器都位于各自的源文件中。
• 按特性分目录的结构和模块化规则在较高的抽象层定义了一些相似的原则：应用程序中的不同部分应该被分到不同的目录和 NgModule 中。

如果应用程序能用这种方式把每个特性分到一个独立目录中，它也就能每次迁移一个特性。 对于那些还没有这么做的程序，强烈建议把应用这条规则作为准备步骤。而且这也不仅仅对升级有价值， 它还是一个通用的规则，可以让你的程序更“坚实”。

使用模块加载器

当你把应用代码分解到每个文件中只放一个组件的粒度后，通常会得到一个由大量相对较小的文件组成的项目结构。 这比组织成少量大文件要整洁得多，但如果你不得不通过 ​

你可以从 HTML 中移除 ​ng-app​ 和 ​ng-strict-di​ 指令，改为从 JavaScript 中调用 ​angular.bootstrap​，它能达到同样效果：

angular.bootstrap(document.body, ['heroApp'], { strictDi: true });

要想把 AngularJS 应用变成 Hybrid 应用，就要先加载 Angular 框架。 根据准备升级到 AngularJS 中给出的步骤，选择性的把快速入门 github 代码仓中的代码复制过来。

也可以通过 ​npm install @angular/upgrade --save​ 命令来安装 ​@angular/upgrade​ 包，并给它添加一个到 ​@angular/upgrade/static​ 包的映射。

'@angular/upgrade/static': 'npm:@angular/upgrade/fesm2015/static.mjs',

接下来，创建一个 ​app.module.ts​ 文件，并添加下列 ​NgModule ​类：

import { DoBootstrap, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';

@NgModule({
  imports: [
    BrowserModule,
    UpgradeModule
  ]
})
export class AppModule implements DoBootstrap {
  constructor(private upgrade: UpgradeModule) { }
  ngDoBootstrap() {
    this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });
  }
}

最小化的 ​NgModule ​导入了 ​BrowserModule​，它是每个基于浏览器的 Angular 应用必备的。 它还从 ​@angular/upgrade/static​ 中导入了 ​UpgradeModule​，它导出了一些服务提供者，这些提供者会用于升级、降级服务和组件。

在 ​AppModule ​的构造函数中，使用依赖注入技术获取了一个 ​UpgradeModule ​实例，并用它在 ​AppModule.ngDoBootstrap​ 方法中启动 AngularJS 应用。 ​upgrade.bootstrap​ 方法接受和 angular.bootstrap 完全相同的参数。

注意，你不需要在 ​@NgModule​ 中加入 ​bootstrap ​声明，因为 AngularJS 控制着该应用的根模板。

现在，你就可以使用 ​platformBrowserDynamic.bootstrapModule​ 方法来启动 ​AppModule ​了。

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

platformBrowserDynamic().bootstrapModule(AppModule);

恭喜！你就要开始运行这个混合式应用了！所有现存的 AngularJS 代码会像以前一样正常工作，但是你现在也同样可以运行 Angular 代码了。

从 AngularJS 代码中使用 Angular 组件

一旦你开始运行混合式应用，你就可以开始逐渐升级代码了。一种更常见的工作模式就是在 AngularJS 的上下文中使用 Angular 的组件。 该组件可能是全新的，也可能是把原本 AngularJS 的组件用 Angular 重写而成的。

假设你有一个用来显示英雄信息的 Angular 组件：

import { Component } from '@angular/core';

@Component({
  selector: 'hero-detail',
  template: `
    
Windstorm details!
    
id: 1
  `
})
export class HeroDetailComponent { }

如果你想在 AngularJS 中使用这个组件，就得用 ​downgradeComponent()​ 方法把它降级。 其结果是一个 AngularJS 的指令，你可以把它注册到 AngularJS 的模块中：

import { HeroDetailComponent } from './hero-detail.component';

/* . . . */

import { downgradeComponent } from '@angular/upgrade/static';

angular.module('heroApp', [])
  .directive(
    'heroDetail',
    downgradeComponent({ component: HeroDetailComponent }) as angular.IDirectiveFactory
  );

默认情况下，Angular 变更检测也会在 AngularJS 的每个 ​$digest​ 周期中运行。如果你希望只在输入属性发生变化时才运行变更检测，可以在调用 ​downgradeComponent()​ 时把 ​propagateDigest ​设置为 ​false​。

由于 ​HeroDetailComponent ​是一个 Angular 组件，所以你必须同时把它加入 ​AppModule ​的 ​declarations ​字段中。

import { HeroDetailComponent } from './hero-detail.component';

@NgModule({
  imports: [
    BrowserModule,
    UpgradeModule
  ],
  declarations: [
    HeroDetailComponent
  ]
})
export class AppModule implements DoBootstrap {
  constructor(private upgrade: UpgradeModule) { }
  ngDoBootstrap() {
    this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });
  }
}

所有 Angular 组件、指令和管道都必须声明在 NgModule 中。

最终的结果是一个叫做 ​heroDetail ​的 AngularJS 指令，你可以像用其它指令一样把它用在 AngularJS 模板中。

注意，它在 AngularJS 中是一个名叫 ​heroDetail ​的元素型指令（​restrict: 'E'​）。 AngularJS 的元素型指令是基于它的名字匹配的。 Angular 组件中的 ​selector ​元数据，在降级后的版本中会被忽略。

当然，大多数组件都不像这个这么简单。它们中很多都有输入属性和输出属性，来把它们连接到外部世界。 Angular 的英雄详情组件带有像这样的输入属性与输出属性：

import { Component, EventEmitter, Input, Output } from '@angular/core';
import { Hero } from '../hero';

@Component({
  selector: 'hero-detail',
  template: `
    
{{hero.name}} details!
    
id: {{hero.id}}
    Delete
  `
})
export class HeroDetailComponent {
  @Input() hero!: Hero;
  @Output() deleted = new EventEmitter();
  onDelete() {
    this.deleted.emit(this.hero);
  }
}

这些输入属性和输出属性的值来自于 AngularJS 的模板，而 ​downgradeComponent()​ 方法负责桥接它们：

注意，虽然你正在 AngularJS 的模板中，但却在使用 Angular 的属性(Attribute)语法来绑定到输入属性与输出属性。 这是降级的组件本身要求的。而表达式本身仍然是标准的 AngularJS 表达式。

在降级过的组件属性中使用中线命名法

为降级过的组件使用 Angular 的属性(Attribute)语法规则时有一个值得注意的例外。 它适用于由多个单词组成的输入或输出属性。在 Angular 中，你要使用小驼峰命名法绑定这些属性：

[myHero]="hero"
(heroDeleted)="handleHeroDeleted($event)"

但是从 AngularJS 的模板中使用它们时，你得使用中线命名法：

[my-hero]="hero"
(hero-deleted)="handleHeroDeleted($event)"

​$event​ 变量能被用在输出属性里，以访问这个事件所发出的对象。这个案例中它是 ​Hero ​对象，因为 ​this.deleted.emit()​ 函数曾把它传了出来。

由于这是一个 AngularJS 模板，虽然它已经有了 Angular 中绑定的属性(Attribute)，你仍可以在这个元素上使用其它 AngularJS 指令。 例如，你可以用 ​ng-repeat​ 简单的制作该组件的多份拷贝：

从 Angular 代码使用 AngularJS 组件指令

现在，你已经能在 Angular 中写一个组件，并把它用于 AngularJS 代码中了。 当你从低级组件开始移植，并往上走时，这非常有用。但在另外一些情况下，从相反的方向进行移植会更加方便： 从高级组件开始，然后往下走。这也同样能用 ​UpgradeModule ​完成。 你可以升级AngularJS 组件型指令，然后从 Angular 中用它们。

不是所有种类的 AngularJS 指令都能升级。该指令必须是一个严格的组件型指令，具有上面的准备指南中描述的那些特征。 确保兼容性的最安全的方式是 AngularJS 1.5 中引入的组件 API。

可升级组件的简单例子是只有一个模板和一个控制器的指令：

export const heroDetail = {
  template: `
    
Windstorm details!
    
id: 1
  `,
  controller: function HeroDetailController() {
  }
};

你可以使用 ​UpgradeComponent ​方法来把这个组件升级到 Angular。 具体方法是创建一个 Angular指令，继承 ​UpgradeComponent​，在其构造函数中进行 ​super ​调用， 这样你就得到一个完全升级的 AngularJS 组件，并且可以 Angular 中使用。 剩下是工作就是把它加入到 ​AppModule ​的 ​declarations ​数组。

import { Directive, ElementRef, Injector, SimpleChanges } from '@angular/core';
import { UpgradeComponent } from '@angular/upgrade/static';

@Directive({
  selector: 'hero-detail'
})
export class HeroDetailDirective extends UpgradeComponent {
  constructor(elementRef: ElementRef, injector: Injector) {
    super('heroDetail', elementRef, injector);
  }
}

@NgModule({
  imports: [
    BrowserModule,
    UpgradeModule
  ],
  declarations: [
    HeroDetailDirective,
  /* . . . */
  ]
})
export class AppModule implements DoBootstrap {
  constructor(private upgrade: UpgradeModule) { }
  ngDoBootstrap() {
    this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });
  }
}

升级后的组件是 Angular 的指令，而不是组件，因为 Angular 不知道 AngularJS 将在它下面创建元素。 Angular 所知道的是升级后的组件只是一个指令（一个标签），Angular 不需要关心组件本身及其子元素。

升级后的组件也可能有输入属性和输出属性，它们是在原 AngularJS 组件型指令的 scope/controller 绑定中定义的。 当你从 Angular 模板中使用该组件时，就要使用Angular 模板语法来提供这些输入属性和输出属性，但要遵循下列规则：

	绑定定义	模板语法
属性绑定	myAttribute: '@myAttribute'
表达式绑定	myOutput: '&myOutput'
单向绑定	myValue: '
双向绑定	myValue: '=myValue'	用作双向绑定：。 由于大多数 AngularJS 的双向绑定实际上只是单向绑定，因此通常写成  也够用了。

举个例子，假设 AngularJS 中有一个表示“英雄详情”的组件型指令，它带有一个输入属性和一个输出属性：

export const heroDetail = {
  bindings: {
    hero: '<',
    deleted: '&'
  },
  template: `
    
{{$ctrl.hero.name}} details!
    
id: {{$ctrl.hero.id}}
    Delete
  `,
  controller: function HeroDetailController() {
    this.onDelete = () => {
      this.deleted(this.hero);
    };
  }
};

你可以把这个组件升级到 Angular，然后使用 Angular 的模板语法提供这个输入属性和输出属性：

import { Directive, ElementRef, Injector, Input, Output, EventEmitter } from '@angular/core';
import { UpgradeComponent } from '@angular/upgrade/static';
import { Hero } from '../hero';

@Directive({
  selector: 'hero-detail'
})
export class HeroDetailDirective extends UpgradeComponent {
  @Input() hero: Hero;
  @Output() deleted: EventEmitter;

  constructor(elementRef: ElementRef, injector: Injector) {
    super('heroDetail', elementRef, injector);
  }
}

import { Component } from '@angular/core';
import { Hero } from '../hero';

@Component({
  selector: 'my-container',
  template: `
    
Tour of Heroes
    
    
  `
})
export class ContainerComponent {
  hero = new Hero(1, 'Windstorm');
  heroDeleted(hero: Hero) {
    hero.name = 'Ex-' + hero.name;
  }
}

把 AngularJS 的内容投影到 Angular 组件中

如果你在 AngularJS 模板中使用降级后的 Angular 组件时，可能会需要把模板中的一些内容投影进那个组件。 这也是可能的，虽然在 Angular 中并没有透传(transclude)这样的东西，但它有一个非常相似的概念，叫做内容投影。 ​UpgradeModule ​也能让这两个特性实现互操作。

Angular 的组件通过使用 ​​ 标签来支持内容投影。下面是这类组件的一个例子：

import { Component, Input } from '@angular/core';
import { Hero } from '../hero';

@Component({
  selector: 'hero-detail',
  template: `
    
{{hero.name}}
    

      
    
  `
})
export class HeroDetailComponent {
  @Input() hero!: Hero;
}

当从 AngularJS 中使用该组件时，你可以为它提供内容。正如它们将在 AngularJS 中被透传一样， 它们也在 Angular 中被投影到了 ​​ 标签所在的位置：

  
    
    
{{mainCtrl.hero.description}}
  

当 AngularJS 的内容被投影到 Angular 组件中时，它仍然留在“AngularJS 王国”中，并被 AngularJS 框架管理着。

把 Angular 的内容透传进 AngularJS 的组件型指令

就像可以把 AngularJS 的内容投影进 Angular 组件一样，你也能把 Angular 的内容透传进 AngularJS 的组件， 但不管怎样，你都要使用它们升级过的版本。

如果一个 AngularJS 组件型指令支持透传，它就会在自己的模板中使用 ​ng-transclude​ 指令标记出透传到的位置：

export const heroDetail = {
  bindings: {
    hero: '='
  },
  template: `
    
{{$ctrl.hero.name}}
    

      
    
  `,
  transclude: true
};

如果你升级这个组件，并把它用在 Angular 中，你就能把准备透传的内容放进这个组件的标签中。

import { Component } from '@angular/core';
import { Hero } from '../hero';

@Component({
  selector: 'my-container',
  template: `
    
      
      
{{hero.description}}
    
  `
})
export class ContainerComponent {
  hero = new Hero(1, 'Windstorm', 'Specific powers of controlling winds');
}

让 AngularJS 中的依赖可被注入到 Angular

当运行一个混合式应用时，可能会遇到这种情况：你需要把某些 AngularJS 的依赖注入到 Angular 代码中。 这可能是因为某些业务逻辑仍然在 AngularJS 服务中，或者需要某些 AngularJS 的内置服务，比如 ​$location​ 或 ​$timeout​。

在这些情况下，把一个 AngularJS 提供者升级到Angular 也是有可能的。这就让它将来有可能被注入到 Angular 代码中的某些地方。 比如，你可能在 AngularJS 中有一个名叫 ​HeroesService ​的服务：

import { Hero } from '../hero';

export class HeroesService {
  get() {
    return [
      new Hero(1, 'Windstorm'),
      new Hero(2, 'Spiderman')
    ];
  }
}

你可以用 Angular 的工厂提供者升级该服务， 它从 AngularJS 的 ​$injector​ 请求服务。

很多开发者都喜欢在一个独立的 ​ajs-upgraded-providers.ts​ 中声明这个工厂提供者，以便把它们都放在一起，这样便于引用、创建新的以及在升级完毕时删除它们。

同时，建议导出 ​heroesServiceFactory ​函数，以便 AOT 编译器可以拿到它们。

注意：这个工厂中的字符串 'heroes' 指向的是 AngularJS 的 ​HeroesService​。 AngularJS 应用中通常使用服务名作为令牌，比如 'heroes'，并为其追加 'Service' 后缀来创建其类名。

import { HeroesService } from './heroes.service';

export function heroesServiceFactory(i: any) {
  return i.get('heroes');
}

export const heroesServiceProvider = {
  provide: HeroesService,
  useFactory: heroesServiceFactory,
  deps: ['$injector']
};

然后，你就可以把这个服务添加到 ​@NgModule​ 中来把它暴露给 Angular：

import { heroesServiceProvider } from './ajs-upgraded-providers';

@NgModule({
  imports: [
    BrowserModule,
    UpgradeModule
  ],
  providers: [
    heroesServiceProvider
  ],
/* . . . */
})
export class AppModule implements DoBootstrap {
  constructor(private upgrade: UpgradeModule) { }
  ngDoBootstrap() {
    this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });
  }
}

然后在组件的构造函数中使用该服务的类名作为类型注解注入到组件中，从而在组件中使用它：

import { Component } from '@angular/core';
import { HeroesService } from './heroes.service';
import { Hero } from '../hero';

@Component({
  selector: 'hero-detail',
  template: `
    
{{hero.id}}: {{hero.name}}
  `
})
export class HeroDetailComponent {
  hero: Hero;
  constructor(heroes: HeroesService) {
    this.hero = heroes.get()[0];
  }
}

在这个例子中，你升级了服务类。当注入它时，你可以使用 TypeScript 类型注解来获得这些额外的好处。 它没有影响该依赖的处理过程，同时还得到了启用静态类型检查的好处。 任何 AngularJS 中的服务、工厂和提供者都能被升级 —— 尽管这不是必须的。

让 Angular 的依赖能被注入到 AngularJS 中

除了能升级 AngularJS 依赖之外，你还能降级Angular 的依赖，以便在 AngularJS 中使用它们。 当你已经开始把服务移植到 Angular 或在 Angular 中创建新服务，但同时还有一些用 AngularJS 写成的组件时，这会非常有用。

例如，你可能有一个 Angular 的 ​Heroes ​服务：

import { Injectable } from '@angular/core';
import { Hero } from '../hero';

@Injectable()
export class Heroes {
  get() {
    return [
      new Hero(1, 'Windstorm'),
      new Hero(2, 'Spiderman')
    ];
  }
}

仿照 Angular 组件，把该提供者加入 ​NgModule ​的 ​providers ​列表中，以注册它。

import { Heroes } from './heroes';

@NgModule({
  imports: [
    BrowserModule,
    UpgradeModule
  ],
  providers: [ Heroes ]
})
export class AppModule implements DoBootstrap {
  constructor(private upgrade: UpgradeModule) { }
  ngDoBootstrap() {
    this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });
  }
}

现在，用 ​downgradeInjectable()​ 来把 Angular 的 ​Heroes ​包装成AngularJS 的工厂函数，并把这个工厂注册进 AngularJS 的模块中。 依赖在 AngularJS 中的名字你可以自己定：

import { Heroes } from './heroes';
/* . . . */
import { downgradeInjectable } from '@angular/upgrade/static';

angular.module('heroApp', [])
  .factory('heroes', downgradeInjectable(Heroes))
  .component('heroDetail', heroDetailComponent);

此后，该服务就能被注入到 AngularJS 代码中的任何地方了：

export const heroDetailComponent = {
  template: `
    
{{$ctrl.hero.id}}: {{$ctrl.hero.name}}
  `,
  controller: ['heroes', function(heroes: Heroes) {
    this.hero = heroes.get()[0];
  }]
};

惰性加载 AngularJS

在构建应用时，你需要确保只在必要的时候才加载所需的资源，无论是加载静态资产（Asset）还是代码。要确保任何事都尽量推迟到必要时才去做，以便让应用更高效的运行。当要在同一个应用中运行不同的框架时，更是如此。

惰性加载是一项技术，它会推迟到使用时才加载所需静态资产和代码资源。这可以减少启动时间、提高效率，特别是要在同一个应用中运行不同的框架时。

当你采用混合式应用的方式将大型应用从 AngularJS 迁移到 Angular 时，你首先要迁移一些最常用的特性，并且只在必要的时候才使用那些不太常用的特性。这样做有助于确保应用程序在迁移过程中仍然能为用户提供无缝的体验。

在大多数需要同时用 Angular 和 AngularJS 渲染应用的环境中，这两个框架都会包含在发送给客户端的初始发布包中。这会导致发布包的体积增大、性能降低。

当用户停留在由 Angular 渲染的页面上时，应用的整体性能也会受到影响。这是因为 AngularJS 的框架和应用仍然被加载并运行了 —— 即使它们从未被访问过。

你可以采取一些措施来缓解这些包的大小和性能问题。通过把 AngularJS 应用程序分离到一个单独的发布包中，你就可以利用惰性加载技术来只在必要的时候才加载、引导和渲染这个 AngularJS 应用。这种策略减少了你的初始发布包大小，推迟了同时加载两个框架的潜在影响 —— 直到绝对必要时才加载，以便让你的应用尽可能高效地运行。

下面的步骤介绍了应该如何去做：

• 为 AngularJS 发布包设置一个回调函数。
• 创建一个服务，以便惰性加载并引导你的 AngularJS 应用。
• 为 AngularJS 内容创建一个可路由的组件
• 为 AngularJS 特有的 URL 创建自定义的 ​matcher ​函数，并为 AngularJS 的各个路由配上带有自定义匹配器的 Angular 路由器。

为惰性加载 AngularJS 创建一个服务

在 Angular 的版本 8 中，惰性加载代码只需使用动态导入语法 ​import('...')​ 即可。在这个应用中，你创建了一个新服务，它使用动态导入技术来惰性加载 AngularJS。

import { Injectable } from '@angular/core';
import * as angular from 'angular';

@Injectable({
  providedIn: 'root'
})
export class LazyLoaderService {
  private app: angular.auto.IInjectorService | undefined;

  load(el: HTMLElement): void {
    import('./angularjs-app').then(app => {
      try {
        this.app = app.bootstrap(el);
      } catch (e) {
        console.error(e);
      }
    });
  }

  destroy() {
    if (this.app) {
      this.app.get('$rootScope').$destroy();
    }
  }
}

该服务使用 ​import()​ 方法惰性加载打包好的 AngularJS 应用。这会减少应用初始包的大小，因为你尚未加载用户目前不需要的代码。你还要提供一种方法，在加载完毕后手动启动它。AngularJS 提供了一种使用 angular.bootstrap() 方法并传入一个 HTML 元素来手动引导应用的方法。你的 AngularJS 应用也应该公开一个用来引导 AngularJS 应用的 ​bootstrap ​方法。

要确保 AngularJS 应用中的任何清理工作都触发过（比如移除全局监听器），你还可以实现一个方法来调用 ​$rootScope.destroy()​ 方法。

import * as angular from 'angular';
import 'angular-route';

const appModule = angular.module('myApp', [
  'ngRoute'
])
.config(['$routeProvider', '$locationProvider',
  function config($routeProvider: angular.route.IRouteProvider,
                  $locationProvider: angular.ILocationProvider) {
    $locationProvider.html5Mode(true);

    $routeProvider.
      when('/users', {
        template: `
          

            Users Page
          
        `
      }).
      otherwise({
        template: ''
      });
  }]
);

export function bootstrap(el: HTMLElement) {
  return angular.bootstrap(el,  [appModule.name]);
}

你的 AngularJS 应用只配置了渲染内容所需的那部分路由。而 Angular 路由器会处理应用中其余的路由。你的 Angular 应用中会调用公开的 ​bootstrap ​方法，让它在加载完发布包之后引导 AngularJS 应用。

注意：当 AngularJS 加载并引导完毕后，监听器（比如路由配置中的那些监听器）会继续监听路由的变化。为了确保当 AngularJS 尚未显示时先关闭监听器，请在 $routeProvider 中配置一个渲染空模板 ​otherwise ​选项。这里假设 Angular 将处理所有其它路由。

创建一个用来渲染 AngularJS 内容的组件

在 Angular 应用中，你需要一个组件作为 AngularJS 内容的占位符。该组件使用你创建的服务，并在组件初始化完成后加载并引导你的 AngularJS 应用。

import { Component, OnInit, OnDestroy, ElementRef } from '@angular/core';
import { LazyLoaderService } from '../lazy-loader.service';

@Component({
  selector: 'app-angular-js',
  template: '
'
})
export class AngularJSComponent implements OnInit, OnDestroy {
  constructor(
    private lazyLoader: LazyLoaderService,
    private elRef: ElementRef
  ) {}

  ngOnInit() {
    this.lazyLoader.load(this.elRef.nativeElement);
  }


  ngOnDestroy() {
    this.lazyLoader.destroy();
  }
}

当 Angular 的路由器匹配到使用 AngularJS 的路由时，会渲染 AngularJSComponent，并在 AngularJS 的 ng-view 指令中渲染内容。当用户导航离开本路由时，$rootScope 会在 AngularJS 应用中被销毁。

为那些 AngularJS 路由配置自定义路由匹配器

为了配置 Angular 的路由器，你必须为 AngularJS 的 URL 定义路由。要匹配这些 URL，你需要添加一个使用 ​matcher ​属性的路由配置。这个 ​matcher ​允许你使用自定义模式来匹配这些 URL 路径。Angular 的路由器会首先尝试匹配更具体的路由，比如静态路由和可变路由。当它找不到匹配项时，就会求助于路由配置中的自定义匹配器。如果自定义匹配器与某个路由不匹配，它就会转到用于 "捕获所有"（catch-all）的路由，比如 404 页面。

下面的例子给 AngularJS 路由定义了一个自定义匹配器函数。

export function isAngularJSUrl(url: UrlSegment[]) {
  return url.length > 0 && url[0].path.startsWith('users') ? ({consumed: url}) : null;
}

下列代码往你的路由配置中添加了一个路由对象，其 ​matcher ​属性是这个自定义匹配器，而 ​component ​属性为 ​AngularJSComponent​。

import { NgModule } from '@angular/core';
import { Routes, RouterModule, UrlSegment } from '@angular/router';
import { AngularJSComponent } from './angular-js/angular-js.component';
import { HomeComponent } from './home/home.component';
import { App404Component } from './app404/app404.component';

// Match any URL that starts with `users`
export function isAngularJSUrl(url: UrlSegment[]) {
  return url.length > 0 && url[0].path.startsWith('users') ? ({consumed: url}) : null;
}

export const routes: Routes = [
  // Routes rendered by Angular
  { path: '', component: HomeComponent },

  // AngularJS routes
  { matcher: isAngularJSUrl, component: AngularJSComponent },

  // Catch-all route
  { path: '**', component: App404Component }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

当你的应用匹配上需要 AngularJS 的路由时，AngularJS 应用就会被加载并引导。AngularJS 路由会匹配必要的 URL 以渲染它们的内容，而接下来你的应用就会同时运行 AngularJS 和 Angular 框架。

使用统一的 Angular 位置服务（Location）

在 AngularJS 中，$location 服务会处理所有路由配置和导航工作，并对各个 URL 进行编码和解码、重定向、以及与浏览器 API 交互。Angular 在所有这些任务中都使用了自己的底层服务 ​Location​。

当你从 AngularJS 迁移到 Angular 时，你会希望把尽可能多的责任移交给 Angular，以便利用新的 API。为了帮你完成这种转换，Angular 提供了 ​LocationUpgradeModule​。该模块支持统一位置服务，可以把 AngularJS 中 ​$location​ 服务的职责转给 Angular 的 ​Location ​服务。

要使用 ​LocationUpgradeModule​，就会从 ​@angular/common/upgrade​ 中导入此符号，并使用静态方法 ​LocationUpgradeModule.config()​ 把它添加到你的 ​AppModule ​导入表（​imports​）中。

// Other imports ...
import { LocationUpgradeModule } from '@angular/common/upgrade';

@NgModule({
  imports: [
    // Other NgModule imports...
    LocationUpgradeModule.config()
  ]
})
export class AppModule {}

​LocationUpgradeModule.config()​ 方法接受一个配置对象，该对象的 ​useHash ​为 ​LocationStrategy​，​hashPrefix ​为 URL 前缀。

​useHash ​属性默认为 ​false​，而 ​hashPrefix ​默认为空 ​string​。传递配置对象可以覆盖默认值。

LocationUpgradeModule.config({
  useHash: true,
  hashPrefix: '!'
})

这会为 AngularJS 中的 ​$location​ 提供者注册一个替代品。一旦注册成功，导航过程中所有由 AngularJS 触发的导航、路由广播消息以及任何必需的变更检测周期都会改由 Angular 进行处理。这样，你就可以通过这个唯一的途径在此混合应用的两个框架间进行导航了。

要想在 AngularJS 中使用 ​$location​ 服务作为提供者，你需要使用一个工厂提供者来降级 ​$locationShim​。

// Other imports ...
import { $locationShim } from '@angular/common/upgrade';
import { downgradeInjectable } from '@angular/upgrade/static';

angular.module('myHybridApp', [...])
  .factory('$location', downgradeInjectable($locationShim));

一旦引入了 Angular 路由器，你只要使用 Angular 路由器就可以通过统一位置服务来触发导航了，同时，你仍然可以通过 AngularJS 和 Angular 进行导航。

PhoneCat 升级教程

在本节和下节中，你将看一个完整的例子，它使用 ​upgrade ​模块准备和升级了一个应用程序。 该应用就是来自原 AngularJS 教程中的Angular PhoneCat。 那是我们很多人当初开始 Angular 探险之旅的地方。 现在，你会看到如何把该应用带入 Angular 的美丽新世界。

这期间，你将学到如何在实践中应用准备指南中列出的那些重点步骤： 你先让该应用向 Angular 看齐，然后为它引入 SystemJS 模块加载器和 TypeScript。

本教程基于 ​angular-phonecat​ 教程的 1.5.x 版本，该教程保存在代码仓库的 1.5-snapshot 分支中。接下来，克隆 angular-phonecat 代码仓库，check out ​1.5-snapshot​ 分支并应用这些步骤。

在项目结构方面，工作的起点是这样的：

这确实是一个很好地起点。这些代码使用了 AngularJS 1.5 的组件 API，并遵循了 AngularJS 风格指南进行组织， 在成功升级之前，这是一个很重要的准备步骤。

• 每个组件、服务和过滤器都在它自己的源文件中 —— 就像单一规则所要求的。
• ​core​、​phone-detail​ 和 ​phone-list​ 模块都在它们自己的子目录中。那些子目录除了包含 HTML 模板之外，还包含 JavaScript 代码，它们共同完成一个特性。 这是按特性分目录的结构 和模块化规则所要求的。
• 单元测试都和应用代码在一起，它们很容易找到。就像规则 组织测试文件中要求的那样。

切换到 TypeScript

因为你将使用 TypeScript 编写 Angular 的代码，所以在开始升级之前，先要把 TypeScript 的编译器设置好。

你还将开始逐步淘汰 Bower 包管理器，换成 NPM。后面你将使用 NPM 来安装新的依赖包，并最终从项目中移除 Bower。

先把 TypeScript 包安装到项目中。

npm i typescript --save-dev

还要为那些没有自带类型信息的库（比如 AngularJS、AngularJS Material 和 Jasmine）安装类型定义文件。

对于 PhoneCat 应用，我们可以运行下列命令来安装必要的类型定义文件：

npm install @types/jasmine @types/angular @types/angular-animate @types/angular-aria @types/angular-cookies @types/angular-mocks @types/angular-resource @types/angular-route @types/angular-sanitize --save-dev

如果你正在使用 AngularJS Material，你可以通过下列命令安装其类型定义：

npm install @types/angular-material --save-dev

你还应该要往项目目录下添加一个 ​tsconfig.json​ 文件，​tsconfig.json​ 文件会告诉 TypeScript 编译器如何把 TypeScript 文件转成 ES5 代码，并打包进 CommonJS 模块中。

最后，你应该把下列 npm 脚本添加到 ​package.json​ 中，用于把 TypeScript 文件编译成 JavaScript （根据 ​tsconfig.json​ 的配置）：

"scripts": {
  "tsc": "tsc",
  "tsc:w": "tsc -w",
  ...

现在，从命令行中用监视模式启动 TypeScript 编译器：

npm run tsc:w

让这个进程一直在后台运行，监听任何变化并自动重新编译。

接下来，把 JavaScript 文件转换成 TypeScript 文件。 由于 TypeScript 是 ECMAScript 2015 的一个超集，而 ES2015 又是 ECMAScript 5 的超集，所以你可以简单的把文件的扩展名从 ​.js​ 换成 ​.ts​， 它们还是会像以前一样工作。由于 TypeScript 编译器仍在运行，它会为每一个 ​.ts​ 文件生成对应的 ​.js​ 文件，而真正运行的是编译后的 ​.js​ 文件。 如果你用 ​npm start​ 开启了本项目的 HTTP 服务器，你会在浏览器中看到一个功能完好的应用。

有了 TypeScript，你就可以从它的一些特性中获益了。此语言可以为 AngularJS 应用提供很多价值。

首先，TypeScript 是一个 ES2015 的超集。任何以前用 ES5 写的程序(就像 PhoneCat 范例)都可以开始通过 TypeScript 纳入那些添加到 ES2015 中的新特性。 这包括 ​let​、​const​、箭头函数、函数默认参数以及解构(destructure)赋值。

你能做的另一件事就是把类型安全添加到代码中。这实际上已经部分完成了，因为你已经安装了 AngularJS 的类型定义。 TypeScript 会帮你检查是否正确调用了 AngularJS 的 API，—— 比如往 Angular 模块中注册组件。

你还能开始把类型注解添加到自己的代码中，来从 TypeScript 的类型系统中获得更多帮助。 比如，你可以给 ​checkmark ​过滤器加上注解，表明它期待一个 ​boolean ​类型的参数。 这可以更清楚的表明此过滤器打算做什么

angular.
  module('core').
  filter('checkmark', () => {
    return (input: boolean) => input ? '\u2713' : '\u2718';
  });

在 ​Phone ​服务中，你可以明确的把 ​$resource​&nb

网站栏目：创新互联Angular教程：Angular升级说明
网站网址：http://www.mswzjz.cn/qtweb/news27/424727.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能