AngularJS Hello World: Ensimmäinen esimerkkiohjelmasi

by: James Hartman James Hartman
Hours Päivitetty

⚡ Älykäs yhteenveto

AngularJS:n Hello World -ohjelmat tarvitsevat vain yhden HTML-tiedoston, yhden skriptiviitteen ja kaksi direktiiviä, ng-app ja ng-controller, sitoakseen ohjaimen laajuusmuuttujan sivulle hakasulkeissa olevan lausekkeen avulla.

  • 🔘 ng-sovellus: ng-app-attribuutti merkitsee juurielementin ja käynnistää nimetyn AngularJS-moduulin automaattisesti.
  • ☑️ ng-ohjain: ng-controller liittää HelloWorldCtrl-komennon h1-elementtiin, jolloin ohjaimen laajuus on käytettävissä siellä.
  • ✅ Laajuussidonta: $scope.message-muuttujalle ohjaimen sisällä määrittäminen syöttää näkymässä renderöidylle {{message}}-lausekkeelle.
  • 🧪 Yksittäinen tiedosto: Yksi HTML-tiedosto ja yksi skriptiviittaus suorittavat esimerkin ilman erillisiä rakennusvaiheita.
  • 🛠️ Vianmääritys: Näytöllä näkyvät kirjaimelliset aaltosulkeet tarkoittavat lähes aina, että kirjastoa ei ole koskaan latautunut tai ng-sovellus puuttuu.
  • 📊 Versiohuomautus: AngularJS-tuki päättyi tammikuussa 2022, jolloin julkaistiin versio 1.8.3; uusi työ kuuluu Angulariin.
Lue lisää

AngularJS Hello World ensimmäinen esimerkkiohjelma ng-appilla ja ng-ohjaimella

Paras tapa nähdä AngularJS-sovelluksen teho on luoda ensimmäinen perusohjelmasi "Hello World" -sovellus AngularJS:ssä.

On olemassa monia integroituja kehitysympäristöjä, joita voit käyttää angularjs kehitystä, joitakin suosituimmista mainitaan alla. Esimerkissämme käytämme Webstorm kuin meidän IDE.

  1. Webstorm
  2. Sublime Text
  3. angularjs Eclipse
  4. Visual Studio

Hei maailma, AngularJS

Versiohuomautus: AngularJS 1.x jätti pitkäaikaisen tuen 31. joulukuuta 2021, ja framework-tiimi vahvistaa, että AngularJS-tuki päättyi virallisesti tammikuussa 2022, versiolla 1.8.3, josta ei ole tullut tietoturvapäivityksiä sen jälkeen. Jokainen alla oleva vaihe ja koodilohko säilytetään täsmälleen sellaisenaan. Uudet projektit kuuluvat moderniin Angulariin, jossa sama harjoitus alkaa ng-palvelu ja erillinen komponentti ja käyttää edelleen samaa {{ }} interpolointisyntaksi.

Alla oleva esimerkki näyttää helpoimman tavan luoda ensimmäinen "Hello world" -sovellus AngularJS:ssä.

Alla olevassa selityksin varustetussa kuvakaappauksessa on tiedoston jokainen osa merkittynä, ja sen seitsemän numeroa vastaavat Code Selitysluettelo alla. Se on tallennettu aiempaa 1.4.0-versiota vasten, joten sen komentorivi eroaa koodiin kiinnitetystä versiosta.

Annotoitu AngularJS Hello World HTML-tiedosto, jossa on seitsemän numeroitua selitettä ng-appille, ng-controllerille, komentosarjan viittaukselle ja scope-muuttujalle

<!DOCTYPE html>  
<html ng-app="app">  
<head>  
    <meta charset="utf 8">
    <title>Guru99</title>     
</head>  
<body>
<h1 ng-controller="HelloWorldCtrl">{{message}}</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script>  
    angular.module("app", []).controller("HelloWorldCtrl", function($scope) {  
    $scope.message="Hello World" 
    } )
</script> 

</body>  
</html>

