Lær hvordan du opretter din første Angular-app på 20 minutter

Angular er en JavaScript-ramme, oprettet min Misko Hevery og vedligeholdt af Google. Det er en MVC (Model View Vontroller). Du kan besøge den officielle side for at lære mere om det.

Lige nu er den seneste version af Angular 5.2.10. Der er første generation 1.x og anden generation 2.x, og de to generationer er helt forskellige i deres strukturer og metoder. Bare rolig, hvis du føler dig forvirret over versionen, for i denne artikel bruger vi anden generation 2.x

Indholdsfortegnelse

  • Tilføjelse af et element (lær hvordan du indsender en formular i kantet)
  • Fjernelse af et element (lær hvordan du tilføjer en begivenhed i Angular)
  • Vinklet animation (lær hvordan animere komponenterne)

Forudsætninger:

  • Node.js

Kontroller, om node.js er installeret på din computer. Lær mere om installation.

  • npm

npm (node ​​package manager) er installeret med Node.js

Tjek node.js- versionen:

node -v

npm:

npm -v

Vinkel-CLI

Du skal have den nyeste version af Angular-CLI. Lær mere om Angular CLI her , og find instruktionerne til installation.

Installer Angular-cli:

npm install -g @angular/cli

Og endelig skulle du have:

  • Grundlæggende viden om JavaScript
  • HTML og CSS grundlæggende

Du behøver ikke have noget kendskab til Angular.

Nu hvor vi har miljøet til at køre vores Angular-app, lad os komme i gang!

Opretter vores første app

Vi bruger angular-cli til at oprette og generere vores komponenter. Det genererer tjenester, router, komponenter og direktiver.

For at oprette et nyt Angular-projekt med Angular-cli skal du bare køre:

ng new my-app

Projektet genereres automatisk. Lad os oprette vores to-do-app!

ng new todo-app

Åbn derefter filerne i din teksteditor. Jeg bruger sublim tekst, men du kan vælge en hvilken som helst editor.

Sådan ser appstrukturen ud:

Bare rolig, hvis du er forvirret over filerne. Alt vores arbejde vil være i app- mappen. Den indeholder fem filer:

Bemærk: Angular 2 bruger TypeScript , hvor filer slutter med " .ts" udvidelse.

For at skabe en flot grænseflade til vores app bruger vi Bootstrap 4 Framework.

Inkluder bootstrap cdn i index.html :

Kør appen i din terminal:

ng serve

Appen kører i // localhost: 4200 /

Alt er godt ?!

Lad os nu lave nogle HTML-strukturer. Vi bruger Bootstrap-klasser til at oprette en simpel form.

app.component.html :

Todo App

Add

I app.component.css :

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

For at indfange inputværdien i Angular 2 kan vi bruge ngModel- direktivet. Du kan indsætte en variabel som attribut inde i inputelementet.

For at oprette en variabel som attribut skal du bruge # efterfulgt af variabelens navn.

// get the value of the Variable

{{myVariable.value}}

Få nu den "todo" variable værdi:

{{todo.value}}

Alt er godt ?!

Nu skal vi gemme den værdi, der er fanget fra input. Vi kan oprette et tomt array i app.component.ts inden for AppComponent-klassen:

export class AppComponent { todoArray=[] }

Derefter er vi nødt til at tilføje en klikhændelse til vores knap, der skubber den fangede værdi ind i " todoArray ".

app.component.html :

Add

I app.component.ts :

export class AppComponent { todoArray=[]
addTodo(value){ this.todoArray.push(value) console.log(this.todos) } }
Brug console.log (this.todoArray) til at se Array-værdi

Hent data fra “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

    Vinkel 2.x (anbefales)

    • lære Angular2 (coursetro)
    • YouTube-afspilningsliste