Angular je razvojna platforma in okvir TypeScript, ki se uporablja za ustvarjanje enostranskih aplikacij.

Angular ima zapleteno zgodovino. Razvijalci so uporabili JavaScript za izdelavo prve različice tega okvira (AngularJS). Angulardeveloperji so kasneje uporabili TypeScript za gradnjo vseh zaporednih različic Angulara (zaradi števila napak v prvi različici).

Od leta 2021 je najnovejša različica Angular 12.0. V tem članku boste izvedeli vse, kar morate vedeti o Angularframeworku.

Kaj je kotni?

Mnogi ljudje opisujejo Angularas kot okvir, in čeprav ta definicija ni napačna, Angular ni le okvir. Angular je tudi razvojna platforma. To pomeni, da ima sistem strojne in programske opreme, ki izvaja aplikacije Angular.

Čeprav je zgrajen na TypeScript, lahko večino kode platforme napišete v JavaScriptu. Kot večina ogrodij, Angular temelji na komponentah. To pomeni, da se vsak del uporabniškega vmesnika Angular obravnava kot neodvisna entiteta, kar vodi v ustvarjanje kode za večkratno uporabo in razširljivih aplikacij.

Če želite uporabljati Angular, morate poznati HTML, CSS in JavaScript (poznavanje TypeScript je prednost, ni pa pogoj). Angularis pogosto primerjajo z VueJS in ReactJS, ena od glavnih pritožb pa je, da ima Angular bolj strmo krivuljo učenja.

Povezano: Kaj je ReactJS in za kaj se lahko uporablja?

To ni presenetljivo, saj ima Angular (kot razvojna platforma) večje število jedrnih struktur, s katerimi se lahko seznanite. Te strukture vključujejo:

• Moduli
• Komponente
• Predloge

In razumevanje teh osnovnih funkcij bo zagotovilo, da ste na dobri poti, da postanete Angular razvijalec.

Raziskovanje kotnih datotek

Aplikacija Angular ustvari veliko datotek v vaši novi mapi projekta (kot lahko vidite na spodnji sliki). Oglejte si Angularovo uradno spletno mesto za navodila, kako namestiti Angular na vaš računalnik.

Ena izmed pomembnejših datotek v glavni mapi projekta je package.json mapa. Ta datoteka vam pove ime vašega projekta, kako začeti projekt (ng služijo), kako zgraditi svoj projekt (ng graditi) in kako preizkusiti svoj projekt (ng test) med drugim.

Vaša glavna mapa projekta vsebuje tudi dve mapi –node_modules in src. The src mapa je kraj, kjer boste izvajali ves svoj razvoj; vsebuje več datotek in map.

Mapa src

The styles.css datoteko, kamor boste vnesli vse svoje globalne nastavitve stila in index.html datoteka je ena stran, ki se upodablja v vašem brskalniku.

Raziskovanje datoteke index.html

Edina stvar, ki bi jo želeli spremeniti v index.html zgornja datoteka je naslov aplikacije. The v telesu datoteke HTML nad povezavami do app.component.ts datoteko, ki se nahaja v mapi aplikacije (kot lahko vidite na spodnji sliki).

Raziskovanje datoteke app.component.ts

