Angular 2 開發(fā)環(huán)境

2022-06-07 14:29 更新

在本章中,讓我們研究 Angular 2的開發(fā)環(huán)境。

  • Angular使用 TypeScript 它是開發(fā)Angular應用程序的主要語言。

  • TypeScript是一個超級JavaScript集合,它被遷移到TypeScript,用TypeScript編寫的代碼不太容易出現(xiàn)運行時錯誤。

要設置開發(fā)環(huán)境,請按照以下步驟操作:

步驟(1):通過在命令提示符下鍵入以下命令,在本地驅動器中創(chuàng)建項目文件夾。

mkdir angular2-demo
cd angular2-demo

創(chuàng)建配置文件

步驟(2):您需要創(chuàng)建 tsconfig.json ,這是TypeScript編譯器配置文件。 它指導編譯器生成JavaScript文件。

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

步驟(3):在項目文件夾 angular2-demo 中創(chuàng)建 typings.json 文件,如下所示:

typings.json
{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160602141332",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160621231320"
  }
}

大量的JavaScript庫擴展了具有特征和語法的JavaScript環(huán)境,而這些特性和語法本身不能被TypeScript編譯器識別。 typings.json 文件用于在Angular應用程序中標識TypeScript定義文件。

在上面的代碼中,有三種類型的文件,如下所示:

  • core-js :它為我們的ES5瀏覽器帶來ES2015 / ES6功能。

  • jasmine :這是Jasmine測試框架的類型。

  • node :它用于引用nodejs環(huán)境中的對象的代碼。

這些類型用于開發(fā)更大的Angular應用。

步驟(4):使用以下代碼將 package.json 文件添加到您的 angular2-demo 項目文件夾:

package.json
{
  "name": "angular2-demo",
  "version": "1.0.0",
  "scripts": {
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "typings": "typings",
    "postinstall": "typings install"
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.7",
    "systemjs": "0.19.22",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.5.15"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.1.0",
    "typescript": "^1.7.5",
    "typings":"^0.6.8"
  }
}

package.json 將包含我們的應用所需的包。 這些包使用npm(節(jié)點程序包管理器)進行安裝和維護。 要安裝 npm 請點擊此處 。

步驟(5):要安裝軟件包,請在命令提示符下運行以下npm命令。

npm install
Error messages in red may appear while installing npm, just ignore them.

創(chuàng)建我們的第一個Angular組件

A component is the fundamental concept of Angular. A component is a class that controls a view template - a part of a web page where information to the user is displayed and user feedback is responded. Components are required to build Angular apps.

步驟(6):在項目文件夾中的Angular應用程序組件的位置創(chuàng)建一個名為 app / 的子文件夾。 您可以使用以下命令創(chuàng)建文件夾:

mkdir app
cd app

步驟(7):您創(chuàng)建的文件需要以 .ts 擴展名保存。 使用以下代碼在您的 app / 文件夾中創(chuàng)建一個名為 environment_app.component.ts 的文件:

environment_app.component.ts
import {Component, View} from "angular2/core";

@Component({
   selector: 'my-app'
})

@View({
  template: '<h2>My First Angular 2 App</h2>'
})

export class AppComponent {

}
  • 上述代碼將從 angular2 / core 導入組件 View

  • @Component 是一個Angular 2裝飾器,允許您將元數(shù)據與組件類相關聯(lián)。

  • my-app 可以用作HTML標記來注入,并且可以用作組件。

  • @view 包含一個模板,用于告訴Angular如何渲染視圖。

  • export 指定,此組件將在文件外部可用。

步驟(8):接下來,使用以下代碼創(chuàng)建 environment_main.ts 文件:

environment_main.ts
import {bootstrap} from "angular2/platform/browser"
import {AppComponent} from "./environment_app.component"

bootstrap(AppComponent);
  • environment_main.ts 文件告訴Angular加載組件。

  • 要啟動應用程序,我們需要導入Angular的瀏覽器引導函數(shù)和應用程序的根組件。

  • 導入后,通過傳遞根組件類型(即 AppComponent )來調用 bootstrap 。

步驟(9):現(xiàn)在使用以下代碼在您的項目文件夾 angular2-demo / 中創(chuàng)建 index.html

index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
    <script src="https://atts.w3cschool.cn/attachments/tuploads/angular2/es6-shim.min.js"></script>
    <script src="https://atts.w3cschool.cn/attachments/tuploads/angular2/system-polyfills.js"></script>
    <script src="https://atts.w3cschool.cn/attachments/tuploads/angular2/angular2-polyfills.js"></script>
    <script src="https://atts.w3cschool.cn/attachments/tuploads/angular2/system.js"></script>
    <script src="https://atts.w3cschool.cn/attachments/tuploads/angular2/typescript.js"></script>
    <script src="https://atts.w3cschool.cn/attachments/tuploads/angular2/Rx.js"></script>
    <script src="https://atts.w3cschool.cn/attachments/tuploads/angular2/angular2.dev.js"></script>
    <script>
      System.config({
        transpiler: 'typescript',
        typescriptOptions: { emitDecoratorMetadata: true },
        packages: {'app': {defaultExtension: 'ts'}}
      });
      System.import('/app/environment_main')
            .then(null, console.error.bind(console));
    </script>
  </head>
<body>
   <my-app>Loading...</my-app>
</body>
</html>

Angular將使用我們的組件在瀏覽器中啟動該應用,并將其放置在 index.html 上的特定位置。

編譯并運行

步驟(10):要運行應用程序,請在終端窗口中鍵入以下命令:

npm start

上述命令運行兩個并行節(jié)點進程,如下所示:

  • TypeScript編譯器在watch模式下

  • lite-server(靜態(tài)服務器)在瀏覽器中加載,并在應用程序文件更改時刷新瀏覽器。

稍后,瀏覽器選項卡將打開,并顯示以下輸出:


以上內容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號