From 2b9f7c33b9e16c5e95509864e438032cd2c7fc85 Mon Sep 17 00:00:00 2001 From: Will Date: Sat, 24 Apr 2021 11:59:47 +0800 Subject: Add other Angular docs and translate title & tags only --- .../angular_building/index.html | 144 +++++++ .../angular_filtering/index.html | 163 ++++++++ .../angular_item_component/index.html | 446 +++++++++++++++++++++ .../angular_styling/index.html | 242 +++++++++++ .../angular_todo_list_beginning/index.html | 283 +++++++++++++ 5 files changed, 1278 insertions(+) create mode 100644 files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_building/index.html create mode 100644 files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_filtering/index.html create mode 100644 files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_item_component/index.html create mode 100644 files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_styling/index.html create mode 100644 files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_todo_list_beginning/index.html (limited to 'files') diff --git a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_building/index.html b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_building/index.html new file mode 100644 index 0000000000..69954c77dc --- /dev/null +++ b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_building/index.html @@ -0,0 +1,144 @@ +--- +title: 建構 Angular 應用程式與更多資源 +slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building +tags: + - 初學者 + - 框架 + - 安裝 + - 學習 + - 用戶端 + - 建構 + - 資源 + - Beginner + - Frameworks + - JavaScript + - Learn + - client-side + - Angular + - Building + - Resources +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+ +

This final Angular article covers how to build an app ready for production, and provides further resources for you to continue your learning journey.

+ + + + + + + + + + + + +
預備知識：Familiarity with the core HTML, CSS, and JavaScript languages, knowledge of the terminal/command line. +
學習目標：To learn how to build your Angular app.
+ +

Building your finished application

+ +

Now that you are finished developing your application, you can run the Angular CLI build command. +When you run the build command in your todo directory, your application compiles into an output directory named dist/.

+ +

In the todo directory, run the following command at the command line:

+ +
ng  build --prod
+ +

The CLI compiles the application and puts the output in a new dist directory. +The --prod flag with ng build gets rid of stuff you don't need for production.

+ +

Deploying your application

+ +

To deploy your application, you can copy the contents of the dist/my-project-name folder to your web server. +Because these files are static, you can host them on any web server capable of serving files, such as:

+ + + +

You can use any backend such as Firebase, Google Cloud, or App Engine.

+ +

What's next

+ +

At this point, you've built a basic application, but your Angular journey is just beginning. +You can learn more by exploring the Angular documentation, such as:

+ + + +

Summary

+ +

That's it for now. We hope you had fun with Angular!

+ +
{{PreviousMenu("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+ +

In this module

+ + diff --git a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_filtering/index.html b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_filtering/index.html new file mode 100644 index 0000000000..bfc15c91b1 --- /dev/null +++ b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_filtering/index.html @@ -0,0 +1,163 @@ +--- +title: 篩選我們的待辦事項項目 +slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering +tags: + - 初學者 + - 框架 + - 安裝 + - 學習 + - 用戶端 + - 篩選 + - Beginner + - Frameworks + - JavaScript + - Learn + - client-side + - Angular + - Filtering +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+ +

Now let's move on to adding functionality to allow users to filter their to-do items, so they can view active, completed, or all items.

+ + + + + + + + + + + + +
預備知識：Familiarity with the core HTML, CSS, and JavaScript languages, knowledge of the terminal/command line. +
學習目標：To add filtering functionality to our app.
+ +

Our filtering code

+ +

Filtering items builds on the filter property, which you previously added to app.component.ts:

+ +
filter: 'all' | 'active' | 'done' = 'all';
+ +

The default value for filter is all, but it can also be active or done.

+ +

Adding filter controls

+ +

In app.component.html, add the following HTML before the Add button but above the section that lists the items. +In the following snippet, the existing sections in your HTML are in comments so you can see exactly where to put the buttons.

+ +
<!-- <button class="btn-primary" (click)="addItem(newItem.value)">Add</button>
+ -->
+
+  <!-- Buttons that show all, still to do, or done items on click -->
+  <div class="btn-wrapper">
+    <button
+      class="btn btn-menu"
+      [class.active]="filter == 'all'"
+      (click)="filter = 'all'">
+      All
+    </button>
+
+    <button
+      class="btn btn-menu"
+      [class.active]="filter == 'active'"
+      (click)="filter = 'active'">
+      To Do
+    </button>
+
+    <button
+      class="btn btn-menu"
+      [class.active]="filter == 'done'"
+      (click)="filter = 'done'">
+      Done
+    </button>
+  </div>
+
+  <!-- <h2>\{{items.length}} item(s)</h2>
+        <ul>... -->
+ +

Clicking the buttons changes the filter values, which determines the items that show as well as the styles that Angular applies to the active button.

+ + + +

A class attribute binding, using square brackets, [], controls the text color of the buttons. +The class binding, [class.active], applies the active class when the value of filter matches the expression. +For example, when the user clicks the Done button, which sets the filter value to done, the class binding expression of filter == 'done' evaluates to true. +When the filter value is done, Angular applies the active class to the Done button to make the text color green. +As soon as the user clicks on one of the other buttons, the value a filter is no longer done, so the green text color no longer applies.

+ +

Summary

+ +

That was quick! Since you already had the filter code in app.component.ts, all you had to do was edit the template in order to provide controls for filtering the items. Our next — and last — article looks at how to build your Angular app ready for production, and provides further resources to carry on your learning journey.

+ +
{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+ +

In this module

+ + diff --git a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_item_component/index.html b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_item_component/index.html new file mode 100644 index 0000000000..dae9fe34cb --- /dev/null +++ b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_item_component/index.html @@ -0,0 +1,446 @@ +--- +title: 建立一個 item 元件 +slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component +tags: + - 初學者 + - 框架 + - 安裝 + - 學習 + - 用戶端 + - 元件 + - 事件 + - 資料 + - Beginner + - Frameworks + - JavaScript + - Learn + - client-side + - Angular + - Components + - Events + - Data +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+ +

Components provide a way for you to organize your application. This article walks you through creating a component to handle the individual items in the list, and adding check, edit, and delete functionality. the Angular event model is covered here.

+ + + + + + + + + + + + +
預備知識：Familiarity with the core HTML, CSS, and JavaScript languages, knowledge of the terminal/command line. +
學習目標：To learn more about components, including how events work to handle updates. To add check, edit, and delete functionality.
+ +

Creating the new component

+ +

At the command line, create a component named item with the following CLI command:

+ +
ng generate component item
+ +

The ng generate component command creates a component and folder with the name you specify. +Here, the folder and component name is item. +You can find the item directory within the app folder.

+ +

Just as with the AppComponent, the ItemComponent is made up of the following files:

+ + + +

You can see a reference to the HTML and CSS files in the @Component() decorator metadata in item.component.ts.

+ +
@Component({
+  selector: 'app-item',
+  templateUrl: './item.component.html',
+  styleUrls: ['./item.component.css'],
+})
+ +

Add HTML for the ItemComponent

+ +

The ItemComponent can take over the task of giving the user a way to check items off as done, edit them, or delete them.

+ +

Add markup for managing items by replacing the placeholder content in item.component.html with the following:

+ +
<div class="item">
+
+  <input [id]="item.description" type="checkbox" (change)="item.done = !item.done" [checked]="item.done" />
+  <label [for]="item.description">\{{item.description}}</label>
+
+  <div class="btn-wrapper" *ngIf="!editable">
+    <button class="btn" (click)="editable = !editable">Edit</button>
+    <button class="btn btn-warn" (click)="remove.emit()">Delete</button>
+  </div>
+
+  <!-- This section shows only if user clicks Edit button -->
+  <div *ngIf="editable">
+    <input class="sm-text-input" placeholder="edit item" [value]="item.description" #editedItem (keyup.enter)="saveItem(editedItem.value)">
+
+    <div class="btn-wrapper">
+      <button class="btn" (click)="editable = !editable">Cancel</button>
+      <button class="btn btn-save" (click)="saveItem(editedItem.value)">Save</button>
+    </div>
+  </div>
+
+</div>
+ +

The first input is a checkbox so users can check off items when an item is complete. +The double curly braces, \{{}}, in the <input> and <label> for the checkbox signifies Angular's interpolation. +Angular uses \{{item.description}} to retrieve the description of the current item from the items array. +The next section explains how components share data in detail.

+ +

The next two buttons for editing and deleting the current item are within a <div>. +On this <div> is an *ngIf, a built-in Angular directive that you can use to dynamically change the structure of the DOM.

+ +

This *ngIf means that if editable is false, this <div> is in the DOM. If editable is true, Angular removes this <div> from the DOM.

+ +
<div class="btn-wrapper" *ngIf="!editable">
+  <button class="btn" (click)="editable = !editable">Edit</button>
+  <button class="btn btn-warn" (click)="remove.emit()">Delete</button>
+</div>
+ +

When a user clicks the Edit button, editable becomes true, which removes this <div> and its children from the DOM. +If, instead of clicking Edit, a user clicks Delete, the ItemComponent raises an event that notifies the AppComponent of the deletion.

+ +

An *ngIf is also on the next <div>, but is set to an editable value of true. +In this case, if editable is true, Angular puts the <div> and its child <input> and <button> elements in the DOM.

+ +
<!-- This section shows only if user clicks Edit button -->
+<div *ngIf="editable">
+  <input class="sm-text-input" placeholder="edit item" [value]="item.description" #editedItem (keyup.enter)="saveItem(editedItem.value)">
+
+  <div class="btn-wrapper">
+    <button class="btn" (click)="editable = !editable">Cancel</button>
+    <button class="btn btn-save" (click)="saveItem(editedItem.value)">Save</button>
+  </div>
+</div>
+ +

With [value]="item.description", the value of the <input> is bound to the description of the current item. +This binding makes the item's description the value of the <input>. +So if the description is eat, the description is already in the <input>. +This way, when the user edits the item, the value of the <input> is already eat.

+ +

The template variable, #editedItem, on the <input> means that Angular stores whatever a user types in this <input> in a variable called editedItem. +The keyup event calls the saveItem() method and passes in the editedItem value if the user chooses to press enter instead of click Save.

+ +

When a user clicks the Cancel button, editable toggles to false, which removes the input and buttons for editing from the DOM. +When editable is false, Angular puts <div> with the Edit and Delete buttons back in the DOM.

+ +

Clicking the Save button calls the saveItem() method. +The saveItem() method takes the value from the #editedItem <input> and changes the item's description to editedItem.value string.

+ +

Prepare the AppComponent

+ +

In the next section, you will add code that relies on communication the AppComponent and the ItemComponent. +Configure the AppComponent first by adding the following to app.component.ts:

+ +
remove(item) {
+  this.allItems.splice(this.allItems.indexOf(item), 1);
+}
+ +

The remove() method uses the JavaScript Array.splice() method to remove one item at at the indexOf the relevant item. +In plain English, this means that the splice() method removes the item from the array. +For more information on the splice() method, see the MDN Web Docs article on Array.prototype.splice().

+ +

Add logic to ItemComponent

+ +

To use the ItemComponent UI, you must add logic to the component such as functions, and ways for data to go in and out.

+ +

In item.component.ts, edit the JavaScript imports as follows:

+ +
import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Item } from "../item";
+ +

The addition of Input, Output, and EventEmitter allows ItemComponent to share data with AppComponent. +By importing Item, ItemComponent can understand what an item is.

+

Further down item.component.ts, replace the generated ItemComponent class with the following:

+ +
export class ItemComponent {
+
+  editable = false;
+
+  @Input() item: Item;
+  @Input() newItem: string;
+  @Output() remove = new EventEmitter<Item>();
+
+  saveItem(description) {
+    if (!description) return;
+    this.editable = false;
+    this.item.description = description;
+  }
+}
+ +

The editable property helps toggle a section of the template where a user can edit an item. +editable is the same property in the HTML as in the *ngIf statement, *ngIf="editable". +When you use a property in the template, you must also declare it in the class.

+ +

@Input(), @Output(), and EventEmitter facilitate communication between your two components. +An @Input() serves as a doorway for data to come into the component, and an @Output() acts as a doorway for data to go out of the component. +An @Output() has to be of type EventEmitter, so that a component can raise an event when there's data ready to share with another component.

+ +

Use @Input() to specify that the value of a property can come from outside of the component. +Use @Output() in conjunction with EventEmitter to specify that the value of a property can leave the component so that another component can receive that data.

+ +

The saveItem() method takes as an argument a description. +The description is the text that the user enters into the HTML <input> when editing an item in the list. +This description is the same string from the <input> with the #editedItem template variable.

+ +

If the user doesn't enter a value but clicks Save, saveItem() returns nothing and does not update the description. +If you didn't have this if statement, the user could click Save with nothing in the HTML <input>, and the description would become an empty string.

+ +

If a user enters text and clicks save, saveItem() sets editable to false, which causes the *ngIf in the template to remove the edit feature and render the Edit and Delete buttons again.

+ +

Though the application should compile at this point, you need to use the ItemComponent in AppComponent so you can see the new features in the browser.

+ +

Use the ItemComponent in the AppComponent

+ +

Including one component within another in the context of a parent-child relationship gives you the flexibility of using components wherever you need them.

+ +

The AppComponent serves as a shell for the application where you can include other components.

+ +

To use the ItemComponent in AppComponent, put the ItemComponent selector in the AppComponent template. +Angular specifies the selector of a component in the metadata of the @Component() decorator. +In this example, the selector is app-item:

+ +
@Component({
+  selector: 'app-item',
+  templateUrl: './item.component.html',
+  styleUrls: ['./item.component.css']
+})
+ +

To use the ItemComponent selector within the AppComponent, you add the element, <app-item>, which corresponds to the selector you defined for the component class to app.component.html. +Replace the current unordered list in app.component.html with the following updated version:

+ +
<h2>\{{items.length}} <span *ngIf="items.length === 1; else elseBlock">item</span>
+<ng-template #elseBlock>items</ng-template></h2>
+
+<ul>
+  <li *ngFor="let item of items">
+    <app-item (remove)="remove(item)" [item]="item"></app-item>
+  </li>
+</ul>
+ +

The double curly brace syntax, \{{}}, in the <h2> interpolates the length of the items array and displays the number.

+ +

The <span> in the <h2> uses an *ngIf and else to determine whether the <h2> should say "item" or "items". +If there is only a single item in the list, the <span> containing "item" displays. +Otherwise, if the length of the items array is anything other than 1, the <ng-template>, which we've named elseBlock, with the syntax #elseBlock, shows instead of the <span>. +You can use Angular's <ng-template> when you don't want content to render by default. +In this case, when the length of the items array is not 1, the *ngIf shows the elseBlock and not the <span>.

+ +

The <li> uses Angular's repeater directive, *ngFor, to iterate over all of the items in the items array. +Angular's *ngFor like *ngIf, is another directive that helps you change the structure of the DOM while writing less code. +For each item, Angular repeats the <li> and everything within it, which includes <app-item>. +This means that for each item in the array, Angular creates another instance of <app-item>. +For any number of items in the array, Angular would create that many <li> elements.

+ +

You can use an *ngFor on other elements, too, such as <div>, <span>, or <p>, to name a few.

+ +

The AppComponent has a remove() method for removing the item, which is bound to the remove property in the ItemComponent. +The item property in the square brackets, [], binds the value of item between the AppComponent and the ItemComponent.

+ +

Now you should be able to edit and delete items from the list. +When you add or delete items, the count of the items should also change. +To make the list more user-friendly, add some styles to the ItemComponent.

+ +

Add styles to ItemComponent

+ +

You can use a component's style sheet to add styles specific to that component. +The following CSS adds basic styles, flexbox for the buttons, and custom checkboxes.

+

Paste the following styles into item.component.css.

+ +
.item {
+  padding: .5rem 0 .75rem 0;
+  text-align: left;
+  font-size: 1.2rem;
+}
+
+.btn-wrapper {
+  margin-top: 1rem;
+  margin-bottom: .5rem;
+}
+
+.btn {
+  /* menu buttons flexbox styles */
+  flex-basis: 49%;
+}
+
+.btn-save {
+  background-color: #000;
+  color: #fff;
+  border-color: #000;
+
+}
+
+.btn-save:hover {
+  background-color: #444242;
+}
+
+.btn-save:focus {
+  background-color: #fff;
+  color: #000;
+}
+
+.checkbox-wrapper {
+  margin: .5rem 0;
+}
+
+.btn-warn {
+  background-color: #b90000;
+  color: #fff;
+  border-color: #9a0000;
+}
+
+.btn-warn:hover {
+  background-color: #9a0000;
+}
+
+.btn-warn:active {
+  background-color: #e30000;
+  border-color: #000;
+}
+
+.sm-text-input {
+  width: 100%;
+  padding: .5rem;
+  border: 2px solid #555;
+  display: block;
+  box-sizing: border-box;
+  font-size: 1rem;
+  margin: 1rem 0;
+}
+
+/* Custom checkboxes
+Adapted from https://css-tricks.com/the-checkbox-hack/#custom-designed-radio-buttons-and-checkboxes */
+
+/* Base for label styling */
+[type="checkbox"]:not(:checked),
+[type="checkbox"]:checked {
+  position: absolute;
+  left: -9999px;
+}
+[type="checkbox"]:not(:checked) + label,
+[type="checkbox"]:checked + label {
+  position: relative;
+  padding-left: 1.95em;
+  cursor: pointer;
+}
+
+/* checkbox aspect */
+[type="checkbox"]:not(:checked) + label:before,
+[type="checkbox"]:checked + label:before {
+  content: '';
+  position: absolute;
+  left: 0; top: 0;
+  width: 1.25em; height: 1.25em;
+  border: 2px solid #ccc;
+  background: #fff;
+}
+
+/* checked mark aspect */
+[type="checkbox"]:not(:checked) + label:after,
+[type="checkbox"]:checked + label:after {
+  content: '\2713\0020';
+  position: absolute;
+  top: .15em; left: .22em;
+  font-size: 1.3em;
+  line-height: 0.8;
+  color: #0d8dee;
+  transition: all .2s;
+  font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', Arial;
+}
+/* checked mark aspect changes */
+[type="checkbox"]:not(:checked) + label:after {
+  opacity: 0;
+  transform: scale(0);
+}
+[type="checkbox"]:checked + label:after {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* accessibility */
+[type="checkbox"]:checked:focus + label:before,
+[type="checkbox"]:not(:checked):focus + label:before {
+  border: 2px dotted blue;
+}
+ +

Summary

+ +

You should now have a styled Angular to-do list application that can add, edit, and remove items. +The next step is to add filtering so that you can look at items that meet specific criteria.

+ +
{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+ +

In this module

+ + diff --git a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_styling/index.html b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_styling/index.html new file mode 100644 index 0000000000..368585dea7 --- /dev/null +++ b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_styling/index.html @@ -0,0 +1,242 @@ +--- +title: 使用樣式點綴我們的 Angular 應用程式 +slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling +tags: + - 初學者 + - 框架 + - 安裝 + - 學習 + - 用戶端 + - 樣式 + - Beginner + - Frameworks + - JavaScript + - Learn + - client-side + - Angular + - Styling +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+ +

Now that we've got our basic application structure set up and started displaying something useful, let's switch gears and spend an article looking at how Angular handles styling of applications.

+ + + + + + + + + + + + +
預備知識：Familiarity with the core HTML, CSS, and JavaScript languages, knowledge of the terminal/command line. +
學習目標：To learn how to style an Angular app.
+ +

Adding some style to Angular

+ +

The Angular CLI generates two types of style files:

+ + + +

Depending on whether you are using a CSS preprocessor, the extension on your CSS files can vary. +Angular supports plain CSS, SCSS, Sass, Less, and Stylus.

+ +

In src/styles.css, paste the following styles:

+ +
body {
+  font-family: Helvetica, Arial, sans-serif;
+}
+
+.btn-wrapper {
+  /* flexbox */
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+}
+
+.btn {
+  color: #000;
+  background-color: #fff;
+  border: 2px solid #cecece;
+  padding: .35rem 1rem .25rem 1rem;
+  font-size: 1rem;
+}
+
+.btn:hover {
+  background-color: #ecf2fd;
+}
+
+.btn:active {
+  background-color: #d1e0fe;
+}
+
+.btn:focus {
+  outline: none;
+  border: black solid 2px;
+}
+
+.btn-primary {
+  color: #fff;
+  background-color: #000;
+  width: 100%;
+  padding: .75rem;
+  font-size: 1.3rem;
+  border: black solid 2px;
+  margin: 1rem 0;
+}
+
+.btn-primary:hover {
+  background-color: #444242;
+}
+
+.btn-primary:focus {
+  color: #000;
+  outline: none;
+  border: #000 solid 2px;
+  background-color: #d7ecff;
+}
+
+.btn-primary:active {
+  background-color: #212020;
+}
+ +

The CSS in src/styles.css apply to the entire application, however, these styles don't effect everything on the page. +The next step is to add styles that apply specifically to the AppComponent.

+ +

In app.component.css, add the following styles:

+ +
body {
+  color: #4d4d4d;
+  background-color: #f5f5f5;
+  color: #4d4d4d;
+}
+
+.main {
+  max-width: 500px;
+  width: 85%;
+  margin: 2rem auto;
+  padding: 1rem;
+  text-align: center;
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,.2), 0 2.5rem 5rem 0 rgba(0,0,0,.1);
+}
+
+@media screen and (min-width: 600px) {
+  .main {
+    width: 70%;
+  }
+}
+
+label {
+  font-size: 1.5rem;
+  font-weight: bold;
+  display:block;
+  padding-bottom: 1rem;
+}
+
+.lg-text-input {
+  width: 100%;
+  padding: 1rem;
+  border: 2px solid #000;
+  display: block;
+  box-sizing: border-box;
+  font-size: 1rem;
+}
+
+.btn-wrapper {
+  margin-bottom: 2rem;
+}
+
+.btn-menu {
+  flex-basis: 32%;
+}
+
+.active {
+  color: green;
+}
+
+ul {
+  padding-inline-start: 0;
+}
+
+ ul li {
+    list-style: none;
+}
+ +

The last step is to revisit your browser and look at how the styling has updated. Things now make a bit more sense.

+ +

Summary

+ +

Now that our brief tour of styling in Angular is done with, let's return to creating our app functionality. In the next article we will create a proper component for to-do items, and make it so that you can check, edit, and delete to-do items.

+ +
{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+ +

In this module

+ + diff --git a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_todo_list_beginning/index.html b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_todo_list_beginning/index.html new file mode 100644 index 0000000000..ab903a0970 --- /dev/null +++ b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_todo_list_beginning/index.html @@ -0,0 +1,283 @@ +--- +title: 開始開發我們的 Angular 待辦事項應用程式 +slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning +tags: + - 初學者 + - 框架 + - 安裝 + - 學習 + - 用戶端 + - 元件 + - 結構 + - Beginner + - Frameworks + - JavaScript + - Learn + - client-side + - Angular + - Components + - Structure +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+ +

At this point, we are ready to start creating our to-do list application using Angular. The finished application will display a list of to-do items and includes editing, deleting, and adding features. In this article you will get to know your application structure, and work up to displaying a basic list of to-do items.

+ + + + + + + + + + + + +
預備知識：Familiarity with the core HTML, CSS, and JavaScript languages, knowledge of the terminal/command line. +
學習目標：To create our basic app structure, get it displaying a list of to-do items, and understand fundamental Angular concepts such as component structure, sharing data between components, and looping content creation.
+ +

The to-do application structure

+ +

Just like a basic application that doesn't use a framework, an Angular application has an index.html. +Within the <body> tag of the index.html, Angular uses a special element — <app-root> — to insert your main component, which in turn includes other components you create. +Generally, you don't need to touch the index.html, instead focusing your work within specialized areas of your application called components.

+ +

Organize your application with components

+ +

Components are a central building block of Angular applications. +This to-do application has two components — a component as a foundation for your application, and a component for handling to-do items.

+ +

Each component is made up of a TypeScript class, HTML, and CSS. +Typescript transpiles, or converts, into JavaScript, which means that your application ultimately ends up in plain JavaScript but you have the convenience of using Typescript's extended features and streamlined syntax.

+ +

Dynamically change the UI with *ngIf and *ngFor

+ +

This tutorial also covers two important Angular directives for dynamically altering the structure of the DOM. +A directive is like a command that you can use in your HTML to affect change in your application.

+ +

The first directive that this tutorial covers is Angular's iterator, *ngFor. +*ngFor can dynamically create DOM elements based on items in an array.

+ +

The second directive that you learn in this tutorial is *ngIf. +You can use *ngIf to add or remove elements from the DOM based on a condition. +For example, if users want to edit an item in the to-do list, you can provide them with the means to edit the item. +If they do not want to edit an item, you can remove the interface for editing.

+ +

Share data between components

+ +

In this to-do application, you configure your components to share data. +To add new items to the to do list, the main component has to send the new item to the second component. +This second component manages the items and takes care of editing, marking as done, and deleting individual items.

+ +

You accomplish sharing data between Angular components with special decorators called @Input() and @Output(). +You use these decorators to specify that certain properties allow data to go into or out of a component. +To use @Output(), you raise an event in one component so that the other component knows that there is data available.

+ +

Define Item

+ +

In the app directory, create a new file named item.ts with the following contents:

+ +
export interface Item {
+  description: string;
+  done: boolean;
+}
+ +

The Item interface creates an item object model so that your application understands what an item is. +For this to-do list, an item is an object that has a description and can be done.

+ +

Add logic to AppComponent

+ +

Now that your application knows what an item is, you can give it some items by adding them to the TypeScript file, app.component.ts. +In app.component.ts, replace the contents with the following:

+ +
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+
+export class AppComponent {
+  title = 'todo';
+
+  filter: 'all' | 'active' | 'done' = 'all';
+
+  allItems = [
+    { description: 'eat', done: true },
+    { description: 'sleep', done: false },
+    { description: 'play', done: false },
+    { description: 'laugh', done: false },
+  ];
+
+  get items() {
+    if (this.filter === 'all') {
+      return this.allItems;
+    }
+    return this.allItems.filter(item => this.filter === 'done' ? item.done : !item.done);
+  }
+
+}
+ +

The first line is a JavaScript import that imports Angular. +The @Component() decorator specifies metadata about the AppComponent. +The default metadata properties are as follows:

+ + + +

The filter property is of type union, which means filter could have the value of all, active, or done. +With the union type, if you make a typo in the value you assign to the filter property, TypeScript lets you know so that you can catch the bug early. +This guide shows you how to add filtering in a later step, but you can also use a filter to show the default list of all the items.

+ +

The allItems array contains the to-do items and whether they are done. +The first item, eat, has a done value of true.

+ +

The getter, get items(), retrieves the items from the allItems array if the filter is equal to all. +Otherwise, get items() returns the done items or the outstanding items depending on how the user filters the view. +The getter also establishes the name of the array as items, which you'll use in the next section.

+ +

Add HTML to the AppComponent template

+ +

To see the list of items in the browser, replace the contents of app.component.html with the following HTML:

+ +
<div class="main">
+  <h1>My To Do List</h1>
+  <h2>What would you like to do today?</h2>
+
+  <ul>
+    <li *ngFor="let item of items">\{{item.description}}</li>
+  </ul>
+</div>
+ +

The <li> contains an *ngFor, a built-in Angular directive that iterates over the items in the items array. +For each item, *ngFor creates a new <li>. +The double curly braces that contain item.description instructs Angular to populate each <li> with the text of each item's description.

+ +

In the browser, you should see the list of items as follows:

+ +
+My To Do List
+What would you like to do today?
+
+* eat
+* sleep
+* play
+* laugh
+
+ +

Add items to the list

+ +

A to-do list needs a way to add items.

+ +

In app.component.ts, add the following method to the class:

+ +
addItem(description) {
+  this.allItems.unshift({
+    description,
+    done: false
+  });
+}
+ +

The addItem() method takes an item that the user provides and adds it to the array when the user clicks the Add button. +The addItem() method uses the array method unshift() to add a new item to the beginning of the array and the top of the list. +You could alternatively use push(), which would add the new item to the end of the array and the bottom of the list.

+ +

To use the addItem() method, edit the HTML in the AppComponent template.

+ +

In app.component.html, replace the <h2> with the following:

+ +
<label for="addItemInput">What would you like to do today?</label>
+
+<input
+  #newItem
+  placeholder="add an item"
+  (keyup.enter)="addItem(newItem.value); newItem.value = ''"
+  class="lg-text-input"
+  id="addItemInput"
+/>
+
+<button class="btn-primary" (click)="addItem(newItem.value)">Add</button>
+ +

When the user types a new item in the <input> and presses Enter, the addItem() method adds the value to the items array. +Pressing the Enter key also resets the value of <input> to an empty string. +Alternatively, the user can click the Add button which calls the sameaddItem() method.

+ + +

Summary

+ +

By now you should have your basic list of to-dos displaying in your browser. That's great progress! Of course, we have a lot more to do. In the next article we will look at adding some styling to our application.

+ +
{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+ +

In this module

+ + -- cgit v1.2.3-54-g00ecf