uvozi {Component } iz '@angular/core';
@Component({
izbirnik: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
izvozni razred AppComponent {
naslov = 'moja aplikacija';
}

The app.component.ts datoteka uporablja koren aplikacije izbirnika, ki se nahaja v index.html datoteko zgoraj. Uporablja app.component.html datoteko kot predlogo in app.component.css datoteka za slog.

The app.component.css je datoteka prazna, ko je ustvarjena, ker so vse nastavitve sloga, skupaj s postavitvijo HTML, znotraj app.component.html mapa.

Zagon aplikacije Angular z ng služi --odprto ukaz bo v vašem brskalniku prikazal naslednje:

Če želite spremeniti, kaj se prikaže v vašem brskalniku, boste morali urediti app.component.html mapa.

Zamenjava vsebine te datoteke z naslednjo kodo:

Pozdravljen, svet

V vašem brskalniku bo ustvaril naslednji izhod:

Razumevanje kotnih modulov

Vsak Kotna Aplikacija je zgrajena na sistemu temeljnih modulov, znanem kot NgModuli. Vsaka aplikacija vsebuje vsaj eno NgModule. Kotna generira dva modula iz ng nov ukaz (app-routing.module.ts in app.module.ts).

The app.module.ts vsebuje korenski modul, ki mora biti prisoten, da se aplikacija lahko zažene.

Raziskovanje datoteke app.module.ts

uvozi { NgModule } iz '@angular/core';
uvozi { BrowserModule } iz '@angular/platform-browser';
uvozi { AppRoutingModule } iz './app-routing.module';
uvozi { AppComponent } iz './app.component';
@NgModule({
izjave: [
AppComponent
],
uvoz: [
modul brskalnika,
AppRoutingModule
],
ponudniki: [],
bootstrap: [AppComponent]
})
izvozni razred AppModule { }

Zgornja datoteka uporablja JavaScript uvoz izjavo za uvoz NgModule, BrowserModule, AppComponent, in AppRoutingModule (ki je drugi NgModule v projektu).

The @NgModule dekorater pride po uvozu. Kaže, da je app.module.ts datoteka je res a NgModule. The @NgModule dekorator nato konfigurira več nizov: the izjave, uvoz, ponudniki, in bootstrap.

The izjave array shranjuje komponente, direktive in cevi, ki pripadajo določenemu NgModule. Vendar pa v primeru korenskega modula samo AppComponent je shranjena v izjavo array (kot lahko vidite v zgornji kodi).

The uvoz array uvozi drugo NgModuli ki jih uporabljate v aplikaciji. The uvoz matrika v zgornji kodi uvozi BrowserModule (kar mu omogoča uporabo storitev, specifičnih za brskalnik, kot je upodabljanje DOM) in AppRoutingModule (kar aplikaciji omogoča uporabo Kotna usmerjevalnik).

Povezano: Skriti junak spletnih mest: razumevanje DOM-a

The ponudniki array mora vsebovati storitve, ki so komponente v drugem NgModuli lahko uporabi.

The bootstrap array je zelo pomemben, ker vsebuje vhodno komponento, ki jo Angular ustvari in vstavi v index.html datoteko v glavni mapi projekta. Vsaka aplikacija Angular se zažene iz bootstrap niz v korenu NgModule od zagon the NgModule (ki vključuje postopek, ki vstavi vsako komponento v bootstrap niz v DOM brskalnika).

Razumevanje kotnih komponent

Vsaka komponenta Angular je ustvarjena s štirimi določenimi datotekami. Če pogledate zgornjo sliko mape aplikacije, boste videli naslednje datoteke:

• app.component.css (datoteka CSS)
• app.component.html (datoteka predloge)
• app.component.spec.ts (datoteka s specifikacijo testiranja)
• app.component.ts (komponentna datoteka)

Vse zgornje datoteke so povezane z isto komponento. Če uporabljate ng ustvariti ukaz za ustvarjanje nove komponente, bodo ustvarjene štiri podobne datoteke kot zgoraj. The app.component.ts datoteka vsebuje korenska komponenta, ki povezuje različne vidike komponente (kot sta predloga in slog).

Raziskovanje datoteke app.component.ts

uvozi {Component } iz '@angular/core';
@Component({
izbirnik: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
izvozni razred AppComponent {
naslov = 'moja aplikacija';
}

The app.component.ts uporablja stavek za uvoz JavaScript za uvoz "komponente" iz jedra Angular. Potem pa @Komponenta dekorater identificira razred kot komponento. The @Komponenta dekorator vsebuje predmet, sestavljen iz a izbirnik, a templateUrl, in a styleUrls niz.

The izbirnik pove Kotna da vstavite primerek komponente aplikacije v katero koli predlogo HTML, ki ima oznako, ki ustreza izbirnik (torej oznaka). In če pogledate nazaj na kodo v index.html datoteko zgoraj boste našli oznaka.

Glavna datoteka komponente aplikacije se povezuje tudi z datoteko predloge z uporabo templateUrl lastnine. To je app.component.html datoteko, ki opisuje, kako naj bo določena komponenta upodobljena v aplikaciji Angular.

Končna lastnost v objektu je styleUrls. Ta lastnost se sklicuje na niz slogovnih listov, kar pomeni, da lahko uporabite več slogovnih listov eno komponento (tako da lahko dodate globalno slogovno tabelo v mapi src v matriko styleUrls kot no).

Razumevanje kotnih predlog

The app.component.html je primer kotne predloge. Ta datoteka je datoteka HTML in datoteka komponente (komponenta aplikacije). Zato mora vsaka komponenta imeti predlogo HTML, preprosto zato, ker opisuje, kako se komponenta upodablja v DOM.

Kaj je naslednje?

Razumevanje DOM-a je vaša naslednja najboljša poteza. Prevzem platforme in okvira Angular je nedvomno izziv. Vendar pa je možno in glede na to, da Angular svoje komponente upodablja v DOM, je učenje o DOM-u – ko poskušate obvladati Angular – še ena odlična poteza.

Skriti junak spletnih mest: razumevanje DOM-a

Učite se spletnega oblikovanja in želite izvedeti več o objektnem modelu dokumenta? Tukaj je tisto, kar morate vedeti o DOM.

Preberite Naprej

O avtorju