Pelajari cara membuat aplikasi Angular pertama Anda dalam 20 menit

Pemrograman

Angular adalah kerangka JavaScript, dibuat oleh Misko Hevery saya dan dikelola oleh Google. Ini adalah MVC (Model View Vontroller). Anda dapat mengunjungi halaman resmi untuk mempelajarinya lebih lanjut.

Saat ini, Angular versi terbaru adalah 5.2.10. Ada generasi pertama 1.x dan generasi kedua 2.x, dan kedua generasi itu sama sekali berbeda dalam struktur dan metodenya. Jangan khawatir jika Anda merasa bingung dengan versinya, karena pada artikel kali ini kita akan menggunakan generasi kedua 2.x

Daftar Isi

  • Menambahkan item (pelajari cara mengirimkan formulir di Angular)
  • Menghapus item (pelajari cara menambahkan acara di Angular)
  • Animasi sudut (pelajari cara menganimasikan komponen)

Prasyarat:

  • Node.js

Periksa apakah node.js diinstal di komputer Anda. Pelajari lebih lanjut tentang penginstalan.

  • npm

npm (manajer paket node) diinstal dengan Node.js

Periksa versi node.js :

node -v

npm:

npm -v

Angular-CLI

Anda harus memiliki Angular-CLI versi terbaru. Pelajari lebih lanjut tentang Angular CLI di sini , dan temukan instruksi untuk instalasi.

Instal Angular-cli:

npm install -g @angular/cli

Dan terakhir, Anda harus memiliki:

  • Pengetahuan dasar tentang JavaScript
  • Dasar-dasar HTML dan CSS

Anda tidak perlu memiliki pengetahuan tentang Angular.

Sekarang kita memiliki lingkungan untuk menjalankan aplikasi Angular kita, mari kita mulai!

Membuat aplikasi pertama kami

Kami akan menggunakan angular-cli untuk membuat dan menghasilkan komponen kami. Ini akan menghasilkan layanan, router, komponen, dan arahan.

Untuk membuat proyek Angular baru dengan Angular-cli, jalankan saja:

ng new my-app

Proyek akan dibuat secara otomatis. Mari buat aplikasi agenda kita!

ng new todo-app

Kemudian, buka file di editor teks Anda. Saya menggunakan teks Sublime, tetapi Anda dapat memilih editor apa saja.

Berikut tampilan struktur aplikasi:

Jangan khawatir jika Anda bingung dengan file tersebut. Semua pekerjaan kami akan ada di folder aplikasi . Ini berisi lima file:

Catatan: Angular 2 menggunakan TypeScript , di mana file diakhiri dengan ekstensi ".ts" .

Untuk membuat antarmuka yang bagus untuk aplikasi kami, kami akan menggunakan Kerangka Bootstrap 4.

Sertakan cdn bootstrap di index.html :

Jalankan aplikasi di terminal Anda:

ng serve

Aplikasi akan berjalan di // localhost: 4200 /

Semua baik-baik saja ?!

Sekarang mari kita lakukan beberapa penataan HTML. Kami akan menggunakan kelas Bootstrap untuk membuat formulir sederhana.

app.component.html :

Todo App
 Add

Dalam app.component.css :

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

Untuk menangkap nilai input di Angular 2, kita bisa menggunakan direktif ngModel . Anda dapat memasukkan variabel sebagai atribut di dalam elemen masukan.

Untuk membuat variabel sebagai atribut, gunakan # diikuti dengan nama variabel.

// get the value of the Variable
{{myVariable.value}}

Sekarang dapatkan nilai variabel "rencana":

{{todo.value}}

Semua baik-baik saja ?!

Sekarang kita harus menyimpan nilai yang ditangkap dari input. Kita dapat membuat array kosong di app.component.ts di dalam kelas AppComponent:

export class AppComponent { todoArray=[] }

Kemudian kita harus menambahkan event klik ke tombol kita yang mendorong nilai yang ditangkap ke dalam " todoArray ".

app.component.html :

Add

Di app.component.ts :

export class AppComponent { todoArray=[]
addTodo(value){ this.todoArray.push(value) console.log(this.todos) } }
Gunakan console.log (this.todoArray) untuk melihat nilai Array

Ambil data dari "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