Mikä on AngularJS? Archirakenne, ominaisuudet ja edut

Mikä on AngularJS?

angularjs on avoimen lähdekoodin Model-View-Controller-kehys, joka on kirjoitettu JavaKäsikirjoitusAngularJS oli yksi 2010-luvun suosituimmista verkkokehyksistä, ja sitä käytetään kehitykseenping enimmäkseen yksisivuisia sovelluksia. Tämän kehyksen on kehittänyt ryhmä kehittäjiä Google itse.

Pelkän tuen ansiosta Google Laajan yhteisöfoorumin ideoiden ja pohjalta kehystä pidettiin ajan tasalla koko sen aktiivisen elinkaaren ajan. Se sisälsi myös tuon ajanjakson johtavat kehitystrendit, minkä vuoksi niin paljon tuotantokoodia suoritetaan sillä edelleen.

Yksi terminologiakysymys kannattaa selvittää jo varhaisessa vaiheessa. AngularJS:ää kuvataan laajalti MVC-kehyksenä, mikä on hyödyllinen lähtökohta. AngularJS-tiimi itse kuitenkin piti parempana nimitystä MVW (mallinäkymä-mikä tahansa), koska ajonaikainen toimintatapa muistuttaa lähempänä Model-View-ViewModel-mallia kuin klassista MVC:tä. Virallinen AngularJS-dokumentaatio kutsuu sitä dynaamisten verkkosovellusten rakenteelliseksi kehykseksi. Kun tämä on selvitetty, palaset sopivat yhteen näin.

angularjs Archirakenne

AngularJS noudattaa MVC-arkkitehtuuria. MVC-kehyksen kaavio on esitetty alla:

angularjs Architecture Kaavio

Jokaisella kolmella kerroksella on selkeä tehtävä:

• Ohjain edustaa kerrosta, jolla on liiketoimintalogiikka. Käyttäjätapahtumat käynnistävät ohjaimesi sisään tallennetut toiminnot. Käyttäjätapahtumat ovat osa ohjainta.
• Näkymiä käytetään esittämään loppukäyttäjille tarjottavaa esityskerrosta.
• Malleja käytetään edustamaan tietojasi. Mallinne tiedot voivat olla yhtä yksinkertaisia ​​kuin vain primitiiviset ilmoitukset. Jos esimerkiksi ylläpidät opiskelijasovellusta, tietomallissasi voi olla vain opiskelijatunnus ja nimi. Tai se voi olla myös monimutkaista, koska sillä on strukturoitu tietomalli. Jos ylläpidät auton omistushakemusta, voit määrittää rakenteita itse ajoneuvon moottoritilavuuden, istuintilavuuden jne.

Käytännössä ohjain harvoin syöttää dataa näkymään käsin. AngularJS tarkkailee mallia ja päivittää näkymän puolestasi, ja tämä automaattinen synkronointi toimii seuraavaksi kuvattujen ominaisuuksien avulla.

AngularJS:n ominaisuudet

AngularJS:llä on seuraavat keskeiset ominaisuudet, jotka tekevät siitä yhden markkinoiden tehokkaimmista kehyksistä:

1. MVC – Kehys on rakennettu kuuluisalle konseptille MVC (Model-View-Controller). Tämä on suunnittelumalli, jota käytetään kaikissa nykypäivän verkkosovelluksissa. Tämä malli perustuu liiketoimintalogiikkakerroksen, tietokerroksen ja esityskerroksen jakamiseen erillisiin osiin. Jako eri osiin tehdään siten, että jokaista olisi helpompi hallita.
2. Tietomallin sidonta – Sinun ei tarvitse kirjoittaa erityistä koodia sitoaksesi dataa HTML-kontrolleihin. AngularJS voi tehdä tämän lisäämällä muutaman koodinpätkän.
3. Kirjoittaa vähemmän koodia – Kun suoritat DOM-manipulaatiota paljon JavaKäsikirjoitus vaadittiin minkä tahansa sovelluksen suunnitteluun. Mutta AngularJS:n avulla tulet hämmästymään siitä, kuinka paljon vähemmän koodia sinun tarvitsee kirjoittaa DOM-manipulointiin.
4. yksikkö Testaus valmis – Suunnittelijat osoitteessa Google ei ainoastaan ​​kehittänyt AngularJS:ää, vaan myös kehitti testauskehyksen nimeltä "Karma", joka auttaa suunnittelemaan yksikkötestejä AngularJS-sovelluksille.
5. ohjeet – Merkkejä, kuten ng-app, ng-model ja ng-repeat Lisää käyttäytymistä tavallisiin HTML-elementteihin.

Nämä ominaisuudet on helpoin ymmärtää, kun olet suorittanut ne, joten seuraavassa osiossa rakennetaan toimiva sivu tyhjästä.

AngularJS:n asentaminen ja ensimmäisen sovelluksesi rakentaminen

Tietojen sidonnasta lukeminen on yksi asia ja sen toiminnan seuraaminen toinen. AngularJS ei tarvitse paketinhallintaa, niputtajaa eikä kääntäjää, joten ensimmäinen sovelluksesi on yksi HTML-tiedosto, joka suoritetaan suoraan kiintolevyltäsi.

Vaihe 1) Lisää AngularJS-kirjasto

Lataa kirjasto CDN:stä yhdellä komentosarjatunnisteella. Versio 1.8.3 on AngularJS:n viimeinen julkaisu, joten kiinnitä sivusi juuri tähän versioon kelluvan version sijaan.

Vaihe 2) Merkitse sovelluksen juurikansio ng-app-komennolla

ng-app-direktiivi kertoo AngularJS-kääntäjälle, minkä osan sivusta se omistaa. Sen lisääminen html-tunnisteeseen luovuttaa koko dokumentin frameworkille, ja sille antamasi arvo nimeää luotavan moduulin.

Vaihe 3) Sido tiedot ng-mallilla ja lausekkeella

ng-model-direktiivi sitoo syöteelementin laajuusfunktion ominaisuuteen, ja hakasulkeissa oleva lauseke tulostaa saman ominaisuuden muualle sivulle. Koska sidonta on kaksisuuntainen, typing laatikossa päivittää otsikon välittömästi ilman omaa tapahtumankäsittelijää.

Vaihe 4) Lisää logiikkaohjain

Ohjain on yksinkertainen JavaSkriptifunktio, joka vastaanottaa $scope-objektin ja asettaa sille alkuarvot. Rekisteröimällä sen moduuliin se on käytettävissä ng-controller-direktiiville.

<!DOCTYPE html>
<html ng-app="helloApp">
<head>
  <meta charset="UTF-8">
  <title>AngularJS Hello World</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.3/angular.min.js"></script>
</head>
<body>

  <div ng-controller="GreetController">
    <input type="text" ng-model="name" placeholder="Enter your name">
    <h3>Hello {{ name }}!</h3>
  </div>

  <script>
    // Step 1: create the module named in ng-app
    angular.module("helloApp", [])
      // Step 2: register a controller on that module
      .controller("GreetController", function ($scope) {
        $scope.name = "World";
      });
  </script>
</body>
</html>

Vaihe 5) Suorita sivu ja tarkista tulos

Tallenna tiedosto nimellä index.html ja avaa se millä tahansa selaimella. Otsikko lukee aluksi ”Hello World!”, ja se kirjoittaa itsensä uudelleen jokaisella näppäinpainalluksella. Verkkosivupalvelinta tai koontivaihetta ei tarvita.

Jos mitään ei tule näkyviin, avaa selainkonsoli ja varmista, että CDN-skripti latautui ja että ng-app-moduulin sisällä oleva moduulin nimi vastaa täsmälleen angular.module-moduulille annettua nimeä, koska epäsuhta epäonnistuu hiljaisesti. Tuo pieni sivu osoittaa jo seuraavaksi kuvatut vahvuudet.

AngularJS edut

Tässä ovat AngularJS:n edut:

