了解如何在20分鐘內創建您的第一個Angular應用

Angular is a JavaScript framework, created my Misko Hevery and maintained by Google. It’s an MVC (Model View Vontroller). You can visit the official page to learn more about it.

Angular是一個JavaScript框架，創建了我的Misko Hevery，并由Google維護。這是一個MVC(模型視圖Vontroller)。您可以訪問官方頁面以了解更多信息。

Right now, the latest version of Angular is 5.2.10. There is first generation 1.x and second generation 2.x, and the two generations are totally different in their structures and methods. Don’t worry if you feel confused about the version, because in this article we will be using the second generation 2.x

目前，Angular的最新版本是5.2.10。 有第一代 1.x和第二代2.x ，這兩代在結構和方法上完全不同。如果您對版本感到困惑，請不要擔心，因為在本文中，我們將使用第二代2.x

目錄 (Table of contents)

Adding an item (learn how to submit a form in Angular )
添加項目(了解如何在Angular中提交表單)
Removing an item (learn how to add an event in Angular)
刪除項目(了解如何在Angular中添加事件)
Angular animation (learn how animate the components )
角度動畫(了解如何為組件設置動畫)

先決條件： (Prerequisites:)

Node.js
Node.js

Check if node.js is installed in your computer. Learn more about installation.

檢查您的計算機中是否安裝了node.js。了解有關安裝的更多信息。

npm
npm

npm (node package manager) is installed with Node.js

npm (節點程序包管理器)與Node.js一起安裝

Check the node.js version:

檢查node.js版本：

node -v

npm:

npm：

npm -v

Angular-CLI

角度CLI

You should have the latest version of Angular-CLI. Learn more about Angular CLI here, and find the instructions for installation.

您應該擁有Angular-CLI的最新版本。 在此處了解有關Angular CLI的更多信息，并找到安裝說明。

Install Angular-cli:

安裝Angular-cli：

npm install -g @angular/cli

And finally, you should have:

最后，您應該具有：

Basic knowledge of JavaScript
JavaScript的基礎知識
HTML and CSS fundamentals
HTML和CSS基礎

You don’t need to have any knowledge of Angular.

您不需要了解Angular。

Now that we have the environment to run our Angular app, let’s get started!

現在我們有了運行Angular應用程序的環境，讓我們開始吧！

創建我們的第一個應用 (Creating our first app)

We will use angular-cli to create and generate our components. It will generate services, router, components, and directives.

我們將使用angular-cli創建和生成組件。它將生成服務，路由器，組件和指令。

To create a new Angular project with Angular-cli, just run:

要使用Angular-cli創建一個新的Angular項目，只需運行：

ng new my-app

The project will be generated automatically. Let’s create our to-do app!

該項目將自動生成。讓我們創建我們的待辦應用！

ng new todo-app

Then, open the files in your text editor. I use Sublime text, but you can choose any editor.

然后，在文本編輯器中打開文件。我使用Sublime文本，但是您可以選擇任何編輯器。

Here’s what the app structure looks like:

應用程序結構如下所示：

Don’t worry if you are confused about the files. All of our work will be in the app folder. It contains five files:

如果您對文件感到困惑，請不要擔心。我們所有的工作都將在app文件夾中。它包含五個文件：

Note: Angular 2 uses TypeScript, in which files end with “.ts”extension.
注意：Angular 2使用TypeScript ，其中文件以“ .ts”擴展名結尾。

To make a nice interface for our app, we will use the Bootstrap 4 Framework.

為了使我們的應用程序界面美觀，我們將使用Bootstrap 4 Framework。

Include bootstrap cdn in index.html:

在index.html中包含引導CDN ：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Run the app in your terminal:

在終端中運行該應用程序：

ng serve

The app will run in http://localhost:4200/

該應用程序將在http：// localhost：4200 /中運行

All is well ?!

一切都很好？！

Now let’s do some HTML structuring. We will use Bootstrap classes to create a simple form.

現在讓我們進行一些HTML結構化。我們將使用Bootstrap類創建一個簡單的表單。

app.component.html:

app.component.html ：

<div class="container"> <form>  <div class="form-group">  <h1 class="text-center text-primary">Todo App</h1>   <div class="input-group-prepend">       <input type="text" class="form-control" placeholder="Add Todo" name="todo">    <span class="input-group-text">Add</span>   </div>  </div> </form></div>

In app.component.css:

