Getting started with Angular (zh-TW translation) (partial)

1 files changed, 338 insertions, 0 deletions

diff --git a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_getting_started/index.html b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_getting_started/index.html
new file mode 100644
index 0000000000..35c5990237
--- /dev/null
+++ b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_getting_started/index.html
@@ -0,0 +1,338 @@
+---
+title: Angular 新手入門
+slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started
+tags:
+  - 初學者
+  - 框架
+  - 安裝
+  - 學習
+  - 用戶端
+  - Beginner
+  - Frameworks
+  - Installation
+  - JavaScript
+  - Learn
+  - client-side
+  - Angular
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{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")}}</div>
+
+<p class="summary">現在該看一下 Google 的 Angular 框架了，這是另一個你經常會遇到的前端框架。在本文中，我們將會探索 Angular 所提供的功能、安裝必備工具、建立範例應用程式，並進一步瞭解 Angular 的基本架構。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">預備知識：</th>
+   <td>熟悉基本的 <a href="/en-US/docs/Learn/HTML">HTML</a>、<a href="/en-US/docs/Learn/CSS">CSS</a> 與 <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> 程式語言，具備 <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">終端機/命令列環境</a> 基本知識。
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">學習目標：</th>
+   <td>設立本機的 Angular 開發環境，建立初始應用程式，瞭解 Angular 基本運作方式。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="what_is_angular">什麼是 Angular?</h2>
+
+<p>Angular 是一個基於 <a href="https://www.typescriptlang.org/">TypeScript</a> 的開發平台。身為一個平台，Angular 包含：</p>
+
+<ul>
+  <li>一個元件化的框架，用來建構可延展的 Web 應用程式。</li>
+  <li>一整套完美整合的函式庫，包含各種不同的功能，包含路由機制、表單管理、Client/Server 通訊，以及更多。</li>
+  <li>一組完善的開發工具，幫助你開發、建置、測試、更新你的程式碼。</li>
+</ul>
+
+<p>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.</p>
+
+<p>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:</p>
+
+<table class="standard-table">
+<tr>
+<td><code><a href="https://angular.io/cli/build">ng build</a></code></td>
+<td>Compiles an Angular app into an output directory.</td>
+</tr>
+<tr>
+<td><code><a href="https://angular.io/cli/serve">ng serve</a></code></td>
+<td>Builds and serves your application, rebuilding on file changes.</td>
+</tr>
+<tr>
+<td><code><a href="https://angular.io/cli/generate">ng generate</a></code></td>
+<td>Generates or modifies files based on a schematic.</td>
+</tr>
+<tr>
+<td><code><a href="https://angular.io/cli/test">ng test</a></code></td>
+<td>Runs unit tests on a given project.</td>
+</tr>
+<tr>
+<td><code><a href="https://angular.io/cli/e2e">ng e2e</a></code></td>
+<td>Builds and serves an Angular application, then runs end-to-end tests.</td>
+</tr>
+</table>
+
+<p>You'll find the Angular CLI to be a valuable tool for building out your applications.</p>
+
+<h2 id="what-you-ll-build">What you'll build</h2>
+
+<p>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.</p>
+
+<h2 id="prerequisites">Prerequisites</h2>
+
+<p>To install Angular on your local system, you need the following:</p>
+
+<ul>
+  <li><p><strong>Node.js</strong></p>
+    <p>Angular requires a <a href="https://nodejs.org/about/releases">current, active LTS, or maintenance LTS</a> version of Node.js. For information about specific version requirements, see the <code>engines</code> key in the <a href="https://unpkg.com/@angular/cli/package.json">package.json</a> file.</p>
+    <p>For more information on installing Node.js, see <a href="https://nodejs.org" title="Nodejs.org">nodejs.org</a>.
+If you are unsure what version of Node.js runs on your system, run <code>node -v</code> in a terminal window.</p>
+  </li>
+  <li><p><strong>npm package manager</strong></p>
+    <p>Angular, the Angular CLI, and Angular applications depend on <a href="https://docs.npmjs.com/getting-started/what-is-npm">npm packages</a> for many features and functions.
+    To download and install npm packages, you need an npm package manager.
+    This guide uses the <a href="https://docs.npmjs.com/cli/install">npm client</a> command line interface, which is installed with <code>Node.js</code> by default.
+    To check that you have the npm client installed, run <code>npm -v</code> in a terminal window.</p>
+  </li>
+</ul>
+
+<h2 id="set_up_your_application">Set up your application</h2>
+
+<p>You can use the Angular CLI to run commands in your terminal for generating, building, testing, and deploying Angular applications.
+To install the Angular CLI, run the following command in your terminal:</p>
+
+<pre class="brush: js">npm install -g @angular/cli</pre>
+
+<p>Angular CLI commands all start with <code>ng</code>, followed by what you'd like the CLI to do.
+In the Desktop directory, use the following <code>ng new</code> command to create a new application called <code>todo</code>:</p>
+
+<pre class="brush: js">ng new todo --routing=false --style=css</pre>
+
+<p>The <code>ng new</code> command creates a minimal starter Angular application on your Desktop.
+The additional flags, <code>--routing</code> and <code>--style</code>, define how to handle navigation and styles in the application.
+This tutorial describes these features later in more detail.</p>
+
+<p>If you are prompted to enforce stricter type checking, you can respond with yes.</p>
+
+<p>Navigate into your new project with the following <code>cd</code> command:</p>
+
+<pre class="brush: js">cd todo</pre>
+
+<p>To run your <code>todo</code> application, use <code>ng serve</code>:</p>
+
+<pre class="brush: js">ng serve</pre>
+
+<p>When the CLI prompts you about analytics, answer <code>no</code>.</p>
+
+<p>In the browser, navigate to <a href="http://localhost:4200/">http://localhost:4200/</a> to see your new starter application.
+If you change any of the source files, the application automatically reloads.</p>
+
+<p>While <code>ng serve</code> is running, you might want to open a second terminal tab or window in order to run commands.
+If at any point you would like to stop serving your application, press <code>Ctrl+c</code> while in the terminal.</p>
+
+<h2 id="get_familiar_with_your_angular_application">Get familiar with your Angular application</h2>
+
+<p>The application source files that this tutorial focuses on are in <code>src/app</code>.
+Key files that the CLI generates automatically include the following:</p>
+
+<ol>
+  <li><code>app.module.ts</code>: Specifies the files that the application uses.
+This file acts as a central hub for the other files in your application.</li>
+  <li><code>app.component.ts</code>: Also known as the class, contains the logic for the application&#39;s main page.</li>
+  <li><code>app.component.html</code>: Contains the HTML for <code>AppComponent</code>. The contents of this file are also known as the template.
+The template determines the view or what you see in the browser.</li>
+  <li><code>app.component.css</code>: Contains the styles for <code>AppComponent</code>. You use this file when you want to define styles that only apply to a specific component, as opposed to your application overall.</li>
+</ol>
+
+<p>A component in Angular is made up of three main parts&mdash;the template, styles, and the class.
+For example, <code>app.component.ts</code>, <code>app.component.html</code>, and <code>app.component.css</code> together constitute the <code>AppComponent</code>.
+This structure separates the logic, view, and styles so that the application is more maintainable and scalable.</p>
+
+<p>In this way, you are using the best practices from the very beginning.</p>
+
+<p>The Angular CLI also generates a file for component testing called <code>app.component.spec.ts</code>, but this tutorial doesn't go into testing, so you can ignore that file.</p>
+
+<p>Whenever you generate a component, the CLI creates these four files in a directory with the name you specify.</p>
+
+<h2 id="the_structure_of_an_angular_application">The structure of an Angular application</h2>
+
+<p>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.</p>
+
+<p>Components are the building blocks of an Angular application.
+A component includes a TypeScript class that has a <code>@Component()</code> decorator, an HTML template, and styles.</p>
+
+<h3 id="the_class">The class</h3>
+
+<p>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 <code>feature.component.ts</code>, where <code>feature</code> is the name of your component.
+So, you could have files with names such as <code>header.component.ts</code>, <code>signup.component.ts</code>, or <code>feed.component.ts</code>.
+You create a component with a <code>@Component()</code> decorator that has metadata that tells Angular where to find the HTML and CSS.
+A typical component is as follows:</p>
+
+<pre class="brush: js">
+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
+}</pre>
+
+<p>This component is called <code>ItemComponent</code>, and its selector is <code>app-item</code>.
+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.</p>
+
+<p>Angular&#39;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.</p>
+
+<h3 id="the_html_template">The HTML template</h3>
+
+<p>Every component has an HTML template that declares how that component renders.
+You can define this template either inline or by file path.</p>
+
+<p>To refer to an external HTML file, use the <code>templateUrl</code> property:</p>
+
+<pre class="brush: js">@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html'
+})
+
+export class AppComponent {
+}</pre>
+
+<p>To write inline HTML, use the <code>template</code> property and write your HTML within backticks:</p>
+
+<pre class="brush: js">@Component({
+  selector: 'app-root',
+  template: `&lt;h1&gt;Hi!&lt;/h1&gt;`,
+})
+
+export class AppComponent {
+}</pre>
+
+<p>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.</p>
+
+<pre class="brush: html">&lt;h1&gt;\{{ title }}&lt;/h1&gt;</pre>
+
+<p>The double curly braces instruct Angular to interpolate the contents within them.
+The value for <code>title</code> comes from the component class:</p>
+
+<pre class="brush: js">import { Component } from '@angular/core';
+
+@Component ({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+
+export class AppComponent {
+    title = 'To do application';
+}</pre>
+
+<p>When the application loads the component and its template, the browser sees the following:</p>
+
+<pre class="brush: html">&lt;h1&gt;To do application&lt;/h1&gt;
+</pre>
+
+<h3 id="styles">Styles</h3>
+
+<p>A component can inherit global styles from the application&#39;s <code>styles.css</code> file and augment or override them with its own styles.
+You can write component-specific styles directly in the <code>@Component()</code> decorator or specify the path to a CSS file.</p>
+
+<p>To include the styles directly in the component decorator, use the <code>styles</code> property:</p>
+
+<pre class="brush: js">@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styles: ['h1 { color: red; }']
+})</pre>
+
+<p>Typically, a component uses styles in a separate file using the <code>styleUrls</code> property:</p>
+
+<pre class="brush: js">@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})</pre>
+
+<p>With component-specific styles, you can organize your CSS so that it is easily maintainable and portable.</p>
+
+<h2 id="summary">Summary</h2>
+
+<p>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.</p>
+
+<div>{{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")}}</div>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Introduction to client-side frameworks</a></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Framework main features</a></li>
+ <li>React
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Getting started with React</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Beginning our React todo list</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Componentizing our React app</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React interactivity: Events and state</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React resources</a></li>
+  </ul>
+ </li>
+ <li>Ember
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Getting started with Ember</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app structure and componentization</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember interactivity: Events, classes and state</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interactivity: Footer functionality, conditional rendering</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember resources and troubleshooting</a></li>
+  </ul>
+ </li>
+ <li>Vue
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Getting started with Vue</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Creating our first Vue component</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering a list of Vue components</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Adding a new todo form: Vue events, methods, and models</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling Vue components with CSS</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Using Vue computed properties</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue conditional rendering: editing existing todos</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Focus management with Vue refs</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue resources</a></li>
+  </ul>
+ </li>
+ <li>Svelte
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">Getting started with Svelte</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">Starting our Svelte Todo list app</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Dynamic behavior in Svelte: working with variables and props</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">Componentizing our Svelte app</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">Advanced Svelte: Reactivity, lifecycle, accessibility</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">Working with Svelte stores</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">TypeScript support in Svelte</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">Deployment and next steps</a></li>
+  </ul>
+ </li>
+ <li>Angular
+   <ul>
+    <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started">Angular 新手入門</a></li>
+    <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning">Beginning our Angular todo list app</a></li>
+    <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling">Styling our Angular app</a></li>
+    <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component">Creating an item component</a></li>
+    <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering">Filtering our to-do items</a></li>
+    <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building">Building Angular applications and further resources</a></li>
+   </ul>
+ </li>
+</ul>