Opi luomaan ensimmäinen kulmainen sovelluksesi 20 minuutissa

Kuva Kelly Sikkema on Unsplash

Angular on JavaScript-kehys, jonka on luonut Misko Hevery ja ylläpitänyt Google. Se on MVC (Model View Vontroller). Voit käydä virallisella sivulla saadaksesi lisätietoja siitä.

Tällä hetkellä uusin Angular-versio on 5.2.10. On ensimmäisen sukupolven 1.x ja toisen sukupolven 2.x, ja nämä kaksi sukupolvea ovat täysin erilaisia ​​rakenteeltaan ja menetelmillään. Älä huolestu, jos olet hämmentynyt versiosta, koska tässä artikkelissa käytämme toisen sukupolven 2.x-versiota

Sisällysluettelo

  • Kohteen lisääminen (opi kuinka lähettää lomake kulmina)
  • Kohteen poistaminen (opi lisää tapahtuma kulmaan)
  • Kulma-animaatio (oppia kuinka animoida komponentteja)

edellytykset:

  • Node.js

Tarkista, onko node.js asennettu tietokoneeseesi. Lisätietoja asennuksesta.

  • NPM

npm (node ​​package manager) asennetaan Node.js-sovellukseen

Tarkista node.js-versio:

solmu -v

NPM:

npm-v

Kulma-CLI

Sinulla tulisi olla uusin versio Angular-CLI: stä. Lisätietoja kulma-CLI: stä täältä ja löydät asennusohjeet.

Asenna Angular-cli:

npm asenna -g @ kulma / cli

Ja lopuksi sinun pitäisi olla:

  • Perustiedot JavaScriptistä
  • HTML- ja CSS-perusteet

Sinun ei tarvitse olla mitään tietoa kulmasta.

Nyt kun meillä on ympäristö kulmakehyssovelluksemme käyttämiseksi, aloitetaan!

Luomme ensimmäisen sovelluksemme

Käytämme kulma-cli-komponentteja komponenttien luomiseen ja luomiseen. Se tuottaa palveluita, reititintä, komponentteja ja direktiivejä.

Jos haluat luoda uuden kulmiprojektin Angular-cli: llä, suorita vain:

uusi sovellus

Projekti luodaan automaattisesti. Luodaan tehtäväsovelluksemme!

uusi tehtäväsovellus

Avaa sitten tiedostot tekstieditorissa. Käytän Sublime-tekstiä, mutta voit valita minkä tahansa toimittajan.

Sovelluksen rakenne näyttää tältä:

Älä huolestu, jos olet sekava tiedostojen suhteen. Kaikki työmme on sovelluskansiossa. Se sisältää viisi tiedostoa:

Huomaa: Kulma 2 käyttää TypeScriptiä, jossa tiedostot päättyvät .ts-tiedostoon.

Teemme Bootstrap 4 -kehyksen avulla mukavan käyttöliittymän sovelluksellemme.

Lisää bootstrap cdn hakemistoon index.html:

Suorita sovellus terminaalissasi:

palvella

Sovellus toimii osoitteessa http: // localhost: 4200 /

Kaikki on hyvin !

Tehdään nyt HTML-jäsentely. Käytämme Bootstrap-luokkia yksinkertaisen lomakkeen luomiseen.

app.component.html:

    
  

Todo App

   
             Lisää         

App.component.css:

body {
 täyte: 0;
 marginaali: 0;
}
muodossa {
 max-leveys: 25em;
 marginaali: 1em auto;
}

Syöttääksesi tuloarvon kulmassa 2, käytämme ngModel-direktiiviä. Voit lisätä muuttujan määritteenä syöttöelementin sisään.

Voit luoda muuttujan määritteenä # -näppäimellä, jota seuraa muuttujan nimi.

// hanki muuttujan arvo

{{myVariable.value}}

Nyt saat todo-muuttujan arvon:

{{todo.value}}

Kaikki on hyvin !