在app.component.css中 ：

body{ padding: 0; margin: 0;

}form{ max-width: 25em; margin: 1em auto;}

To capture the input value in Angular 2, we can use the ngModel directive. You can insert a variable as an attribute inside the input element.

要捕獲Angular 2中的輸入值，我們可以使用ngModel指令。您可以在輸入元素中插入變量作為屬性。

<input type="text" #todo class="form-control" placeholder="Add Todo" name="todo" ngModel>

To create a variable as an attribute, use # followed by the variable’s name.

要將變量創建為屬性，請使用＃后跟變量名稱。

<input #myVariable type="text" name="text" ngModel>

// get the value of the Variable<p>{{myVariable.value}}</p>

Now get the “todo” variable value:

現在獲取“ todo”變量值：

<p>{{todo.value}}</p>

All is well ?!

一切都很好？！

Now we have to store the value captured from the input. We can create an empty array in app.component.ts inside the AppComponent class:

現在我們必須存儲從輸入中捕獲的值。我們可以創建在AppComponent類中app.component.ts空數組：

export class AppComponent {  todoArray=[] }

Then we have to add a click event to our button that pushes the value captured into “todoArray”.

然后，我們必須在按鈕上添加一個click事件，該事件會將捕獲的值推送到“ todoArray ”中。

app.component.html:

app.component.html ：

<span class="input-group-text" (click)="addTodo(todo.value)">Add</span>

In app.component.ts:

在app.component.ts中 ：

export class AppComponent { todoArray=[]

addTodo(value){    this.todoArray.push(value)    console.log(this.todos)  } }

Use console.log(this.todoArray) to see Array value

使用console.log(this.todoArray)查看數組值

從“ todoArray”中獲取數據 (Fetch data from “todoArray”)

Now we have to fetch data stored in “todosArray.” We will use the *ngFor directive to loop through the array and extract the data.

現在我們必須獲取存儲在“ todosArray”中的數據。我們將使用* ngFor指令遍歷數組并提取數據。

app.component.html:

app.component.html：

<div class="data">  <ul class="list-instyled">   <li *ngFor="let todo of todoArray">{{todo}}</li>  </ul>  </div>

After fetching data:

提取數據后：

The data will now be fetched automatically when we click the add button.

現在，當我們單擊添加按鈕時，將自動獲取數據。

造型應用 (Styling the app)

I like to use Google-fonts and Material-icons, which are free to use.

我喜歡使用Google字體和Material-icons ，它們是免費使用的。

Include Google fonts inside app.component.css:

在app.component.css中包含Google字體：

/*Google fonts*/@import url('https://fonts.googleapis.com/css?family=Raleway');

And Material-icons inside index.html:

還有index.html中的 Material-icons：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

After adding some styling to our app, it will look like this:

在為我們的應用添加一些樣式后，它將如下所示：

To use Material icons:

要使用“材質”圖標：

<i class="material-icons>iconName</i>

Add “delete” and “add” icons in app.component.html:

在app.component.html中添加“刪除”和“添加”圖標：

// put add icon inside "input-group-text" div

<span class="input-group-text" (click)="addTodo(todo.value)"><i class="material-icons">add</i></span>

// and delete icon inside list item <li *ngFor="let todo of todoArray">{{todo}}<i class="material-icons">delete</i></li>

For styles in app.component.css:

對于app.component.css中的樣式：

/*Google fonts*/@import url('https://fonts.googleapis.com/css?family=Raleway');

body{ padding: 0; margin: 0;

}form{ max-width: 30em; margin: 4em auto; position: relative; background: #f4f4f4; padding: 2em 3em;}form h1{    font-family: "Raleway";    color:#F97300; }form input[type=text]::placeholder{   font-family: "Raleway";   color:#666; }form .data{    margin-top: 1em;}form .data li{ background: #fff; border-left: 4px solid #F97300; padding: 1em; margin: 1em auto; color: #666; font-family: "Raleway";}form .data li i{    float: right;    color: #888;    cursor: pointer;}form .input-group-text{    background: #F97300;    border-radius: 50%;    width: 5em;    height: 5em;    padding: 1em 23px;    color: #fff;    position: absolute;    right: 13px;    top: 68px;    cursor: pointer;}form .input-group-text i{    font-size: 2em;}form .form-control{ height: 3em;    font-family: "Raleway";}form .form-control:focus{ box-shadow: 0;}

Our app is almost done, but we need to add some features. A delete functionality should let users click a delete icon and delete an item. It would also be great to have the option to enter a new item with the return key, instead of clicking the add button.

我們的應用程序即將完成，但是我們需要添加一些功能。刪除功能應使用戶單擊刪除圖標并刪除項目。可以選擇使用返回鍵輸入新項目，而不用單擊添加按鈕，這也很好。

Deleting items

刪除項目

To add the delete functionality, we will use the “splice” array method and a for loop. We will loop through “todoarray” and extract the item we want to delete.

為了添加刪除功能，我們將使用“拼接”數組方法和一個for循環。我們將遍歷“ todoarray”并提取要刪除的項目。

Add a (click) event to delete icon and give it “todo” as parameter :

添加一個(單擊)事件以刪除圖標，并將其“ todo”作為參數：

<li *ngFor="let todo of todoArray">{{todo}} <i (click)="deleteItem(todo)" class="material-icons">delete</i></li>

In app.component.ts:

在app.component.ts中 ：

/*delete item*/  deleteItem(){   console.log("delete item")  }

When you click delete, this should show up in the console:

當您單擊刪除時，這應該顯示在控制臺中：

Now we have to loop through “todoArray” and splice the item we clicked.

現在我們必須遍歷“ todoArray”并拼接我們單擊的項目。

In app.component.ts:

在app.component.ts中 ：

/*delete item*/  deleteItem(todo){   for(let i=0 ;i<= this.todoArray.length ;i++){    if(todo== this.todoArray[i]){     this.todoArray.splice(i,1)    }   }  }

The result:

結果：

Awesome ?!!

太棒了!!

輸入要添加的項目 (Entering to add items)

We can add a submit event to the form:

我們可以在表單中添加一個提交事件：

(ngSubmit)="TodoSubmit()"

We need to add the variable “#todoForm” to the form and give it “ngForm” as a value. In this case, we just have one field so we will just get a single value. If we have multiple fields, the submit event will return the values of all the fields in the form.

我們需要將變量“ #todoForm”添加到表單并將其“ ngForm”作為值。在這種情況下，我們只有一個字段，所以我們只會得到一個值。如果我們有多個字段，則Submit事件將返回表單中所有字段的值。

app.component.html

<form #todoForm= "ngForm" (ngSubmit)="todoSubmit(todoForm.value)"></form>

in app.component.ts

在app.component.ts中

// submit Form  todoSubmit(value:any){ console.log(value)  }

Check the console. It will return an object of values:

檢查控制臺。它將返回一個值對象：

So now we have to push the returned value to “todoArray”:

因此，現在我們必須將返回值推入“ todoArray”：

// submit Form  todoSubmit(value:any){     if(value!==""){    this.todoArray.push(value.todo)     //this.todoForm.reset()    }else{      alert('Field required **')    }      }

Here we are ?. The value is inserted without needing to click the add button, just by clicking “enter”:

我們來了？。只需單擊“輸入”即可插入值，而無需單擊添加按鈕：

One more thing. To reset the the form after submitting, add the “resetForm()” build-in method to submit the event.

還有一件事。要在提交后重置表單，請添加“ resetForm()”內置方法來提交事件。

<form #todoForm= "ngForm" (ngSubmit)="todoSubmit(todoForm.value); todoForm.resetForm()" ></form>

The form will reset after each submit now:

該表格將在每次提交后重置：

添加動畫 (Adding animations)

I like to add a little touch of animations. To add animation, import the animations components in your app.component.ts:

我喜歡添加一些動畫。要添加動畫，請在app.component.ts中導入動畫組件：

import { Component,trigger,animate,style,transition,keyframes } from '@angular/core';

Then add the animations property to “@component” decorator:

然后將animations屬性添加到“ @component”裝飾器中：

@Component({  selector: 'app-root',  templateUrl: './app.component.html',  styleUrls: ['./app.component.css'],  animations:[   trigger("moveInLeft",[      transition("void=> *",[style({transform:"translateX(300px)"}),        animate(200,keyframes([         style({transform:"translateX(300px)"}),         style({transform:"translateX(0)"})           ]))]),

transition("*=>void",[style({transform:"translateX(0px)"}),        animate(100,keyframes([         style({transform:"translateX(0px)"}),         style({transform:"translateX(300px)"})           ]))])             ])

]})

Now the items have a nice effect when they’re entered and deleted.

現在，在輸入和刪除項目時它們具有很好的效果。

所有代碼 (All the code)

app.component.ts

import { Component,trigger,animate,style,transition,keyframes } from '@angular/core';

@Component({  selector: 'app-root',  templateUrl: './app.component.html',  styleUrls: ['./app.component.css'],  animations:[   trigger("moveInLeft",[      transition("void=> *",[style({transform:"translateX(300px)"}),        animate(200,keyframes([         style({transform:"translateX(300px)"}),         style({transform:"translateX(0)"})           ]))]),

transition("*=>void",[style({transform:"translateX(0px)"}),        animate(100,keyframes([         style({transform:"translateX(0px)"}),         style({transform:"translateX(300px)"})           ]))])             ])

]})export class AppComponent {  todoArray=[];  todo;  //todoForm: new FormGroup()

addTodo(value){    if(value!==""){     this.todoArray.push(value)    //console.log(this.todos)   }else{    alert('Field required **')  }      }

/*delete item*/  deleteItem(todo){   for(let i=0 ;i<= this.todoArray.length ;i++){    if(todo== this.todoArray[i]){     this.todoArray.splice(i,1)    }   }  }

// submit Form  todoSubmit(value:any){     if(value!==""){    this.todoArray.push(value.todo)     //this.todoForm.reset()    }else{      alert('Field required **')    }      } }

app.component.html

<div class="container"> <form #todoForm= "ngForm"(submit)="todoSubmit(todoForm.value); todoForm.resetForm()" >  <div class="form-group">  <h1 class="text-center ">Todo App</h1>   <div class="input-group-prepend">       <input type="text" #todo  class="form-control" placeholder="Add Todo" name="todo" ngModel>    <span class="input-group-text" (click)="addTodo(todo.value)">    <i class="material-icons">add</i></span>   </div>  </div>  <div class="data">  <ul class="list-unstyled">   <li [@moveInLeft]  *ngFor="let todo of todoArray">{{todo}} <i (click)="deleteItem(todo)" class="material-icons">delete</i></li>  </ul> </div> </form></div>

app.component.css

/*Google fonts*/@import url('https://fonts.googleapis.com/css?family=Raleway');

body{ padding: 0; margin: 0;

}form{ max-width: 30em; margin: 4em auto; position: relative;    background: #f4f4f4;    padding: 2em 3em;    overflow: hidden;}form h1{    font-family: "Raleway";    color:#F97300; }form input[type=text]::placeholder{   font-family: "Raleway";   color:#666; }form .data{    margin-top: 1em;}form .data li{ background: #fff; border-left: 4px solid #F97300; padding: 1em; margin: 1em auto; color: #666; font-family: "Raleway";}form .data li i{    float: right;    color: #888;    cursor: pointer;}form .input-group-text{    background: #F97300;    border-radius: 50%;    width: 5em;    height: 5em;    padding: 1em 23px;    color: #fff;    position: absolute;    right: 13px;    top: 68px;    cursor: pointer;}form .input-group-text i{    font-size: 2em;}form .form-control{ height: 3em;    font-family: "Raleway";}form .form-control:focus{ box-shadow: 0;}

We are done ?. You can find the files and code on Github.

我們完了？。您可以在Github上找到文件和代碼。

觀看演示 (See the Demo)

結論 (Conclusion)

Angular is easier than you think. Angular is one of the best JavaScript libraries, and it has great support and a nice community. It also has tools that make working with Angular fast and easy, like Angular-cli.

Angular比您想象的要容易。 Angular是最好JavaScript庫之一，它具有強大的支持和良好的社區。它還具有使Angular快速便捷地使用的工具，例如Angular-cli。

Subscribe to this mail-list to learn more about Angular.

訂閱此郵件列表以了解有關Angular的更多信息。

SaidHayani@ (@hayanisaid1995) | TwitterThe latest Tweets from SaidHayani@ (@hayanisaid1995). #Web_Developer /#Frontend / #Back_end(#PHP &…twitter.com

SaidHayani @(@ hayanisaid1995)| Twitter 來自SaidHayani @(@ hayanisaid1995)的最新推文。 #Web_Developer /＃Frontend / #Back_end(#PHP＆... twitter.com

Here are some of the best online courses to learn Angular for free:

以下是一些免費免費學習Angular的最佳在線課程：

Angular 1.x

角1.x