Code Selitys:

  1. "ng-app”-avainsanaa käytetään osoittamaan, että tätä sovellusta tulisi pitää AngularJS-sovelluksena. Sovellukselle voidaan antaa mikä tahansa nimi.
  2. Ohjainta käytetään liiketoimintalogiikan säilyttämiseen. H1-tagissa haluamme käyttää ohjain, jolla on logiikka näyttää ”Hello World”, joten voimme sanoa, että tässä tagissa haluamme käyttää ohjainta nimeltä ”HelloWorldCtrl”.
  3. Käytämme jäsenmuuttujaa nimeltä "message", joka on vain paikkamerkki "Hello World" -viestin näyttämiseen.
  4. ”Script tag” -tunnistetta käytetään viittaamaan angular.js-skriptiin, jolla on kaikki AngularJS:n tarvitsemat toiminnot. Ilman tätä viitettä AngularJS-funktioiden käyttö ei onnistu.
  5. ”Ohjain” on se paikka, jossa itse asiassa luomme liiketoimintalogiikkamme eli ohjaimemme. Kunkin avainsanan yksityiskohdat selitetään seuraavissa luvuissa. On tärkeää huomata, että määrittelemme ohjainmetodin nimeltä 'HelloWorldCtrl', johon viitataan vaiheessa 2.
  6. Luomme "funktion", jota kutsutaan, kun koodimme kutsuu tätä ohjainta. $scope-objekti on AngularJS:n erikoisobjekti, joka on AngularJS:n sisällä käytettävä globaali objekti. $scope-objektia käytetään datan hallintaan ohjaimen ja näkymän välillä.
  7. Luomme jäsenmuuttujan nimeltä ”message”, annamme sille arvon ”Hello World” ja liitämme jäsenmuuttujan scope-objektiin.

HUOMAUTUS: ng-controller-direktiivi on avainsana, joka on määritelty kohdassa angularjs (Vaihe 2) ja sitä käytetään sovelluksesi ohjainten määrittelyyn. Tässä sovelluksessamme olemme käyttäneet ng-controller-avainsanaa 'HelloWorldCtrl'-nimisen ohjaimen määrittelyyn. Ohjaimen varsinainen logiikka luodaan (vaiheessa 5).

Jos koodi suoritetaan onnistuneesti, seuraava tulos näytetään, kun suoritat koodin selaimessa.

lähtö:

Viesti "Hello World" tulee näkyviin.

Selainikkunan otsikko Guru99 otsikon Hei maailma renderöinti AngularJS-laajuusmuuttujan perusteella

AngularJS:n lataaminen: CDN tai paikallinen tiedosto

Yllä oleva esimerkki toimii, koska yksi rivi vetää kehyksen sivulle ennen kuin selain saavuttaa rungon lopun. AngularJS toimitetaan yhtenä rivinä JavaSkriptitiedosto, joten ensimmäisen ohjelman rakentamiseen ei tarvita käännösvaihetta eikä paketinhallintaa. Selaimessa avattu tavallinen HTML-tiedosto riittää.

Tiedoston voi tuoda sisään kahdella tavalla.

  1. Viittaa CDN-kopioon. Esimerkki viittaa siihen, code.angularjs.org ja pinaa version 1.6.9. Tämä isäntä tukee edelleen 1.x-koontiversioita, joista uusin on 1.8.2, kun taas Google Isännöidyt kirjastot eivät enää listaa AngularJS:ää.
  2. Lataa paikallinen kopio. Tallenna tiedosto HTML-sivun viereen ja osoita siihen skriptitunnisteella. Paikallinen kopio pitää esimerkin toiminnassa offline-tilassa, millä on merkitystä, kun välityspalvelin estää CDN:n.
<!-- Option 1: reference a CDN copy -->
<script src="https://code.angularjs.org/1.8.2/angular.min.js"></script>

<!-- Option 2: reference a downloaded copy in the same folder -->
<script src="angular.min.js"></script>

Käyttää angular.js samalla kun opiskelet ja angular.min.js tuotannossa: minifioimaton koontiversio tulostaa luettavan pinon traces, kun taas pienennettyjen koontiraporttien muuttujat nimettiin uudelleen.

Kun tiedosto on ladattu, ng-app käynnistää kehyksen. AngularJS etsii kyseistä attribuuttia, kun dokumentti on latautunut, käsittelee sitä sisältävää elementtiä käännöksen juurena ja käynnistää sen arvossa mainitun moduulin. Tästä on kolme seurausta:

  • Vain ensimmäinen ng-app sivulla oleva syöttö käynnistetään automaattisesti. Toinen syöttö jätetään huomiotta, ellei angular.bootstrap kutsutaan manuaalisesti.
  • Arvon on oltava rekisteröity moduuli angular.modulemuuten konsoli raportoi [$injector:modulerr].
  • saattamisesta ng-app på den html elementti, kuten esimerkissä, tuo koko dokumentin AngularJS:n alle; kapeampi säilö toimii myös.

AIHEESEEN LIITTYVÄT ARTIKKELIT

Kuinka {{ }} -lausekkeet ja ng-mallin sidonta toimivat

Tuplakiinnikkeet ympärillä message h1-tunnisteessa eivät ole lataushetkellä kerran täytettäviä paikkamerkkejä. AngularJS kääntää kyseisen tekstisolmun ympäröivän laajuus, joten renderöity tuloste tracks $scope.message niin kauan kuin sivu elää.

Sykli kulkee kolmessa vaiheessa.

  1. Ohjain kirjoittaa arvon $scope.
  2. Tiivistelmän läpikäynti vertaa jokaista tarkkailtua lauseketta sen edelliseen tulokseen.
  3. Jokainen lauseke, jonka arvo muuttui, renderöidään uudelleen paikalleen.

Interpoloitu lauseke on siis yksisuuntainen oskilloskoopista näkökenttään. Tarvitaan kaksisuuntainen sidonta. ng-malli, The Direktiivi suunniteltu lomake-ohjausobjekteille. Lisää <input ng-model="message"> Kirjoita otsikon viereen ruutuun, niin otsikko muuttuu jokaisella näppäinpainalluksella, koska ng-model kirjoittaa kentän arvon takaisin samaan laajuusominaisuuteen, jota lauseke tarkkailee.

Lausekkeita on tarkoituksella rajoitettu. Ne lukevat laajuusominaisuuksia, kutsuvat laajuusmetodeja ja sietävät määrittelemättömiä arvoja hiljaa, mutta ne eivät voi deklaroida muuttujia, käyttää ohjausvuolausekkeita tai saavuttaa globaaleja objekteja, kuten window.

Tyhjän sivun tai renderöimättömän {{ }} -sivun korjaaminen

Ensimmäinen AngularJS-ohjelma epäonnistuu kahdella näkyvällä tavalla: sivu pysyy tyhjänä tai literaaliteksti {{message}} tulee näkyviin kohdassa Hello World. Molemmat tarkoittavat, että kehys ei koskaan ottanut merkintöjä käyttöön. Käy läpi alla olevat tarkistukset järjestyksessä selainkonsoli auki.

  1. Vahvista, että kirjasto on ladattu. Avaa Verkko-paneeli ja etsi kohta angular.js pyyntö. 404-virhe tai tavoittamaton CDN jättää näytöllä olevat hammasraudat koskemattomiksi.
  2. Tarkista skriptin polku. Suhteellinen polku perustuu HTML-tiedostoa sisältävään kansioon, joten kopio tiedostosta js alikansioiden tarpeet js/angular.min.js.
  3. Vahvista ng-sovellus. Puuttuva tai väärin kirjoitettu attribuutti ei tarkoita mitään bootstraps-tilanteessa. Attribuutti on yhdysmerkillä merkitty muodossa ng-app merkinnässä, vaikka direktiivi onkin kamelinkotelossa JavaSkripti.
  4. Lue konsolin virheilmoitus. [$injector:modulerr] tarkoittaa, että ng-app:n nimeämää moduulia ei ole koskaan rekisteröity. [ng:areq] tarkoittaa yleensä, että ohjaimen nimi koodissa ei vastaa kohteelle annettua nimeä. .controller().
  5. Etsi toinen ng-sovellus. Vain ensimmäinen on käynnistyskäynnistetty, joten sisäiseen elementtiin jätetty irrallinen kopio poistaa kyseisen osan sivusta käytöstä hiljaa.