Nyt meidän on tallennettava tulosta kaapattu arvo. Voimme luoda tyhjän taulukon app.component.ts-sovellukseen AppComponent-luokan sisällä:

viedä luokka AppComponent {
  todoArray = []
 
}

Sitten meidän on lisättävä napsautustapahtuma painikkeeseemme, joka työntää kaapatun arvon ”todoArray” -kohtaan.

app.component.html:

 Lisää 

App.component.ts:

viedä luokka AppComponent {
 todoArray = []
addTodo (arvo) {
    this.todoArray.push (arvo)
    console.log (this.todoArray)
  }
 
}
Käytä console.log (this.todoArray) nähdäksesi taulukon arvon

Hae tietoja ”todoArray”

Nyt meidän on haettava ”todosArray” -sovellukseen tallennetut tiedot. Käytämme * ngFor-direktiiviä silmukoidaksesi taulukon läpi ja purkamalla tietoja.

app.component.html:

  
       
  • {{todo}}
  •      

Tietojen noutamisen jälkeen:

Tiedot noudetaan nyt automaattisesti, kun napsautamme Lisää-painiketta.

Sovelluksen muotoilu

Haluan käyttää Google-fontteja ja Material-kuvakkeita, jotka ovat ilmaisia.

Lisää Google-fontit app.component.css: iin:

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

Ja materiaalikuvakkeet index.html: n sisällä:

Kun olet lisännyt sovellukseemme tyyliä, se näyttää tältä:

Materiaalikuvakkeiden käyttö:


 lisää 
