遮天,欢乐颂小说在线阅读

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

創(chuàng)新互聯(lián)Angular教程：Angular 搭建升級(jí)環(huán)境

準(zhǔn)備從 AngularJS 升級(jí)

注意：本指南僅僅適用于從 AngularJS 升級(jí)和注重性能的升級(jí)。本指南中提到的升級(jí)指南使用的是已棄用的快速上手 Github 倉(cāng)庫(kù)，它是在 Angular CLI 推出之前創(chuàng)建的。

對(duì)于所有其它場(chǎng)景，請(qǐng)參閱建立本地開(kāi)發(fā)環(huán)境中的步驟。
站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到梁園網(wǎng)站設(shè)計(jì)與梁園網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、空間域名、虛擬主機(jī)、企業(yè)郵箱。業(yè)務(wù)覆蓋梁園地區(qū)。

本指南講的是如何在你自己的機(jī)器上進(jìn)行本地化開(kāi)發(fā)。利用 github 上的《快速上手》種子在你的電腦上搭建一個(gè)新項(xiàng)目是很快很容易的。

前提條件：確保你已經(jīng)安裝好了 ?Node.js? 和 ?npm?。

克隆

運(yùn)行下列命令來(lái)執(zhí)行克隆并啟動(dòng)步驟。

git clone https://github.com/angular/quickstart.git quickstart
cd quickstart
npm install

下載

下載《快速上手》種子并解壓到你的項(xiàng)目目錄中。然后執(zhí)行下面的命令完成剩余步驟。

cd quickstart
npm install

刪除非必需文件（可選）

你可以快速刪除一些涉及到測(cè)試和維護(hù)快速開(kāi)始版本庫(kù)的 非必需 文件（包括所有 git 相關(guān)的文件如 ?.git? 文件夾和 ?.gitignore??。?。

請(qǐng)只在開(kāi)始時(shí)執(zhí)行此刪除操作，以防你自己的測(cè)試和 git 文件被意外刪除！

在項(xiàng)目目錄下打開(kāi)一個(gè)終端窗口，并根據(jù)你的操作系統(tǒng)執(zhí)行以下命令：

OS/X (bash)

xargs rm -rf < non-essential-files.osx.txt
rm src/app/*.spec*.ts
rm non-essential-files.osx.txt

Windows

for /f %i in (non-essential-files.txt) do del %i /F /S /Q
rd .git /s /q
rd e2e /s /q

更新依賴版本

由于不推薦使用快速入門(mén)倉(cāng)庫(kù)（它已不再更新），所以你需要一些額外的步驟來(lái)使用最新的 Angular。

刪除過(guò)時(shí)的 ?@angular/http? 包（全都來(lái)自 ?package.json > dependencies? 和 ?src/systemjs.config.js > SystemJS.config() > map? ）。
通過(guò)運(yùn)行以下命令來(lái)安裝最新版本的 Angular 框架包：

npm install --save @angular/common@latest @angular/compiler@latest @angular/core@latest @angular/forms@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/router@latest

通過(guò)運(yùn)行以下命令安裝 Angular 用到的其它包的最新版本（RxJS、TypeScript、Zone.js）：

npm install --save rxjs@latest zone.js@latest
npm install --save-dev typescript@latest

安裝 ?systemjs-plugin-babel? 包。稍后它將用于使用 SystemJS 加載 ES2015 格式的 Angular 框架文件。

npm install --save systemjs-plugin-babel@latest

為了能正確加載最新的 Angular 框架包（ES2015 格式），請(qǐng)?zhí)鎿Q ?src/systemjs.config.js? 中的相關(guān)條目：

System.config({
  /* . . . */
  map: {
    /* . . . */
    '@angular/core': 'npm:@angular/core/fesm2015/core.mjs',
    '@angular/common': 'npm:@angular/common/fesm2015/common.mjs',
    '@angular/common/http': 'npm:@angular/common/fesm2015/http.mjs',
    '@angular/compiler': 'npm:@angular/compiler/fesm2015/compiler.mjs',
    '@angular/platform-browser': 'npm:@angular/platform-browser/fesm2015/platform-browser.mjs',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/fesm2015/platform-browser-dynamic.mjs',
    '@angular/router': 'npm:@angular/router/fesm2015/router.mjs',
    '@angular/router/upgrade': 'npm:@angular/router/fesm2015/upgrade.mjs',
    '@angular/forms': 'npm:@angular/forms/fesm2015/forms.mjs',
    /* . . . */
  },
  /* . . . */
});

為了能夠正確加載最新的 RxJS 包，請(qǐng)?zhí)鎿Q ?src/systemjs.config.js? 中的相關(guān)條目：

System.config({
  /* . . . */
  map: {
    /* . . . */
    'rxjs': 'npm:rxjs/dist/cjs',
    'rxjs/operators': 'npm:rxjs/dist/cjs/operators',
    /* . . . */
  },
  /* . . . */
  packages: {
    /* . . . */
    'rxjs': {
      defaultExtension: 'js',
      format: 'cjs',
      main: 'index.js'
    },
    'rxjs/operators': {
      defaultExtension: 'js',
      format: 'cjs',
      main: 'index.js'
    },
    /* . . . */
  }
});

