Siit saate teada, kuidas oma esimest nurgarakendust 20 minutiga luua

Foto autor Kelly Sikkema saidil Unsplash

Nurk on JavaScripti raamistik, mille lõin minu Misko Hevery ja mida haldab Google. See on MVC (Model View Vontroller). Selle kohta lisateabe saamiseks võite külastada ametlikku lehte.

Praegu on Angulari uusim versioon 5.2.10. On olemas esimene põlvkond 1.x ja teine ​​põlvkond 2.x ning kaks põlvkonda on oma struktuuris ja meetodites täiesti erinevad. Ärge muretsege, kui tunnete end selle versiooni pärast segaduses, sest selles artiklis kasutame teise põlvkonna 2.x

Sisukord

  • Üksuse lisamine (saate teada, kuidas vormi nurgas esitada)
  • Üksuse eemaldamine (lugege, kuidas sündmust nurga alt lisada)
  • Nurga animatsioon (saate teada, kuidas komponente animeerida)

Eeltingimused:

  • Node.js

Kontrollige, kas node.js on teie arvutisse installitud. Lisateave installimise kohta.

  • npm

npm (sõlmede paketihaldur) installitakse koos Node.js-ga

Kontrollige node.js versiooni:

sõlm -v

npm:

npm -v

Nurga-CLI

Teil peaks olema Angular-CLI uusim versioon. Siit leiate lisateavet nurga CLI kohta ja leiate installimisjuhised.

Paigaldage nurk-kl:

npm install -g @ nurk / cli

Ja lõpuks peaks teil olema:

  • Põhiteadmised JavaScripti kohta
  • HTML ja CSS põhialused

Teil ei pea olema teadmisi Nurga kohta.

Nüüd, kui meil on nurgarakenduse käitamiseks keskkond, alustame!

Meie esimese rakenduse loomine

Oma komponentide loomiseks ja genereerimiseks kasutame nurk-cli. See loob teenuseid, ruuterit, komponente ja direktiive.

Uue nurkprojekti loomiseks rakendusega Angular-cli lihtsalt käivitage:

uus minu rakendus

Projekt genereeritakse automaatselt. Loome meie ülesanderakenduse!

uus rakendusrakendus

Seejärel avage failid oma tekstiredaktoris. Ma kasutan Sublime teksti, kuid saate valida ükskõik millise redigeerija.

Rakenduse struktuur näeb välja järgmine:

Ärge muretsege, kui olete failidest segaduses. Kõik meie tööd asuvad rakenduste kaustas. See sisaldab viit faili:

Märkus. Nurk 2 kasutab TypeScripti, mille failid lõpevad laiendiga .ts.

Kena kasutajaliidese loomiseks kasutame Bootstrap 4 raamistikku.

Kaasa bootstrap cdn index.html:

Kõik on hästi !

Teeme nüüd HTML-i struktureerimise. Lihtsa vormi loomiseks kasutame Bootstrap-i klasse.

app.component.html:

    
  

Todo rakendus

   
             Lisa    
  
 

Rakenduses app.component.css:

keha {
 polster: 0;
 veeris: 0;
}
vorm {
 max laius: 25em;
 veeris: 1em auto;
}

Sisendväärtuse jäädvustamiseks nurgas 2 saame kasutada direktiivi ngModel. Muutuja saab sisestada sisendielemendi atribuudina.

Muutuja atribuudina loomiseks kasutage nuppu #, millele järgneb muutuja nimi.

// saada muutuja väärtus

{{myVariable.value}}

Nüüd hankige muutuja väärtus „todo“:

{{todo.value}}

Kõik on hästi !

Nüüd peame salvestama sisendist saadud väärtuse. Saame luua tühja massiivi saidil app.component.ts klassi AppComponent sees:

ekspordiklass AppComponent {
  todoArray = []
 
}

Seejärel peame oma nupule lisama klõpsuürituse, mis surub salvestatud väärtuse “todoArray”.

app.component.html:

 Lisa 

Rakenduses app.component.ts:

ekspordiklass AppComponent {
 todoArray = []
addTodo (väärtus) {
    this.todoArray.push (väärtus)
    console.log (this.todoArray)
  }
 
}
Massiivi väärtuse nägemiseks kasutage konsooli.logi (this.todoArray)

Too andmed „todoArray” alt

Nüüd peame hankima “todosArray” salvestatud andmed. Massiivi silitamiseks ja andmete eraldamiseks kasutame direktiivi * ngFor.

app.component.html:

  
       
  • {{todo}}
  •   
  

Pärast andmete toomist:

Andmed tõmmatakse nüüd automaatselt, kui klõpsame nupul Lisa.

Rakenduse stiil

Mulle meeldib kasutada Google'i fonte ja Material-ikoone, mis on tasuta kasutamiseks.

Kaasake rakenduse Google.com fondid rakendusse com.component.css:

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

Ja materjali ikoonid index.html sees:

Pärast meie rakendusele mõne stiili lisamist näeb see välja järgmine:

