W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
注意:本指南僅僅適用于從 AngularJS 升級(jí)和注重性能的升級(jí)。 本指南中提到的升級(jí)指南使用的是已棄用的快速上手 Github 倉(cāng)庫(kù),它是在 Angular CLI 推出之前創(chuàng)建的。
對(duì)于所有其它場(chǎng)景,請(qǐng)參閱建立本地開發(fā)環(huán)境中的步驟。
本指南講的是如何在你自己的機(jī)器上進(jìn)行本地化開發(fā)。 利用 github 上的《快速上手》種子在你的電腦上搭建一個(gè)新項(xiàng)目是很快很容易的。
前提條件:確保你已經(jīng)安裝好了 ?Node.js
? 和 ?npm
?。
運(yùn)行下列命令來執(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ù)的 非必需 文件 (包括所有 git 相關(guān)的文件如 ?.git
? 文件夾和 ?.gitignore
??。?/p>
請(qǐng)只在開始時(shí)執(zhí)行此刪除操作,以防你自己的測(cè)試和 git 文件被意外刪除!
在項(xiàng)目目錄下打開一個(gè)終端窗口,并根據(jù)你的操作系統(tǒng)執(zhí)行以下命令:
xargs rm -rf < non-essential-files.osx.txt
rm src/app/*.spec*.ts
rm non-essential-files.osx.txt
for /f %i in (non-essential-files.txt) do del %i /F /S /Q
rd .git /s /q
rd e2e /s /q
由于不推薦使用快速入門倉(cāng)庫(kù)(它已不再更新),所以你需要一些額外的步驟來使用最新的 Angular。
@angular/http
? 包(全都來自 ?package.json > dependencies
? 和 ?src/systemjs.config.js > SystemJS.config() > map
? )。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
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
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',
/* . . . */
},
/* . . . */
});
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',
/* . . . */
},
/* . . . */
});
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
}
}
}
}
});
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)卡中打開,并在你更改源代碼時(shí)自動(dòng)重新加載。
《快速上手》種子 提供了一個(gè)基本的《快速上手》游樂場(chǎng)應(yīng)用,以及進(jìn)行本地開發(fā)的其它必要文件。
提醒:“快速上手”種子項(xiàng)目是在 Angular CLI 之前創(chuàng)建的,因此這里講的會(huì)和 Angular CLI 創(chuàng)建的應(yīng)用有一些差異。
注意?/src
?目錄中以下三個(gè) TypeScript (?.ts
?) 文件:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: '<h1>Hello {{name}}</h1>'
})
export class AppComponent { name = 'Angular'; }
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 { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
所有指南和烹飪書都至少有這幾個(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/
? 目錄文件詳情如下:
文件 |
用途 |
---|---|
|
定義與《快速上手》游樂場(chǎng)同樣的 |
|
定義 |
|
使即時(shí) (JIT) 編譯器用編譯應(yīng)用并且在瀏覽器中啟動(dòng)并運(yùn)行應(yīng)用。 對(duì)于大多數(shù)項(xiàng)目的開發(fā),這都是合理的選擇。而且它是在像 Stackblitz 這樣的在線編程環(huán)境中運(yùn)行例子的唯一選擇。 你將在本文檔中學(xué)習(xí)其它編譯和開發(fā)選擇。 |
如果你使用 ?fakeAsync()/async()
? 輔助函數(shù)來運(yùn)行單元測(cè)試,就要在測(cè)試的準(zhǔn)備文件中導(dǎo)入 ?zone.js/testing
?。
如果你是用 ?
Angular/CLI
? 創(chuàng)建的項(xiàng)目,那么它已經(jīng)在 ?src/test.ts
? 中導(dǎo)入過了。
在以前版本的 ?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)入這些文件,不過導(dǎo)入順序很重要,你必須在 sync-test
、async-test
、fake-async-test
和 jasmine-patch
之前導(dǎo)入 proxy
。還要注意在 jasmine-patch
之前導(dǎo)入 sync-test
。所以,建議你只導(dǎo)入 zone-testing
而不要分別加載那些文件。
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: