AngularJS 2.0 迁移指南

Anurag Sharma

5.00/5 (1投票)

2016年9月1日

CPOL

4分钟阅读

22896

Angular 2.0 迁移指南旨在帮助开发人员和技术负责人将 Angular 1.0 框架迁移到 Angular 2.0。

引言

如今，Angular 是使用最广泛的 Web 开发框架。其 MV-whatever 框架在近几年吸引了众多 Web 开发者的目光。它是一个支持端到端操作的框架。

Angular 2.0 团队引入了新的变更检测系统以实现更快的渲染，承诺支持同构（服务器端）渲染，并旨在与 ReactJS 等 UI 特定库展开激烈竞争。

话虽如此，现在是学习 Angular 2.0 的好时机，但更重要的是学习如何将 Angular 1 应用程序迁移到 Angular 2.0。

要涵盖的主题

迁移阶段和级别
迁移级别
第一阶段
- 级别 1：打好基础
- 级别 2：Angular 2.0 军火库
阶段 2：升级到 Angular 2.0
学习资源与参考

迁移过程阶段

迁移阶段

Angular 2.0 很可能在 2016 年发布。现在是学习迁移过程的好时机。分为两个阶段：

准备工作
升级

本指南提供了迁移的深入准备步骤。实际升级和将 Angular 2.0 添加到项目构建将随着发布一起包含。

迁移步骤 – 级别 1

遵循 John Papa 的 Angular 1 开发风格指南
更新到最新的 Angular 1 版本
所有新开发使用组件
将控制器切换为组件（组件指令）
从指令中移除不兼容的功能（特定于 Angular 2）
实现手动引导（不再使用 ng-app）

迁移步骤 – 级别 2

添加 TypeScript 编译和构建
开始使用 ES6 或 Javascript 2015
将控制器和服务切换为 ES6 类
将 Angular 2.0 添加到您的项目中 -（本文未涵盖）
一次迁移一个组件 -（本文未涵盖）

级别 1：打好基础

步骤 1：遵循 John Papa 推荐的 Angular 1.0 风格指南

步骤 2：通过依赖管理器更新到最新的 Angular 1

鲍尔
Node 包

步骤 3：所有新开发使用 Angular 1.5 组件

Angular 有三种类型的指令

组件 (Component)
- 隔离作用域
- 包含模板或视图
- 用于将实际视图划分为多个子部分
- 可称为 Web 组件或可重用视图
装饰器 (Decorator)
- JavaScript 装饰器模式的派生
- 增强包含组件的属性
- 通常限制为“A”属性指令
结构型
- 操作 DOM
- 控制从视图中删除 DOM 元素
- 不建议开发自定义结构指令

Angular 1.5 组件用于替换应用程序中的组件或元素类型指令。这是迈向组件驱动应用程序设计的重要一步，因为新组件可以在路由器中配置以提供导航。

新组件可以替换您之前作为状态和元素指令编写的视图、子视图和子子视图。

要了解更多关于 Angular 1.5 组件的信息，请参阅文档

https://docs.angularjs.org/guide/component

步骤 4：将旧控制器转换为 Angular 1.5 组件。这是一个例子

旧控制器

var FirstModule = angular.module('FirstModule');
FirstModule.config(function(){
  // View and route configuration
})
FirstModule.controller(FirstModuleCtrl);
function FirstModuleCtrl(DataService) {
}

新组件

var app = angular.module('app')
var config = {
templateUrl : 'FirstComponent/FirstComponent.hmtl',
bindings: {
someAttribute: '='
},
controller: FirstComponentCtrl
}
app.component('FirstComponent', config)
function FirstComponentCtrl () {
this.data = 'This value should reflect in the HTML'

步骤 5：从指令中移除不兼容的功能

编译
终结符
优先级
替换

注意：我们不必修改属性指令，因为它们无法升级到 Angular 2.0，最终我们会重写它们。

步骤 6：手动引导

Angular 2.0 使用手动引导。要在 Angular 1 中执行手动引导，请将此添加到您的App.js（引导逻辑）中，并移除指令引导（ng-app）。

新的 ES6 语法

angular.element(document).ready( () => {
    angular.bootstrap(document.body, ['app'])
})

旧的 ES5 语法

angular.element(document).ready( function () {
     angular.bootstrap(document.body, ['app'])
})

注意：最重要的一步，因为没有它我们无法迁移到 2.0。

级别 2：Angular 2.0 军火库

步骤 1：将 TypeScript 添加到项目构建中

将 TypeScript 和 typings node 模块添加到您的 devDependencies 中

     npm install typescript typings - - save-dev

将 typescript 编译器和 typings 命令添加到 npm 脚本（package.json）中。

"scripts": {
    "start": "node ./server/server.js",
    "dev": "nodemon ./server/server.js -w ./server",
    "test": "karma start",
    "tsc": "tsc -p . -w --outDir build",
    "typings": "typings"
  },

步骤 2：添加 TypeScript 配置

在项目根目录中创建一个tsconfig.json文件。此配置文件将用于添加 TypeScript 构建路径和包含 typings。

{
  "compilerOptions": {
    "target": "ES5",
    "module": "system",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false
  },
  "exclude": [
    "node_modules",
    "typings/main.d.ts",
    "typings/main"
  ]
}

将编译后的源文件存储在哪里？

与.ts文件相同的目录
- 使用相对路径的优势
- 移除构建文件无需配置
在一个单独的构建目录中
- 目录看起来很干净，只包含.ts文件
- 需要通过构建工具监视脚本以供开发服务器使用

步骤 3：将控制器切换为 ES6 类

在这里，我们将重写在步骤 2 - 新组件中定义的控制器。

class FirstComponentCtrl {
  $location: any;
  auth: any;
  data: string;

  constructor ($location, auth) {
    this.$location = $location;
    this.auth = auth;
  }

  someFunc () {
    this.data = 'should reflect in the view';
  }
}

步骤 4：将服务切换为 ES6 类

var App = angular.module('app')

App.service('MyService', MyService)

class MyService {
  $q: any;
  auth: any;
  data: string;

  constructor ($q, auth) {
    this.$q = $q;
    this.auth = auth;
  }

  someFunc () {
    // Do some AJAX Call
    // Returns promise
  }
}

迁移阶段 2 – 升级到 Angular 2.0

步骤 5：添加 Angular 2.0

建议等待 Angular 2.0 的稳定发布。在将 Angular 2.0 添加到项目后，我们将一次升级或重写一个模块。

Angular 2.0 发布后，本指南将进行扩展。