現在該看一下 Google 的 Angular 框架了，這是另一個你經常會遇到的前端框架。在本文中，我們將會探索 Angular 所提供的功能、安裝必備工具、建立範例應用程式，並進一步瞭解 Angular 的基本架構。
+現在該看一下Google的Angular框架了，這是另一個你經常會遇到的前端框架。在本文中，我們將會探索Angular所提供的功能、安裝必備工具、建立範例應用程式，並進一步瞭解Angular的基本架構。
| 預備知識： | -熟悉基本的 HTML、CSS 與 JavaScript 程式語言，具備 終端機/命令列環境 基本知識。 + | 熟悉基本的HTML、 CSS、以及 JavaScript程式語言，具備 終端機/命令列環境的基本知識。 |
|---|---|---|
| 學習目標： | -設立本機的 Angular 開發環境，建立初始應用程式，瞭解 Angular 基本運作方式。 | +設立本機的Angular開發環境，建立初始應用程式，瞭解Angular基本運作方式。 |
Angular 是一個基於 TypeScript 的開發平台。身為一個平台，Angular 包含：
+Angular是一個基於TypeScript的開發平台。身為一個平台，Angular包含：
When you build applications with Angular, you're taking advantage of a platform that can scale from single-developer projects to enterprise-level applications. Angular is designed to make updating as easy as possible, so you can take advantage of the latest developments with a minimum of effort. Best of all, the Angular ecosystem consists of a diverse group of over 1.7 million developers, library authors, and content creators.
+你能使用Angular去開發多種不同規模的專案，小至單人應用式專案，大至大型企業級專案。Angular的設計宗旨是讓後續更新升級十分容易，因此你能輕鬆的使用最新版本進行開發。最棒的是，Angular的開發生態圈龐大，有超過一百七十萬的使用者、套件開發者以及內容創作者。
-Before you start exploring the Angular platform, you should know about the Angular CLI. The Angular CLI is the fastest, easiest, and recommended way to develop Angular applications. The Angular CLI makes a number of tasks easy. Here are some examples:
+在開始探索Angular之前，你要先瞭解Angular CLI。Angular CLI是一種快速、簡單、備受推崇的Angular程式開發方式。Angular CLI能讓許多任務變得更容易，以下是一些範例：
ng build |
-Compiles an Angular app into an output directory. | +編譯Angular開發的程式到輸出目錄 |
ng serve |
-Builds and serves your application, rebuilding on file changes. | +建構應用程式並啟動開發伺服器，當檔案變化時重新建構 |
ng generate |
-Generates or modifies files based on a schematic. | +根據原理圖去生成或修改檔案 |
ng test |
-Runs unit tests on a given project. | +對指定專案進行單元測試 |
ng e2e |
-Builds and serves an Angular application, then runs end-to-end tests. | +編譯並啟動Angular程式，並執行端到端測試 |
You'll find the Angular CLI to be a valuable tool for building out your applications.
+在建造應用程式時，你會發現Angular CLI是很實用的工具。
-This tutorial series guides you through building a to-do list application. Via this application you'll learn how to use Angular to manage, edit, add, delete, and filter items.
+這一系列的教學會帶領你建立一個待辦事項程式。透過這個程式，你會學到如何使用Angular管理、編輯、增加、刪除和篩選項目。
-To install Angular on your local system, you need the following:
+想在本地端安裝Angular，你必須安裝：
Node.js
-Angular requires a current, active LTS, or maintenance LTS version of Node.js. For information about specific version requirements, see the engines key in the package.json file.
For more information on installing Node.js, see nodejs.org.
-If you are unsure what version of Node.js runs on your system, run node -v in a terminal window.
Angular需要使用Node.js的當前版、活躍LTS版或是長期維護LTS版若需特定版本的資訊，可以參閱在package.json檔案之中的engines關鍵字。
若想更了解如何安裝 Node.js，可參閱nodejs.org。若你不確定你目前使用的Node.js版本號，請在終端機輸入node -v查閱。
npm package manager
-Angular, the Angular CLI, and Angular applications depend on npm packages for many features and functions.
- To download and install npm packages, you need an npm package manager.
- This guide uses the npm client command line interface, which is installed with Node.js by default.
- To check that you have the npm client installed, run npm -v in a terminal window.
npm套件管理器
+Angular、Angular CLI以及Angular應用程式都依賴 npm套件 來實現許多特性與功能。想下載並安裝npm套件，你需要使用npm套件管理器。本教學使用npm客戶端命令列介面，該介面預設安裝在Node.js。欲檢查你是否安裝了npm客戶端，請在終端視窗中執行npm -v。
你可以在終端機裡透過使用 Angular 命令列介面（ CLI ）來產生、建置、測試和佈署 Angular 應用程式。請在終端機裡執行以下指令來安裝 Angular 命令列介面：
+你可以在終端機裡透過使用Angular命令列介面（CLI）來產生、建置、測試和佈署Angular應用程式。請在終端機裡執行以下指令來安裝Angular命令列介面：
npm install -g @angular/cli-
Angular 命令列介面的指令全都是以 ng 開頭，後面接著你想要執行的 CLI 指令。進入桌面資料夾裡，使用 ng new 指令來建立一個名為 todo 的新應用程式：
Angular CLI的指令開頭均為ng，接著是你希望CLI進行的事項。在桌面目錄中，使用 ng new指令創建一個名為todo的專案：
ng new todo --routing=false --style=css-
這個 ng new 指令在你的桌面建立了一個最簡單的初始 Angular 應用程式。指令後面接著的 --routing 和 --style 參數，用於定義應用程式如何處理導覽及樣式。這個教學描述了更多有關這個功能的細節。
使用ng new指令會在桌面創建一個小型入門Angular的專案。其他的標籤，--routing和--style，則是定義專案中的導航與樣式。本教學導覽會在後續篇章詳細解釋這些特性。
如果出現是否啟用強制型別檢查的提示，你可以選擇「是」。
+如果被詢問是否使用嚴格型別檢查模式，可以回覆「同意」。
-使用 cd 指令進入你新建的專案：
輸入cd指令切換到你新開的專案：
cd todo-
使用 ng serve 執行你的 todo 應用程式
想執行你的todo專案，請使用ng serve：
ng serve-
當命令列提示你是否共享用於分析的資料時，請回答 no。
當CLI詢問是否使用情況分析，回覆no。
在瀏覽器開啟 http://localhost:4200/ 來檢視你新建的應用程式。應用程式會即時重新整理以便反應你對原始碼的異動。
+在瀏覽器中，導至http://localhost:4200/來查看你新建的專案。如果你更改任何原始資料夾，應用程式會自動加載更新。
-當 ng serve 正在執行時，你可能需要開啟第二個終端機分頁或視窗來執行指令。任何時間點想要停止應用程式，請在終端機輸入 Ctrl+c。
當ng serve運行時，你或許會想開啟第二個終端機視窗來運行其他指令。如果你想中斷應用程式運行，請在終端機內按下Ctrl+c。
The application source files that this tutorial focuses on are in src/app.
-Key files that the CLI generates automatically include the following:
本教學導覽主要是用的程式原始檔在src/app資料夾內。由CLI自動產生的主要檔案如下：
app.module.ts: Specifies the files that the application uses.
-This file acts as a central hub for the other files in your application.app.component.ts: Also known as the class, contains the logic for the application's main page.app.component.html: Contains the HTML for AppComponent. The contents of this file are also known as the template.
-The template determines the view or what you see in the browser.app.component.css: Contains the styles for AppComponent. You use this file when you want to define styles that only apply to a specific component, as opposed to your application overall.app.module.ts：列出此專案使用的所有檔案。此檔案在專案中扮演中央樞紐的角色。app.component.ts：又被稱為元件類別（Class），內含此專案主要頁面的相關邏輯app.component.html：內含AppComponent所使用的網頁html。這個檔案的內容也被視為元件模板（Template），此模板定義你在瀏覽器中看到的畫面。app.component.css：內含AppComponent裡面的樣式。當你想定義某些樣式給特定模組使用，卻不希望影響到整體程式時，便可使用此檔案進行設定。A component in Angular is made up of three main parts—the template, styles, and the class.
-For example, app.component.ts, app.component.html, and app.component.css together constitute the AppComponent.
-This structure separates the logic, view, and styles so that the application is more maintainable and scalable.
一個Angular的元件由三部份構成，分別是：模板、樣式、類別。舉例來說，app.component.ts、app.component.html、以及app.component.css一同構成AppComponent。此結構會將邏輯、畫面、樣式分開，如此一來便能讓程式更易於維護與擴張。
In this way, you are using the best practices from the very beginning.
+如此一來，你就能在一開始便依循最佳的實作慣例。
-The Angular CLI also generates a file for component testing called app.component.spec.ts, but this tutorial doesn't go into testing, so you can ignore that file.
Angular CLI也能產生app.component.spec.ts的元件測試檔案，但本次教學導覽不會深入探討測試的部分，所以你可以忽略這個檔案。
Whenever you generate a component, the CLI creates these four files in a directory with the name you specify.
+一旦你建立一個元件，CLI就會按照你的命名在目錄中建立此四個檔案。
-Angular is built with TypeScript. -TypeScript is a superset of JavaScript meaning that any valid JavaScript is valid TypeScript. -TypeScript offers typing and a more concise syntax than plain JavaScript, which gives you a tool for creating more maintainable code and minimizing bugs.
+Angular基本上是用TypeScript作為主要開發的語言。 +簡單來說，TypeScript是JavaScript的超集合，也就是說在JavaScript中使用的語法也同樣適用於TypeScript。 +而TypeScript比純JavaScript更加強化型別的規範、寫法也更簡潔，因此使用TypeScript可以寫出更好維護的程式碼，並減少報錯的機率。
-Components are the building blocks of an Angular application.
-A component includes a TypeScript class that has a @Component() decorator, an HTML template, and styles.
在Angular框架裡，主要是由許多元件（Components）來組成。
+一個元件包含HTML頁面架構、樣式以及帶有元件裝飾器@Component()的TypeScript類別（class）。
The class is where you put any logic your component needs.
-This code can include functions, event listeners, properties, and references to services to name a few.
-The class is in a file with a name such as feature.component.ts, where feature is the name of your component.
-So, you could have files with names such as header.component.ts, signup.component.ts, or feed.component.ts.
-You create a component with a @Component() decorator that has metadata that tells Angular where to find the HTML and CSS.
-A typical component is as follows:
類別(class)裡會放這個元件的邏輯、規則，
+舉例來說像是函式、事件監聽、屬性和參考等等。
+類別會放在一個像是feature.component.ts的檔案裡，而feature就是你的元件名稱。
+所以你可以建立一些檔案，並且命名為像是header.component.ts、signup.component.ts或是feed.component.ts。
+當你建立一個元件，它會帶有@Component() 這樣的裝飾器，裡面會有檔案的路徑指向，告訴Angular要去哪裡找HTML和CSS檔案。
+一個基本的元件寫法如下：
import { Component } from '@angular/core';
@Component({
selector: 'app-item',
- // the following metadata specifies the location of the other parts of the component
+ // 接下來的檔案路徑會指出其它檔案在什麼位置
templateUrl: './item.component.html',
styleUrls: ['./item.component.css']
})
export class ItemComponent {
-// your code goes here
+// 程式碼寫在這裡
}
-This component is called ItemComponent, and its selector is app-item.
-You use a selector just like regular HTML tags by placing it within other templates.
-When a selector is in a template, the browser renders the template of that component.
-This tutorial guides you through creating two components and using one within the other.
這個元件會被稱為ItemComponent，它的選擇器是app-item。
+這個選擇器就像HTML的標籤，你可以把它放在其它的模版裡。
+當瀏覽器渲染到選擇器的時候，就會把這個元件的模版給渲染出來。
+這份教學文件會指引你建立兩個元件，並把其中一個放到另一個元件裡。
Angular's component model offers strong encapsulation and an intuitive application structure. -Components also make your application easier to unit test and can improve the overall readability of your code.
+Angular的元件模組具備高度封裝性，讓專案結構看起來更直覺。 +而Angular的元件也讓專案更易於做單元測試、讓程式碼更易於解讀。
-Every component has an HTML template that declares how that component renders. -You can define this template either inline or by file path.
+每個元件都會有HTML模版去告訴瀏覽器要如何渲染頁面。HTML可以直接內嵌寫在類別（Class）的檔案內，或是用檔案路徑去指明其位置。
-To refer to an external HTML file, use the templateUrl property:
而要去指明位在他處的HTML檔案，就要使用templateUrl這個屬性，範例如下：
@Component({
selector: 'app-root',
@@ -203,7 +193,7 @@ You can define this template either inline or by file path.
export class AppComponent {
}
-To write inline HTML, use the template property and write your HTML within backticks:
當你把HTML內嵌寫在類別（Class）的檔案內時，要使用template這個屬性，並用反引號把HTML包起來，範例如下：
@Component({
selector: 'app-root',
@@ -213,14 +203,14 @@ export class AppComponent {
export class AppComponent {
}
-Angular extends HTML with additional syntax that lets you insert dynamic values from your component. -Angular automatically updates the rendered DOM when your component’s state changes. -One use of this feature is inserting dynamic text, as shown in the following example.
+Angular還擴充了HTML的語法，讓你可以在元件中使用動態插值。 +當你的元件狀態改變時，Angular會自動重新渲染該節點。 +下面的例子中會使用插值去插入一段文字來示範這個功能。
<h1>\{{ title }}</h1>
-The double curly braces instruct Angular to interpolate the contents within them.
-The value for title comes from the component class:
雙花括號的地方就是告訴Angular插值顯示的地方。
+ title的值就是從元件的類別來的：
import { Component } from '@angular/core';
@@ -234,17 +224,17 @@ export class AppComponent {
title = 'To do application';
}
-When the application loads the component and its template, the browser sees the following:
+當載入完元件和它的模版時，會在瀏覽器看到如下的呈現：
<h1>To do application</h1>
A component can inherit global styles from the application's styles.css file and augment or override them with its own styles.
-You can write component-specific styles directly in the @Component() decorator or specify the path to a CSS file.
每個專案裡會有個全域性的樣式設定檔案styles.css，所有的元件都可以繼承它，並且再各自增加或覆寫它的樣式設定。
+你可以直接在裝飾器@Component()裡寫出這個元件特有的樣式，或是用路徑指明它的CSS檔案位置。
To include the styles directly in the component decorator, use the styles property:
要直接在元件裝飾器內設定樣式，就要使用styles這個屬性，範例如下：
@Component({
selector: 'app-root',
@@ -252,7 +242,7 @@ You can write component-specific styles directly in the @Component()
-Typically, a component uses styles in a separate file using the styleUrls property:
+但基本上，元件通常會把樣式另外寫在一個檔案，並用styleUrls去指明它的檔案路徑，如下：
@Component({
selector: 'app-root',
@@ -260,11 +250,11 @@ You can write component-specific styles directly in the @Component()
-With component-specific styles, you can organize your CSS so that it is easily maintainable and portable.
+以此去寫出這個元件特定的樣式，讓你更容易去維護你的CSS檔案。
-Summary
+總結
-That's it for your first introduction to Angular. At this point you should be set up and ready to build an Angular app, and have a basic understanding of how Angular works. In the next article we'll deepen that knowledge and start to build up the structure of our to-do list application.
+以上這些就是關於Angular的簡介。這時候的你，應該已經對Angular的運作有基本的了解，並準備建立一個Angular的專案。在下一篇文章裡，我們會更深入的應用這些知識，並且試著用Angular去寫一個「待辦清單」。
{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
@@ -321,7 +311,7 @@ You can write component-specific styles directly in the @Component()