Materjaliikoonide kasutamine:


 lisage 
// ja kustutage ikoon loendiüksusest
 
  • {{todo}} kustutamine
  • Rakenduste app.component.css stiilide jaoks:

    / * Google'i fondid * /
    @import url ('https://fonts.googleapis.com/css?family=Raleway');
    keha {
     polster: 0;
     veeris: 0;
    }
    vorm {
     max laius: 30em;
     veeris: 4em auto;
     positsioon: sugulane;
     taust: # f4f4f4;
     polster: 2em 3em;
    }
    vorm h1 {
        fondiperekond: "Raleway";
        värv: # F97300;
    }
    vormi sisend [tüüp = tekst] :: kohahoidja {
       fondiperekond: "Raleway";
       värv: # 666;
    }
    vorm .data {
        veerise ülaosa: 1em;
    }
    vorm .data li {
     taust: #fff;
     äär vasak-vasak: 4xx tahke # F97300;
     polster: 1em;
     veeris: 1em auto;
     värv: # 666;
     fondiperekond: "Raleway";
    }
    vorm .data li i {
        ujuk: paremal;
        värv: # 888;
        kursor: osuti;
    }
    vorm .input-group-text {
        taust: # F97300;
        piiri raadius: 50%;
        laius: 5em;
        kõrgus: 5em;
        polster: 1em 23 px;
        värv: #fff;
        positsioon: absoluutne;
        paremal: 13 pikslit;
        ülaosa: 68 pikslit;
        kursor: osuti;
    }
    vorm .input-group-text i {
        kirjasuurus: 2em;
    }
    vorm .form-control {
     kõrgus: 3em;
        fondiperekond: "Raleway";
    }
    vorm .form-control: fookus {
     kasti-vari: 0;
    }

    Meie rakendus on peaaegu valmis, kuid peame lisama mõned funktsioonid. Kustutamisfunktsioon peaks kasutajatel võimaldama klõpsata kustutamisikoonil ja üksuse kustutada. Samuti oleks tore, kui lisamisnupu klõpsamise asemel oleks võimalus sisestada uus element tagastamise võtmega.

    Üksuste kustutamine

    Kustutamisfunktsiooni lisamiseks kasutame massiivi meetodit „splice“ ja silmuse jaoks a. Seisame läbi „todoarray” ja ekstraheerime üksuse, mida tahame kustutada.

    Ikooni kustutamiseks lisage (klõpsake) sündmus ja määrake parameetriks „todo”:

  • {{todo}} kustutada
  • Rakenduses app.component.ts:

    / * kustuta üksus * /
      deleteItem () {
       console.log ("kustuta üksus")
      }

    Kustutamisel klõpsamisel peaks see ilmuma konsoolis:

    Nüüd tuleb meil läbi lüüa “todoArray” ja klõpsatud üksus kokku liimida.

    Rakenduses app.component.ts:

    / * kustuta üksus * /
      deleteItem (ülesanne) {
       jaoks (las i = 0; i <= see.todoArray.pikkus; i ++) {
        if (todo == this.todoArray [i]) {
         see.todoArray.splice (i, 1)
        }
       }
      }

    Tulemus:

    Vinge !!

    Sisestamine üksuste lisamiseks

    Saame vormile lisada esitusürituse:

    (ngSubmit) = "TodoSubmit ()"

    Peame vormile lisama muutuja “#todoForm” ja andma sellele väärtuse “ngForm”. Sel juhul on meil lihtsalt üks väli, nii et saame lihtsalt ühe väärtuse. Kui meil on mitu välja, tagastab edastatav sündmus vormi kõigi väljade väärtused.

    app.component.html

     

    saidil app.component.ts

    // esita vorm
      todoSubmit (väärtus: ükskõik) {
     console.log (väärtus)
      }

    Kontrollige konsooli. See tagastab väärtuste objekti:

    Nüüd peame tagastatud väärtuse tõstma väärtusele “todoArray”:

    // esita vorm
      todoSubmit (väärtus: ükskõik) {
         if (väärtus! == "") {
        this.todoArray.push (value.todo)
         //this.todoForm.reset ()
        } veel {
          märguanne ('väli on kohustuslik **')
        }
        
      }

    Siin me oleme . Väärtus sisestatakse ilma, et oleks vaja klõpsata lisamisnuppu, klõpsates lihtsalt sisestusklahvi:

    Üks asi veel. Vormi lähtestamiseks pärast esitamist lisage sündmuse esitamiseks sisseehitatud meetod „resetForm ()”.

     

    Vorm lähtestatakse pärast iga esitamist kohe:

    Animatsioonide lisamine

    Mulle meeldib lisada natuke animatsioone. Animatsiooni lisamiseks importige animatsioonide komponendid oma rakenduses com.component.ts:

    import {komponent, päästik, animeerimine, stiil, üleminek, võtmekaadrid} kaustast @ nurk / südamik;

    Seejärel lisage animatsioonide atribuut dekoraatori „@component” alla:

    @Komponent ({
      valija: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css'],
      animatsioonid: [
       päästik ("moveInLeft", [
          üleminek ("void => *", [stiil ({teisend: "translateX (300 pikslit)"}),
            animeerima (200, võtmekaadrid ([
             stiil ({teisendus: "translateX (300 pikslit)"}),
             stiil ({teisend: "tõlkimaX (0)"})
     
              ]))]),
    üleminek ("* => tühine", [stiil ({teisend: "translateX (0px)"}),
            animeerima (100, võtmekaadrid ([
             stiil ({teisend: "tõlkimaX (0 pikslit)"}),
             stiil ({teisendamine: "translateX (300 pikslit)"})
     
              ]))])
         
        ])
    ]
    })

    Nüüd on üksustel sisenemisel ja kustutamisel kena efekt.

    Kogu kood

    app.component.ts

    import {komponent, päästik, animeerimine, stiil, üleminek, võtmekaadrid} kaustast @ nurk / südamik;
    @Komponent ({
      valija: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css'],
      animatsioonid: [
       päästik ("moveInLeft", [
          üleminek ("void => *", [stiil ({teisend: "translateX (300 pikslit)"}),
            animeerima (200, võtmekaadrid ([
             stiil ({teisendus: "translateX (300 pikslit)"}),
             stiil ({teisend: "tõlkimaX (0)"})
     
              ]))]),
    üleminek ("* => tühine", [stiil ({teisend: "translateX (0px)"}),
            animeerima (100, võtmekaadrid ([
             stiil ({teisend: "tõlkimaX (0 pikslit)"}),
             stiil ({teisendamine: "translateX (300 pikslit)"})
     
              ]))])
         
        ])
    ]
    })
    ekspordiklass AppComponent {
      todoArray = [];
      tegema;
      // todoForm: uus FormGroup ()
    addTodo (väärtus) {
        if (väärtus! == "") {
         this.todoArray.push (väärtus)
        //console.log(this.todos)
      } veel {
        märguanne ('väli on kohustuslik **')
      }
        
      }
    / * kustuta üksus * /
      deleteItem (ülesanne) {
       jaoks (las i = 0; i <= see.todoArray.pikkus; i ++) {
        if (todo == this.todoArray [i]) {
         see.todoArray.splice (i, 1)
        }
       }
      }
    // esita vorm
      todoSubmit (väärtus: ükskõik) {
         if (väärtus! == "") {
        this.todoArray.push (value.todo)
         //this.todoForm.reset ()
        } veel {
          alarm ('väli on kohustuslik **')
        }
        
      }
     
    }

    app.component.html

        
      

    Todo rakendus

       
                      lisage    
      
      
      
         
    • {{todo}} kustuta
    •   
     
     

    app.component.css

    / * Google'i fondid * /
    @import url ('https://fonts.googleapis.com/css?family=Raleway');
    keha {
     polster: 0;
     veeris: 0;
    }
    vorm {
     max laius: 30em;
     veeris: 4em auto;
     positsioon: sugulane;
        taust: # f4f4f4;
        polster: 2em 3em;
        ülevool: varjatud;
    }
    vorm h1 {
        fondiperekond: "Raleway";
        värv: # F97300;
    }
    vormi sisend [tüüp = tekst] :: kohahoidja {
       fondiperekond: "Raleway";
       värv: # 666;
    }
    vorm .data {
        veerise ülaosa: 1em;
    }
    vorm .data li {
     taust: #fff;
     äär vasak-vasak: 4xx tahke # F97300;
     polster: 1em;
     veeris: 1em auto;
     värv: # 666;
     fondiperekond: "Raleway";
    }
    vorm .data li i {
        ujuk: paremal;
        värv: # 888;
        kursor: osuti;
    }
    vorm .input-group-text {
        taust: # F97300;
        piiri raadius: 50%;
        laius: 5em;
        kõrgus: 5em;
        polster: 1em 23 px;
        värv: #fff;
        positsioon: absoluutne;
        paremal: 13 pikslit;
        ülaosa: 68 pikslit;
        kursor: osuti;
    }
    vorm .input-group-text i {
        kirjasuurus: 2em;
    }
    vorm .form-control {
     kõrgus: 3em;
        fondiperekond: "Raleway";
    }
    vorm .form-control: fookus {
     kasti-vari: 0;
    }

    Oleme valmis . Failid ja koodi leiate Githubist.

    Vaadake demo

    Järeldus

    Nurga all on lihtsam kui arvate. Angular on üks parimatest JavaScripti teekidest ning sellel on suur tugi ja tore kogukond. Sellel on ka tööriistu, mis muudavad töötamise nurgaga kiireks ja lihtsaks, nagu näiteks Angular-cli.

    Liituge selle meililistiga, et saada lisateavet nurga kohta.

    Siin on mõned parimad veebikursused, mille abil saate nurga all tasuta õppida:

    Nurk 1.x

    • Vormi nurga all
    • Õppige nurga alt

    Nurk 2.x (soovitatav)

    • õppida nurga2 (kursuse)
    • YouTube'i esitusloend