// ja poista kuvake luettelon sisällä
 
  • {{todo}} poista
  • App.component.css -tyylien tyylit:

    / * Google-fontit * /
    @import-URL ('https://fonts.googleapis.com/css?family=Raleway');
    body {
     täyte: 0;
     marginaali: 0;
    }
    muodossa {
     max-leveys: 30em;
     marginaali: 4em auto;
     asema: suhteellinen;
     tausta: # f4f4f4;
     täyte: 2em 3em;
    }
    muoto h1 {
        kirjasinperhe: "Raleway";
        color: # F97300;
    }
    lomakkeen syöttö [type = text] :: paikkamerkki {
       kirjasinperhe: "Raleway";
       color: # 666;
    }
    muoto .data {
        reunan yläosa: 1em;
    }
    muoto .data li {
     tausta: #fff;
     reuna-vasen: 4xx kiinteä # F97300;
     täyte: 1em;
     marginaali: 1em auto;
     väri: # 666;
     kirjasinperhe: "Raleway";
    }
    muoto .data li i {
        kellua: oikea;
        väri: # 888;
        kohdistin: osoitin;
    }
    muoto .input-group-text {
        tausta: # F97300;
        rajasäde: 50%;
        leveys: 5em;
        korkeus: 5em;
        täyte: 1em 23px;
        väri: #fff;
        asema: ehdoton;
        oikea: 13px;
        yläosa: 68px;
        kohdistin: osoitin;
    }
    muoto .input-group-text i {
        kirjasinkoko: 2em;
    }
    muoto .form-control {
     korkeus: 3em;
        kirjasinperhe: "Raleway";
    }
    muoto .form-control: keskity {
     laatikko-varjo: 0;
    }

    Sovelluksemme on melkein valmis, mutta meidän on lisättävä joitain ominaisuuksia. Poistamistoiminnon pitäisi antaa käyttäjien napsauttaa poistokuvaketta ja poistaa kohteen. Olisi myös hienoa, että lisäyspainikkeen napsauttamisen sijasta olisi mahdollisuus kirjoittaa uusi esine palautusnäppäimellä.

    Kohteiden poistaminen

    Poistamistoiminnon lisäämiseksi käytämme ”silmukointi” -tapamenetelmää ja a-silmukkaa. Siirrämme läpi ”todoarray” ja poimimme kohteen, jonka haluamme poistaa.

    Lisää (napsauta) tapahtuma poistaaksesi kuvakkeen ja anna sille ”todo” parametrina:

  • {{todo}} poistaa
  • App.component.ts:

    / * poista kohde * /
      DeleteItem () {
       console.log ("poista kohde")
      }

    Kun napsautat Poista, tämän pitäisi näkyä konsolissa:

    Nyt meidän täytyy käydä läpi ”todoArray” ja yhdistää napsauttamamme esine.

    App.component.ts:

    / * poista kohde * /
      DeleteItem (todo) {
       varten (olkoon i = 0; i <= tämä.todoArray.pituus; i ++) {
        if (todo == this.todoArray [i]) {
         this.todoArray.splice (i, 1)
        }
       }
      }

    Lopputulos:

    Mahtavaa !!

    Entering lisätäksesi kohteita

    Voimme lisätä lähetystapahtuman lomakkeeseen:

    (NgSubmit) = "TodoSubmit ()"

    Meidän on lisättävä muuttuja “#todoForm” lomakkeeseen ja annettava sille arvo “ngForm”. Tässä tapauksessa meillä on vain yksi kenttä, joten saamme vain yhden arvon. Jos meillä on useita kenttiä, lähetä tapahtuma palauttaa lomakkeen kaikkien kenttien arvot.

    app.component.html

     

    sivustossa app.component.ts

    // Lähetä lomake
      todoSubmit (arvo: mikä tahansa) {
     console.log (arvo)
      }

    Tarkista konsoli. Se palauttaa arvo-objektin:

    Joten nyt meidän on siirrettävä palautettu arvo "todoArray":

    // Lähetä lomake
      todoSubmit (arvo: mikä tahansa) {
         if (value! == "") {
        this.todoArray.push (value.todo)
         //this.todoForm.reset ()
        } Else {
          hälytys ('Kenttä vaaditaan **')
        }
        
      }

    Tässä olemme . Arvo lisätään ilman, että sinun täytyy napsauttaa Lisää-painiketta, napsauttamalla vain Enter:

    Yksi asia vielä. Voit palauttaa lomakkeen lähettämisen jälkeen lähettämällä tapahtuman lähettämällä sisäänrakennetun resetForm () -menetelmän.

     

    Lomake nollataan jokaisen lähettämisen jälkeen nyt:

    Animaatioiden lisääminen

    Haluan lisätä vähän ripauksia animaatioita. Lisää animaatio tuomalla animaatiokomponentit app.component.ts:

    Tuo {komponentti, liipaisin, animoi, tyyli, siirtymä, avainruudut} kohdasta '@ kulma / ydin';

    Lisää sitten animaatio-omaisuus “@component” -dekoraattoriin:

    @Component ({
      valitsin: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css'],
      animaatiot: [
       liipaisin ( "moveInLeft", [
          siirtymä ("void => *", [tyyli ({muunnos: "translateX (300px)"}),
            animoida (200, keyframes ([
             tyyli ({muunnos: "translateX (300 kuvapistettä)"}),
             tyyli ({muunnos: "translateX (0)"})
     
              ]))]),
    siirtyminen ( "* => void", [tyyli ({muunnos: "translateX (0px)"}),
            animoida (100, keyframes ([
             tyyli ({muunnos: "translateX (0px)"}),
             tyyli ({muunnos: "translateX (300 kuvapistettä)"})
     
              ]))])
         
        ])
    ]
    })

    Nyt kohteilla on mukava vaikutus, kun ne syötetään ja poistetaan.

    Kaikki koodi

    app.component.ts

    Tuo {komponentti, liipaisin, animoi, tyyli, siirtymä, avainruudut} kohdasta '@ kulma / ydin';
    @Component ({
      valitsin: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css'],
      animaatiot: [
       liipaisin ( "moveInLeft", [
          siirtymä ("void => *", [tyyli ({muunnos: "translateX (300px)"}),
            animoida (200, keyframes ([
             tyyli ({muunnos: "translateX (300 kuvapistettä)"}),
             tyyli ({muunnos: "translateX (0)"})
     
              ]))]),
    siirtyminen ( "* => void", [tyyli ({muunnos: "translateX (0px)"}),
            animoida (100, keyframes ([
             tyyli ({muunnos: "translateX (0px)"}),
             tyyli ({muunnos: "translateX (300 kuvapistettä)"})
     
              ]))])
         
        ])
    ]
    })
    viedä luokka AppComponent {
      todoArray = [];
      tehdä;
      // todoForm: uusi FormGroup ()
    addTodo (arvo) {
        if (value! == "") {
         this.todoArray.push (arvo)
        //console.log(this.todos)
      } Else {
        hälytys ('Kenttä vaaditaan **')
      }
        
      }
    / * poista kohde * /
      DeleteItem (todo) {
       varten (olkoon i = 0; i <= tämä.todoArray.pituus; i ++) {
        if (todo == this.todoArray [i]) {
         this.todoArray.splice (i, 1)
        }
       }
      }
    // Lähetä lomake
      todoSubmit (arvo: mikä tahansa) {
         if (value! == "") {
        this.todoArray.push (value.todo)
         //this.todoForm.reset ()
        } Else {
          hälytys ('Kenttä vaaditaan **')
        }
        
      }
     
    }

    app.component.html

        
      

    Todo-sovellus

       
                      lisää          
      
         
    • {{todo}} poistaa
    •       

    app.component.css

    / * Google-fontit * /
    @import-URL ('https://fonts.googleapis.com/css?family=Raleway');
    body {
     täyte: 0;
     marginaali: 0;
    }
    muodossa {
     max-leveys: 30em;
     marginaali: 4em auto;
     asema: suhteellinen;
        tausta: # f4f4f4;
        täyte: 2em 3em;
        ylivuoto piilotettu;
    }
    muoto h1 {
        kirjasinperhe: "Raleway";
        color: # F97300;
    }
    lomakkeen syöttö [type = text] :: paikkamerkki {
       kirjasinperhe: "Raleway";
       color: # 666;
    }
    muoto .data {
        reunan yläosa: 1em;
    }
    muoto .data li {
     tausta: #fff;
     reuna-vasen: 4xx kiinteä # F97300;
     täyte: 1em;
     marginaali: 1em auto;
     väri: # 666;
     kirjasinperhe: "Raleway";
    }
    muoto .data li i {
        kellua: oikea;
        väri: # 888;
        kohdistin: osoitin;
    }
    muoto .input-group-text {
        tausta: # F97300;
        rajasäde: 50%;
        leveys: 5em;
        korkeus: 5em;
        täyte: 1em 23px;
        väri: #fff;
        asema: ehdoton;
        oikea: 13px;
        yläosa: 68px;
        kohdistin: osoitin;
    }
    muoto .input-group-text i {
        kirjasinkoko: 2em;
    }
    muoto .form-control {
     korkeus: 3em;
        kirjasinperhe: "Raleway";
    }
    muoto .form-control: keskity {
     laatikko-varjo: 0;
    }

    Olemme valmis . Löydät tiedostot ja koodin Githubista.

    Katso esittely

    johtopäätös

    Kulma on helpompaa kuin luulet. Angular on yksi parhaista JavaScript-kirjastoista, ja sillä on suuri tuki ja mukava yhteisö. Siinä on myös työkaluja, jotka tekevät työskentelystä kulmallisen kanssa nopeaa ja helppoa, kuten Angular-cli.

    Tilaa tämä postituslista saadaksesi lisätietoja Angularista.

    Tässä on muutamia parhaimmista verkkokursseista, joilla voit oppia Angular-ilmaiseksi:

    Kulma 1.x

    • Muotoilu kulmikkaalla
    • Opi kulma

    Kulma 2.x (suositus)

    • oppia Angular2 (kurssi)
    • YouTube-soittolista