Kaksi muuta syytä selittävät suurimman osan jäljellä olevista raporteista.

  • Tiedostoprotokolla. Tämä yksittäisen tiedoston esimerkki toimii hyvin, kun se avataan suoraan levyltä, mutta selaimen alkuperäsäännöt estävät kaikki XHR:n kautta noudetut mallit. Lähetä kansio HTTP:n kautta, kun mallit tulevat näkyviin.
  • Lyhyt välähdys hammasraudoista. Kun merkintä renderöidään ennen kuin kehys kääntää sen, raaka lauseke on näkyvissä hetken. ng-cloak elementtiin tai vaihda lauseke muotoon ng-bind="message", joka ei koskaan näytä omaa merkintätapaansa.

Jos mikään näistä ei sovellu, supista sivu yllä olevan esimerkin mukaiseksi ja lisää omaa koodiasi rivi kerrallaan.

UKK

Mikä tahansa neljästä yllä luetelluista toimii, ja tässä esimerkissä käytetään WebstormKoska ohjelma on yksi staattinen HTML-tiedosto, pelkkä tekstieditori riittää. IDE lisää vain direktiivien täydennyksen, reaaliaikaisen uudelleenlatauksen ja integroidun virheenkorjauksen.

$scope on sidontaobjekti, jonka jakavat ohjain ja sen näkymä. $scope.message-ominaisuuden kirjoittaminen HelloWorldCtrl-ominaisuuden sisään tekee ominaisuudesta näkyvän h1-elementtiin sijoitetulle lausekkeelle.

Molemmat tiedostot sisältävät saman kehyksen. angular.js on minifioimaton, joten virheet viittaavat luettavaan lähdekoodiin. angular.min.js on pakattu tuotantoa varten ja tarvitsee eksplisiittisen riippuvuusannotaation, koska minifiointi nimeää uudelleen parametrit, joita AngularJS muuten tarkastaa.

AngularJS on tässä esitetty 1.x-kehys, jota ohjaavat direktiivit, $scope ja plain JavaSkripti. Angular, eli versio 2 ja uudemmat, on erillinen TypeScript komponenttien varaan rakennettu kehys ja se on aktiivisesti ylläpidetty linja.

Pääasiassa olemassa olevien 1.x-sovellusten ylläpitoon, jotka ovat edelleen laajalle levinneitä. Sidonnan, direktiivien ja riippuvuuden injektio siirtoja, mutta tuki päättyi tammikuussa 2022, joten uudet projektit kuuluvat moderniin Angulariin.

Kyllä. Rekisteröi jokainen samaan moduuliin .controller()-metodilla ja liitä ne eri elementteihin ng-controller-metodilla. Jokainen saa oman alitason, joten identtisesti nimetyt ominaisuudet pysyvät itsenäisinä.

Nykyaikaiset assistentit lukevat 1.x-koodikannan ja luovat luettelon direktiiveistä, suodattimista ja palveluista sekä ehdotetuista komponenttien ja palveluiden vastineista. Tämä luettelo on hyödyllinen sco:lle.ping työ, vaikka jokainen karttaping vaatii vielä manuaalisen vahvistuksen.

GitHub Copilot viimeistelee ohjaimen mallipohjan, $scope-määritykset ja ng-submit käsittelijät lyhyestä kommentista, mutta sen koulutus vinoutuu modernin Angularin suuntaan, joten tarkista, että ehdotukset todella käyttävät 1.x-syntaksia.

Tiivistä tämä viesti seuraavasti: