Angular yra „TypeScript“ kūrimo platforma ir sistema, naudojama kuriant vieno puslapio programas.

Angular turi sudėtingą istoriją. Kūrėjai naudojo JavaScript, kad sukurtų pirmąją šios sistemos versiją (AngularJS). Vėliau „Angulardevelopers“ naudojo „TypeScript“, kad sukurtų visas nuoseklias „Angular“ versijas (dėl daugybės klaidų pirmojoje versijoje).

Nuo 2021 m. naujausia „Angular“ versija yra 12.0. Šiame straipsnyje sužinosite viską, ką reikia žinoti apie Angularframework.

Kas yra Kampinis?

Daugelis žmonių apibūdina „Angularas“ kaip karkasą, ir nors šis apibrėžimas nėra neteisingas, „Angular“ nėra tik karkasas. Angular taip pat yra plėtros platforma. Tai reiškia, kad jame yra aparatinės ir programinės įrangos sistema, kuri paleidžia Angular programas.

Nors jis sukurtas naudojant „TypeScript“, daugumą platformos kodo galite parašyti „JavaScript“. Kaip ir dauguma karkasų, Angular yra pagrįstas komponentais. Tai reiškia, kad kiekviena kampinės vartotojo sąsajos dalis yra traktuojama kaip nepriklausomas subjektas, dėl kurio sukuriamas pakartotinai naudojamas kodas ir keičiamos programos.

Norėdami naudoti „Angular“, turite būti susipažinę su HTML, CSS ir „JavaScript“ (žinant, kad „TypeScript“ yra turtas, bet ne reikalavimas). „Angularis“ dažnai lyginamas su „VueJS“ ir „ReactJS“, o vienas iš pagrindinių nusiskundimų yra tai, kad „Angular“ mokymosi kreivė yra statesnė.

Susijęs: Kas yra ReactJS ir kam jis gali būti naudojamas?

Tai nenuostabu, nes „Angular“ (būdama kūrimo platforma) turi daugiau pagrindinių struktūrų, su kuriomis galite susipažinti. Šios struktūros apima:

• Moduliai
• Komponentai
• Šablonai

Suprasdami šias pagrindines funkcijas, būsite tikri, kad esate „Angular“ kūrėju.

Kampinių failų tyrinėjimas

„Angular“ programa sukuria daug failų naujame projekto aplanke (kaip matote paveikslėlyje žemiau). Oficialioje „Angular“ svetainėje rasite instrukcijų, kaip įdiegti „Angular“ savo kompiuteryje.

Vienas iš svarbiausių failų pagrindiniame projekto aplanke yra package.json failą. Šiame faile nurodomas jūsų projekto pavadinimas, kaip pradėti projektą (ng tarnauti), kaip sukurti savo projektą (statyti) ir kaip išbandyti savo projektą (ng testą) be kita ko.

Jūsų pagrindiniame projekto aplanke taip pat yra du aplankai –mazgų_moduliai ir src. The src aplankas yra vieta, kur atliksite visą savo tobulinimą; jame yra keli failai ir aplankai.

src aplankas

The stiliai.css failas yra vieta, kur patalpinsite visas savo visuotines stiliaus nuostatas ir index.html failas yra vienas puslapis, kuris pateikiamas jūsų naršyklėje.

Index.html failo tyrinėjimas

Vienintelis dalykas, kurį norėtumėte pakeisti index.html aukščiau esantis failas yra programos pavadinimas. The žymą HTML failo turinyje, esančiame aukščiau nuorodų į app.component.ts failą, kuris yra programos aplanke (kaip matote paveikslėlyje žemiau).

Failo app.component.ts tyrinėjimas

importuoti {Component } iš '@angular/core';
@Komponentas({
parinkiklis: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
eksportuoti klasę AppComponent {
pavadinimas = 'mano programa';
}

The app.component.ts failas naudoja app-root parinkiklis, esantis index.html failą aukščiau. Jis naudoja app.component.html failą kaip šabloną ir app.component.css stiliaus failas.

The app.component.css sugeneruotas failas yra tuščias, nes visos stiliaus nuostatos kartu su HTML išdėstymu yra app.component.html failą.

Paleiskite programą Angular su ng tarnauti – atidaryta komanda naršyklėje parodys:

Norėdami pakeisti tai, kas rodoma jūsų naršyklėje, turėsite redaguoti app.component.html failą.

Šio failo turinio pakeitimas šiuo kodu:

Labas pasauli

Jūsų naršyklėje bus pateikta tokia išvestis:

Supratimas apie kampinius modulius

kas Kampinis programa yra sukurta remiantis pagrindine modulių sistema, žinoma kaip NgModuliai. Kiekvienoje programoje yra bent viena NgModule. Kampinis generuoja du modulius iš naujas komanda (app-routing.module.ts ir app.module.ts).

The app.module.ts faile yra šakninis modulis, kuris turi būti, kad programa veiktų.

Failo app.module.ts tyrinėjimas

importuoti { NgModule } iš '@angular/core';
importuoti { BrowserModule } iš '@angular/platform-browser';
importuoti { AppRoutingModule } iš './app-routing.module';
importuoti { AppComponent } iš './app.component';
@NgModule({
deklaracijos: [
AppComponent
],
importas: [
Naršyklės modulis,
AppRoutingModule
],
teikėjai: [],
bootstrap: [AppComponent]
})
eksportuoti klasę AppModule { }

Aukščiau pateiktame faile naudojama „JavaScript“. importuoti pareiškimas importuoti NgModule, Naršyklės modulis, AppComponent, ir AppRoutingModule (kuris yra antrasis NgModule projekte).

The @NgModule dekoratorius ateina po importo. Tai rodo, kad app.module.ts failas tikrai yra a NgModule. The @NgModule Tada dekoratorius sukonfigūruoja keletą masyvų: deklaracijas, importas, teikėjai, ir bootstrap.

The deklaracijas masyvas saugo komponentus, direktyvas ir vamzdžius, kurie priklauso konkrečiam NgModule. Tačiau šakninio modulio atveju tik AppComponent yra saugomas deklaracija masyvas (kaip matote aukščiau esančiame kode).

The importas masyvas importuoja kitą NgModuliai kurį naudojate programoje. The importas masyvas aukščiau pateiktame kode importuoja Naršyklės modulis (tai leidžia naudoti konkrečioms naršyklėms skirtas paslaugas, pvz., DOM atvaizdavimą) ir AppRoutingModule (tai leidžia programai naudoti Kampinis maršrutizatorius).

Susijęs: Paslėptas svetainių herojus: DOM supratimas

The teikėjai masyve turėtų būti paslaugų, kurios sudedamos kitose NgModuliai gali naudoti.

The bootstrap masyvas yra labai svarbus, nes jame yra įvesties komponentas, kurį Angular sukuria ir įterpia į index.html failą pagrindiniame projekto aplanke. Kiekviena Angular programa paleidžiama iš bootstrap masyvas šaknyje NgModule pateikė bootstrapping į NgModule (kuris apima procesą, kurio metu kiekvienas komponentas įterpiamas į bootstrap masyvas naršyklės DOM).

Supratimas apie kampinius komponentus

Kiekvienas kampinis komponentas generuojamas naudojant keturis konkrečius failus. Jei pažvelgsite į aukščiau pateiktą programos aplanko vaizdą, pamatysite šiuos failus:

• app.component.css (CSS failas)
• app.component.html (šablono failas)
• app.component.spec.ts (bandymo specifikacijos failas)
• app.component.ts (komponento failas)

Visi aukščiau pateikti failai yra susieti su tuo pačiu komponentu. Jei naudojate ng generuoti komandą, kad sukurtumėte naują komponentą, bus sugeneruoti keturi failai, panašūs į aukščiau pateiktus. The app.component.ts faile yra šakninis komponentas, kuris sujungia skirtingus komponento aspektus (pvz., šabloną ir stilių).

Failo app.component.ts tyrinėjimas

importuoti { Component } iš '@angular/core';
@Komponentas({
parinkiklis: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
eksportuoti klasę AppComponent {
pavadinimas = 'mano programa';
}

The app.component.ts failas naudoja „JavaScript“ importavimo teiginį, kad importuotų „Komponentą“ iš „Angular“ branduolio. Tada @Komponentas dekoratorius klasę identifikuoja kaip komponentą. The @Komponentas dekoratoriuje yra objektas, sudarytas iš a parinkiklis, a šablono URL, ir a stiliaus URL masyvas.

The parinkiklis pasakoja Kampinis Norėdami įterpti programos komponento egzempliorių į bet kurį HTML šabloną, kuriame yra žyma, atitinkanti parinkiklis (Taigi žyma). Ir jei pažvelgsite atgal į kodą index.html aukščiau esantį failą rasite žyma.

Pagrindinis programos komponento failas taip pat susieja su šablono failu, naudojant šablono URL nuosavybė. Tai yra app.component.html failą, kuriame nurodoma, kaip konkretus komponentas turi būti pateiktas kampinėje programoje.

Galutinė objekto savybė yra stiliaus URL. Ši savybė nurodo daugybę stilių lapų, o tai reiškia, kad galite taikyti kelis stiliaus lapus vienas komponentas (kad galėtumėte pridėti visuotinį stiliaus lapą src aplanke prie styleUrls masyvo kaip gerai).

Kampinių šablonų supratimas

The app.component.html failas yra kampinio šablono pavyzdys. Šis failas yra HTML failas ir komponento failas (programos komponentas). Todėl kiekvienas komponentas turi turėti HTML šabloną, nes jis nusako, kaip komponentas atvaizduojamas DOM.

Kas toliau?

DOM supratimas yra kitas geriausias jūsų žingsnis. Priimti Angular platformą ir sistemą neabejotinai yra sudėtinga. Tačiau tai įmanoma, ir atsižvelgiant į tai, kad Angular pateikia savo komponentus DOM, mokymasis apie DOM – bandant įvaldyti „Angular“ – yra dar vienas puikus žingsnis.

Paslėptas svetainių herojus: DOM supratimas

Mokate interneto dizaino ir norite sužinoti daugiau apie dokumento objekto modelį? Štai ką reikia žinoti apie DOM.

Skaitykite toliau

Apie autorių