20分で最初のAngularアプリを作成する方法を学ぶ

AngularはJavaScriptフレームワークであり、Misko Heveryを作成し、Googleによって管理されています。これはMVC(Model View Vontroller)です。詳細については、公式ページをご覧ください。

現在、Angularの最新バージョンは5.2.10です。第1世代1.xと第2世代2.xがあり、2つの世代は構造と方法がまったく異なります。この記事では第2世代の2.xを使用するため、バージョンについて混乱しても心配しないでください。

目次

  • アイテムの追加(Angularでフォームを送信する方法を学ぶ)
  • アイテムの削除(Angularでイベントを追加する方法を学ぶ)
  • 角度アニメーション(コンポーネントをアニメーション化する方法を学ぶ)

前提条件:

  • Node.js

node.jsがコンピューターにインストールされているかどうかを確認します。インストールの詳細をご覧ください。

  • npm

npm(ノードパッケージマネージャー)はNode.jsとともにインストールされます

node.jsのバージョンを確認してください。

node -v

npm:

npm -v

Angular-CLI

最新バージョンのAngular-CLIが必要です。Angular CLIの詳細についてはこちらをご覧ください。また、インストール手順をご覧ください。

Angular-cliをインストールします。

npm install -g @angular/cli

そして最後に、あなたは持っているべきです:

  • JavaScriptの基礎知識
  • HTMLとCSSの基礎

Angularの知識は必要ありません。

Angularアプリを実行するための環境が整ったので、始めましょう!

最初のアプリを作成する

コンポーネントを作成および生成するためにangular-cliを使用します。サービス、ルーター、コンポーネント、およびディレクティブを生成します。

Angular-cliを使用して新しいAngularプロジェクトを作成するには、次のコマンドを実行するだけです。

ng new my-app

プロジェクトは自動的に生成されます。やることアプリを作ろう!

ng new todo-app

次に、テキストエディタでファイルを開きます。私はSublimetextを使用していますが、任意のエディターを選択できます。

アプリの構造は次のようになります。

ファイルについて混乱しても心配しないでください。すべての作業はappフォルダーにあります。5つのファイルが含まれています。

注:Angular 2はTypeScriptを使用しており、ファイルの拡張子は「.ts」です。

アプリの優れたインターフェースを作成するために、Bootstrap4フレームワークを使用します。

index.htmlにブートストラップcdnを含めます:

ターミナルでアプリを実行します。

ng serve

アプリは// localhost:4200 /で実行されます

すべては順調です ?!

それでは、HTMLの構造化を行ってみましょう。Bootstrapクラスを使用して単純なフォームを作成します。

app.component.html

Todo App

Add

ではapp.component.css

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

Angular 2で入力値をキャプチャするには、ngModelディレクティブを使用できます。input要素内に属性として変数を挿入できます。

属性として変数を作成するには、#の後に変数の名前を使用します。

// get the value of the Variable

{{myVariable.value}}

次に、「todo」変数値を取得します。

{{todo.value}}

すべては順調です ?!

次に、入力から取得した値を保存する必要があります。私たちは、中空の配列を作成することができますapp.component.ts AppComponentクラスの内部を:

export class AppComponent { todoArray=[] }

次に、キャプチャした値を「todoArray」にプッシュするクリックイベントをボタンに追加する必要があります。

app.component.html

Add

ではapp.component.ts

export class AppComponent { todoArray=[]
addTodo(value){ this.todoArray.push(value) console.log(this.todos) } }
console.log(this.todoArray)を使用して、配列の値を確認します

「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.

app.component.html:

  • {{todo}}

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.

Include Google fonts inside app.component.css:

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

And Material-icons inside index.html:

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

To use Material icons:

iconName

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

// put add icon inside "input-group-text" div
add
// and delete icon inside list item 
  • {{todo}}delete
  • For styles in app.component.css:

    /*Google fonts*/@import url('//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.

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

  • {{todo}} delete
  • In 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.

    In 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.

    app.component.html

    in 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”:

    // 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.

    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:

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

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

    @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

    Todo App

    add
    • {{todo}} delete

    app.component.css

    /*Google fonts*/@import url('//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.

    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.

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

    [email protected] (@hayanisaid1995) | Twitter

    The latest Tweets from [email protected] (@hayanisaid1995). #Web_Developer /#Frontend / #Back_end(#PHP &…twitter.com

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

    Angular 1.x

    • Shaping with Angular
    • Learn Angular

    Angular 2.x (recommended)

    • learn Angular2 (coursetro)
    • YouTube playlist