Erfahren Sie, wie Sie in 20 Minuten Ihre erste Angular-App erstellen

Angular ist ein JavaScript-Framework, das mein Misko Hevery erstellt und von Google verwaltet wird. Es ist ein MVC (Model View Vontroller). Sie können die offizielle Seite besuchen, um mehr darüber zu erfahren.

Derzeit ist die neueste Version von Angular 5.2.10. Es gibt die erste Generation 1.x und die zweite Generation 2.x, und die beiden Generationen unterscheiden sich in ihren Strukturen und Methoden völlig. Machen Sie sich keine Sorgen, wenn Sie sich über die Version verwirrt fühlen, denn in diesem Artikel verwenden wir die zweite Generation 2.x.

Inhaltsverzeichnis

  • Hinzufügen eines Elements (Erfahren Sie, wie Sie ein Formular in Angular senden)
  • Entfernen eines Elements (Erfahren Sie, wie Sie ein Ereignis in Angular hinzufügen)
  • Winkelanimation (lernen, wie die Komponenten animiert werden)

Voraussetzungen:

  • Node.js

Überprüfen Sie, ob node.js auf Ihrem Computer installiert ist. Erfahren Sie mehr über die Installation.

  • npm

npm (Node Package Manager) wird mit Node.js installiert

Überprüfen Sie die node.js- Version:

node -v

npm:

npm -v

Angular-CLI

Sie sollten die neueste Version von Angular-CLI haben. Erfahren Sie mehr über Angular CLI hier , und die Anweisungen für die Installation.

Installieren Sie Angular-cli:

npm install -g @angular/cli

Und schließlich sollten Sie haben:

  • Grundkenntnisse in JavaScript
  • HTML- und CSS-Grundlagen

Sie müssen keine Angular-Kenntnisse haben.

Jetzt, da wir die Umgebung haben, um unsere Angular-App auszuführen, können wir loslegen!

Erstellen unserer ersten App

Wir werden Angular-Cli verwenden, um unsere Komponenten zu erstellen und zu generieren. Es werden Dienste, Router, Komponenten und Anweisungen generiert.

Um ein neues Angular-Projekt mit Angular-cli zu erstellen, führen Sie einfach Folgendes aus:

ng new my-app

Das Projekt wird automatisch generiert. Lassen Sie uns unsere To-Do-App erstellen!

ng new todo-app

Öffnen Sie dann die Dateien in Ihrem Texteditor. Ich verwende Sublime-Text, aber Sie können einen beliebigen Editor auswählen.

So sieht die App-Struktur aus:

Machen Sie sich keine Sorgen, wenn Sie über die Dateien verwirrt sind. Alle unsere Arbeiten werden im App- Ordner sein. Es enthält fünf Dateien:

Hinweis: Angular 2 verwendet TypeScript , bei dem Dateien mit der Erweiterung " .ts" enden .

Um eine schöne Oberfläche für unsere App zu erstellen, verwenden wir das Bootstrap 4 Framework.

Fügen Sie die Bootstrap- CDN in die index.html ein :

Führen Sie die App in Ihrem Terminal aus:

ng serve

Die App wird in // localhost: 4200 / ausgeführt

Alles ist gut ?!

Lassen Sie uns nun eine HTML-Strukturierung durchführen. Wir werden Bootstrap-Klassen verwenden, um ein einfaches Formular zu erstellen.

app.component.html :

Todo App

Add

In app.component.css :

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

Um den Eingabewert in Angular 2 zu erfassen, können wir die Direktive ngModel verwenden . Sie können eine Variable als Attribut in das Eingabeelement einfügen.

Verwenden Sie zum Erstellen einer Variablen als Attribut # gefolgt vom Namen der Variablen.

// get the value of the Variable

{{myVariable.value}}

Holen Sie sich nun den Variablenwert "todo":

{{todo.value}}

Alles ist gut ?!

Jetzt müssen wir den von der Eingabe erfassten Wert speichern. Wir können ein leeres Array in app.component.ts innerhalb der AppComponent-Klasse erstellen:

export class AppComponent { todoArray=[] }

Dann müssen wir unserer Schaltfläche ein Klickereignis hinzufügen, das den erfassten Wert in " todoArray " überträgt .

app.component.html :

Add

In app.component.ts :

export class AppComponent { todoArray=[]
addTodo(value){ this.todoArray.push(value) console.log(this.todos) } }
Verwenden Sie console.log (this.todoArray), um den Array-Wert anzuzeigen

Daten von "todoArray" abrufen

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