為了能夠加載 ?tslib ?包（這是由 TypeScript 轉(zhuǎn)譯后的文件所必需的），請(qǐng)將以下條目添加到 ?src/systemjs.config.js? ：

System.config({
  /* . . . */
  map: {
    /* . . . */
    'tslib': 'npm:tslib/tslib.js',
    /* . . . */
  },
  /* . . . */
});

為了使 SystemJS 能夠正確加載 ES2015 Angular 文件，請(qǐng)將以下條目添加到 ?src/systemjs.config.js? ：

System.config({
  /* . . . */
  map: {
    /* . . . */
    'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
    'systemjs-babel-build': 'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
  },

  transpiler: 'plugin-babel',
  /* . . . */
  packages: {
    /* . . . */
    'meta': {
      '*.mjs': {
        babelOptions: {
          es2015: false
        }
      }
    }
  }
});

最后，為了防止依賴項(xiàng)的 TypeScript 類型檢查錯(cuò)誤，請(qǐng)將以下條目添加到 ?src/tsconfig.json? ：

{
  "compilerOptions": {
    "skipLibCheck": true,
    // ...
  }
}

有了這些，你現(xiàn)在就可以運(yùn)行 ?npm start? 并構(gòu)建和啟動(dòng)應(yīng)用程序了。構(gòu)建后，應(yīng)用程序?qū)⒆詣?dòng)在新的瀏覽器選項(xiàng)卡中打開(kāi)，并在你更改源代碼時(shí)自動(dòng)重新加載。

《快速上手》種子庫(kù)里都有什么？

《快速上手》種子提供了一個(gè)基本的《快速上手》游樂(lè)場(chǎng)應(yīng)用，以及進(jìn)行本地開(kāi)發(fā)的其它必要文件。

提醒：“快速上手”種子項(xiàng)目是在 Angular CLI 之前創(chuàng)建的，因此這里講的會(huì)和 Angular CLI 創(chuàng)建的應(yīng)用有一些差異。

注意?/src?目錄中以下三個(gè) TypeScript (?.ts?) 文件：

src/app/app.component.ts

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

@Component({
  selector: 'app-root',
  template: 'Hello {{name}}'
})
export class AppComponent { name = 'Angular'; }

src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

src/main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

所有指南和烹飪書(shū)都至少有這幾個(gè)核心文件。每個(gè)文件都有獨(dú)特的用途，并且隨著應(yīng)用的成長(zhǎng)各自獨(dú)立演變。

?src/? 目錄之外的文件為構(gòu)建、部署和測(cè)試 app 相關(guān)的文件，他們只包括配置文件和外部依賴。

?src/? 目錄下的文件才“屬于”你的 app。除非明確指出，否則教程中添加的 TypeScript，HTML 和 CSS 文件都在 ?src/? 目錄下，大多數(shù)在 ?src/app? 目錄中。

?src/? 目錄文件詳情如下：

app/app.component.ts

定義與《快速上手》游樂(lè)場(chǎng)同樣的 AppComponent。它是根組件，隨著應(yīng)用的演變，它將變成一顆嵌套組件樹(shù)。

app/app.module.ts

定義 AppModule，根模塊為 Angular 描述如何組裝應(yīng)用。目前，它只聲明了 AppComponent。不久，它將聲明更多組件。

main.ts

使即時(shí) (JIT) 編譯器用編譯應(yīng)用并且在瀏覽器中啟動(dòng)并運(yùn)行應(yīng)用。對(duì)于大多數(shù)項(xiàng)目的開(kāi)發(fā)，這都是合理的選擇。而且它是在像 Stackblitz 這樣的在線編程環(huán)境中運(yùn)行例子的唯一選擇。你將在本文檔中學(xué)習(xí)其它編譯和開(kāi)發(fā)選擇。

文件	用途

附錄：使用 fakeAsync()/waitForAsync() 進(jìn)行測(cè)試

如果你使用 ?fakeAsync()/async()? 輔助函數(shù)來(lái)運(yùn)行單元測(cè)試，就要在測(cè)試的準(zhǔn)備文件中導(dǎo)入 ?zone.js/testing?。

如果你是用 ?Angular/CLI? 創(chuàng)建的項(xiàng)目，那么它已經(jīng)在 ?src/test.ts? 中導(dǎo)入過(guò)了。

在以前版本的 ?Angular ?中，下列文件曾被導(dǎo)入或添加到 html 文件中：

import 'zone.js/plugins/long-stack-trace-zone';
import 'zone.js/plugins/proxy';
import 'zone.js/plugins/sync-test';
import 'zone.js/plugins/jasmine-patch';
import 'zone.js/plugins/async-test';
import 'zone.js/plugins/fake-async-test';

你仍然可以分別導(dǎo)入這些文件，不過(guò)導(dǎo)入順序很重要，你必須在 sync-test、async-test、fake-async-test 和 jasmine-patch 之前導(dǎo)入 proxy。還要注意在 jasmine-patch 之前導(dǎo)入 sync-test。所以，建議你只導(dǎo)入 zone-testing 而不要分別加載那些文件。

當(dāng)前題目：創(chuàng)新互聯(lián)Angular教程：Angular 搭建升級(jí)環(huán)境
地址分享：http://m.fisionsoft.com.cn/article/coschdg.html