• Koska kyseessä on avoimen lähdekoodin kehys, voit odottaa virheiden tai ongelmien määrän olevan minimaalinen.
• Kaksisuuntainen sidonta – AngularJS pitää data- ja esityskerroksen synkronoituna. Sinun ei tarvitse kirjoittaa lisäkomentoja. JavaSkriptikoodi HTML-koodisi ja datakerroksen datan synkronoimiseksi. AngularJS tekee tämän automaattisesti puolestasi. Sinun tarvitsee vain määrittää, mikä ohjausobjekti on sidottu mihinkin mallisi osaan.
• Reititys – AngularJS voi hoitaa reitityksen eli siirtymisen näkymästä toiseen. Tämä on yksisivuisten sovellusten keskeinen perusperiaate; voit siirtyä verkkosovelluksesi eri toimintoihin käyttäjän vuorovaikutuksen perusteella ja silti pysyä samalla sivulla.
• AngularJS tukee testausta, sekä Yksikkötestausja Integraation testaus.
• Se laajentaa HTML:ää tarjoamalla omia elementtejä, joita kutsutaan direktiiveiksi. Korkealla tasolla direktiivit ovat DOM-elementin merkkejä (kuten attribuutti, elementin nimi ja kommentti tai CSS-luokka), jotka käskevät AngularJS HTML -kääntäjää liittämään tietyn toiminnan kyseiseen DOM-elementtiin. Nämä direktiivit auttavat laajentamaan olemassa olevien HTML-elementtien toiminnallisuutta, mikä antaa enemmän tehoa verkkosovelluksellesi.

AngularJS:n edut

Tasapainoinen näkemys on aivan yhtä tärkeä, joten seuraavaksi esitetään kompromissit.

AngularJS:n haitat ja rajoitukset

Jokainen kehys luopuu jostakin, eikä AngularJS ole poikkeus. Tässä ovat AngularJS-sovelluksia ylläpitävien tiimien useimmiten raportoimat rajoitukset:

• Ei omaa turvakerrosta – AngularJS ei tarjoa todennusta eikä valtuutusta, joten molemmat on pakotettava palvelimelle.
• Täysi riippuvuus JavaKäsikirjoitus – Jos vierailija poistaa käytöstä JavaSkripti, sivu palaa pelkkään merkintään eikä renderöidy.
• Ruoansulatussyklin suorituskyky – Muutokset havaitaan vertaamalla seurattuja arvoja toistuvasti, joten sivut, joilla on useita tuhansia sidoksia, voivat tuntua hitailta.
• Jyrkkä oppimiskäyrä – Soveltamisalat, direktiivit, tehtaat, palvelut ja toimittajat menevät päällekkäin, ja saman tuloksen saavuttamiseksi on usein useita tapoja.
• Hakukoneen näkyvyys – Näkymät kootaan selaimessa, joten lisätyötä, kuten esirenderöintiä, tarvitaan ennen kuin hakurobotit indeksoivat sivuja luotettavasti.
• Ei lisäpäivityksiä – 31. joulukuuta 2021 lähtien virallisia korjauksia ei ole olemassa, joten äskettäin löydetty haavoittuvuus pysyy korjaamattomana, ellei kaupallinen toimittaja toimita korjausta.

Viimeinen kohta työntää useimpia tiimejä kohti seuraajakehystä, joka on eri tuote yhteisestä nimestä huolimatta.

AngularJS vs. Angular: Mitä eroa on?

AngularJS ja Angular sekoitetaan usein keskenään, koska niiden nimet ovat niin lähellä toisiaan, mutta ne ovat erillisiä frameworkeja, joilla on eri kielet, arkkitehtuurit ja julkaisulinjat. AngularJS viittaa vain tällä sivulla kuvattuun 1.x-sarjaan. Angular tarkoittaa versiota 2 ja kaikkia sen jälkeisiä versioita, jotka ovat vuonna 2016 julkaistu täysin uudelleenkirjoitettu versio, jota kehitetään edelleen aktiivisesti. Code ei liiku niiden välillä ilman harkittua siirtotyötä.

Käytännössä AngularJS-ohjainta ei voida noin vain pudottaa Angular-projektiin. Migraatio tarkoittaa jokaisen ohjaimen uudelleenkirjoittamista komponenttina, joten suunnittele se todellisena suunnittelutyönä päivityksen sijaan. Lyhyesti sanottuna, käsittele AngularJS:ää ylläpitotaitona ja Angularia uuden kehityksen alustana.

UKK