Angular 6.0已發版: Angular快速入門

Angular 6.0.0 于2018年5月4日正式釋出，今天我們一起來跟着其官網( https://angular.io/guide/quickstart

)的例子做個簡單入門吧！

“Angular 6.0.0 正式釋出，新版本重點關注工具鍊以及工具鍊在 Angular 中的運作速度問題。這次更新還包括架構包（@angular/core、@angular/common、@angular/compiler 等）、Angular CLI、Angular Material + CDK，這主要是為了解決相容問題，這些項目的更新檔版本将根據項目需求釋出。” (前端之巅)

關于 TypeScript :

Angular 使用 TypeScript 編寫。

TypeScript 是一種由微軟開發的自由和開源的程式設計語言，主要提供了類型系統和對 ES6 的支援。 TypeScript 是 JavaScript 的一個超集，它可以編譯成普通的 JavaScript 代碼。 TypeScript 代碼檔案字尾為

.ts

。

Angular2.0 之前的版本（1.x）叫做 AngularJS。

AngularJS 是一款開源的 JavaScript

MV*

（MVW、MVVM、MVC）架構。AngularJS 最初由 Misko Hevery 和 Adam Abrons 于2009年開發，後來由 Google 公司接管。

關于 Angular CLI 指令行接口:

Angular CLI 是一個指令行工具，可以很友善的進行建立項目、添加檔案、測試、建構部署等操作。

步驟1: 設定開發環境

需要安裝有 Node.js 和 npm, 可以使用 -v 指令檢視其版本:

$ node -v
v10.2.0

$ npm -v       
6.1.0

全局安裝 Angular CLI :

npm install -g @angular/cli

執行執行個體如下:

$ sudo npm install -g @angular/cli
/usr/local/bin/ng -> /usr/local/lib/node_modules/@angular/cli/bin/ng

> @angular/[email protected] postinstall /usr/local/lib/node_modules/@angular/cli
> node ./bin/ng-update-message.js

+ @angular/[email protected]
updated 1 package in 3.482s

檢視安裝結果:

$ ng -v
Angular CLI: 6.0.7
Node: 10.2.0
OS: darwin x64
Angular: 
... 

Package                      Version
--------------------------------------
@angular-devkit/architect    0.6.7
@angular-devkit/core         0.6.7
@angular-devkit/schematics   0.6.7
@schematics/angular          0.6.7
@schematics/update           0.6.7
rxjs                         6.2.0
typescript                   2.7.2

步驟2: 建立一個項目

打開終端，使用

ng new

指令來建立:

ng new my-app

$ ng new my-app
CREATE my-app/README.md (1022 bytes)
CREATE my-app/angular.json (3548 bytes)
CREATE my-app/package.json (1310 bytes)
CREATE my-app/tsconfig.json (384 bytes)
CREATE my-app/tslint.json (2805 bytes)
CREATE my-app/.editorconfig (245 bytes)
CREATE my-app/.gitignore (503 bytes)
CREATE my-app/src/environments/environment.prod.ts (51 bytes)
CREATE my-app/src/environments/environment.ts (631 bytes)
CREATE my-app/src/favicon.ico (5430 bytes)
CREATE my-app/src/index.html (292 bytes)
CREATE my-app/src/main.ts (370 bytes)
CREATE my-app/src/polyfills.ts (3194 bytes)
CREATE my-app/src/test.ts (642 bytes)
CREATE my-app/src/assets/.gitkeep (0 bytes)
CREATE my-app/src/styles.css (80 bytes)
CREATE my-app/src/browserslist (375 bytes)
CREATE my-app/src/karma.conf.js (964 bytes)
CREATE my-app/src/tsconfig.app.json (194 bytes)
CREATE my-app/src/tsconfig.spec.json (282 bytes)
CREATE my-app/src/tslint.json (314 bytes)
CREATE my-app/src/app/app.module.ts (314 bytes)
CREATE my-app/src/app/app.component.css (0 bytes)
CREATE my-app/src/app/app.component.html (1141 bytes)
CREATE my-app/src/app/app.component.spec.ts (989 bytes)
CREATE my-app/src/app/app.component.ts (207 bytes)
CREATE my-app/e2e/protractor.conf.js (752 bytes)
CREATE my-app/e2e/src/app.e2e-spec.ts (302 bytes)
CREATE my-app/e2e/src/app.po.ts (208 bytes)
CREATE my-app/e2e/tsconfig.e2e.json (213 bytes)

> [email protected] install /Users/wang/angular/my-app/node_modules/fsevents
> node install

[fsevents] Success: "/Users/wang/angular/my-app/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile

> [email protected] install /Users/wang/angular/my-app/node_modules/node-sass
> node scripts/install.js

Cached binary found at /Users/wangtest/.npm/node-sass/4.9.0/darwin-x64-64_binding.node

> [email protected] postinstall /Users/wang/angular/my-app/node_modules/node-sass
> node scripts/build.js

Binary found at /Users/wang/angular/my-app/node_modules/node-sass/vendor/darwin-x64-64/binding.node
Testing binary
Binary is fine

> @angular/[email protected] postinstall /Users/wang/angular/my-app/node_modules/@angular/cli
> node ./bin/ng-update-message.js

added 1167 packages from 1293 contributors and audited 21844 packages in 39.505s
found 13 vulnerabilities (9 low, 4 high)
  run `npm audit fix` to fix them, or `npm audit` for details
    Successfully initialized git.

進入 my-app 目錄，檢視一下目錄結構:

$ cd my-app 
$ ll
total 752
-rw-r--r--    1 wangtest  staff   1.0K  6  6 09:35 README.md
-rw-r--r--    1 wangtest  staff   3.5K  6  6 09:35 angular.json
drwxr-xr-x    5 wangtest  staff   170B  6  6 09:35 e2e
drwxr-xr-x  810 wangtest  staff    27K  6  6 09:35 node_modules
-rw-r--r--    1 wangtest  staff   354K  6  6 09:36 package-lock.json
-rw-r--r--    1 wangtest  staff   1.3K  6  6 09:36 package.json
drwxr-xr-x   16 wangtest  staff   544B  6  6 09:35 src
-rw-r--r--    1 wangtest  staff   384B  6  6 09:35 tsconfig.json
-rw-r--r--    1 wangtest  staff   2.7K  6  6 09:35 tslint.json

步驟3: 啟動應用

進入 my-app 目錄，使用

ng serve

指令來啟動服務。

$ ng serve --open
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
                                                                                          
Date: 2018-06-06T01:37:56.467Z
Hash: e7f3a0dd961d09e46007
Time: 8915ms
chunk {main} main.js, main.js.map (main) 10.7 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 15.6 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.39 MB [initial] [rendered]
ℹ ｢wdm｣: Compiled successfully.

指令

ng serve

，建立一個服務，并監控項目中的檔案，如果檔案有變動，會自動建構應用，可以在浏覽器中實時檢視效果。

參數

--open

，可以在自動直接打開浏覽器，并通路應用。

步驟4: 編輯 Angular 元件 (Angular component)

通過 Angular CLI 指令行工具，已經建立了 Angular component 元件。在根目錄的 component 叫做

app-root

. 在

./src/app/app.component.ts

檔案中可以看到根元件内容。

打開 src/app/app.component.ts 檔案:

修改 title 内容，将 “app” 為 “My First Angular App”。再增加一個變量 author，内容為 "Web後端技術學習社群"，一會将在模闆檔案中展示。

// src/app/app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My First Angular App';
  author = 'Web後端技術學習社群';
}

打開 src/app/app.component.html 檔案，修改模闆内容：

<div style="text-align:center">
  <h1>
     Welcome to {{ title }}!
  </h1>

  <p> {{ author }} </p>
</div>

打開 src/app/app.component.css 檔案，可以修改樣式檔案:

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}

浏覽器會自動展示修改後的内容。

關于代碼 src 目錄

我們的代碼都在 src 目錄中，所有的 Angular 的元件(components), 模闆檔案(templates), 樣式檔案(styles), 圖檔(images)等都會放置在這個目錄中。

大概看一下這個 src 目錄的的基本結構:

$ tree src 
src
├── app  // 應用的元件、子產品
│   ├── app.component.css  // css樣式檔案
│   ├── app.component.html // html模闆檔案
│   ├── app.component.spec.ts  // 測試用例
│   ├── app.component.ts   // 元件
│   └── app.module.ts      // 子產品
├── assets  // 資源目錄，存儲靜态資源的,比如圖檔
├── browserslist
├── environments // 環境配置。比如開發、測試、生産環境做不同配置
│   ├── environment.prod.ts 
│   └── environment.ts
├── favicon.ico    // 網站标志圖示
├── index.html     // 整個應用的根html，程式啟動就是通路這個頁面
├── karma.conf.js  // 前端單元測試Karma配置
├── main.ts      // 項目入口，通過這個檔案來啟動項目
├── polyfills.ts // 主要是用來導入一些必要庫, 相容老版本
├── styles.css   // 全局的樣式檔案
├── test.ts      // 自動化測試用的
├── tsconfig.app.json   // 指定ts編譯的一些參數資訊
├── tsconfig.spec.json  // 測試
└── tslint.json  // JSLint檢測js文法
3 directories, 18 files

歡迎關注公衆号擷取更多内容： Web後端技術學習社群

參考内容

http://dwz.cn/80xYoe

原文釋出時間為：2018年06月06日

本文作者：王永濤

本文來源：

開源中國 https://juejin.im/post/5b38d27451882574d87aa5d5

如需轉載請聯系原作者

Angular 6.0已發版: Angular快速入門

步驟1: 設定開發環境

步驟2: 建立一個項目

步驟3: 啟動應用

步驟4: 編輯 Angular 元件 (Angular component)

關于代碼 src 目錄

參考内容

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條