Obsah
- 01. Vytvorte projekt
- 02. Zahrňte animácie a hranatý materiál
- 03. Predstavte komponent stránky
- 04. Vytvorte si komponent svojej stránky
Najnovšia verzia Angular sa často považuje za rámec, ktorý vychádza z podnikovej stránky a vo všeobecnosti ho baví spoločnosť podnikových aplikácií. Aj keď je pravda, že Angular sa skutočne vyvinul z rámca do platformy, ktorá podporuje najrôznejšie aplikácie, pre vývojárov existuje veľa skutočne úžasných funkcií, ktoré svojim používateľom vytvárajú pohlcujúce zážitky.
Toto je prvý diel zo série o tom, ako vytvoriť celostránkový animovaný web v Angular. Začneme vytvorením celostránkového webu a jeho animáciou v nasledujúcej časti.
V tomto výučbe sa zameriame predovšetkým na časti Angular a vzdáme sa hovorenia o častiach HTML a CSS, ktoré priamo nesúvisia s konštrukciou aplikácie. Stiahnite si zdrojový kód, aby ste mohli pokračovať. Nepredáva sa na Angular? Nájdete tu dokonalého tvorcu webových stránok (a najlepšie ceny nižšie). Váš web však budete budovať akýkoľvek, budete potrebovať slušný webhosting a cloudové úložisko.
01. Vytvorte projekt
Existuje veľa pohyblivých častí, ktoré vstupujú do netriviálnej webovej aplikácie. Aké závislosti má vaša žiadosť? Ako to spustíte lokálne? Ako to idete otestovať? Ako sa chystáte spojiť svoje aktíva
Našťastie je zložitý proces skladania týchto prvkov riešený z dohľadu v dokumente @ uhlové / cli. Len pomocou niekoľkých príkazov z nášho terminálu môžeme mať pripravenú plne funkčnú aplikáciu Angular, s ktorou môžeme pracovať.
Prvým krokom pri práci s CLI je inštalácia. Použite na to nasledujúci príkaz:
npm install -g @ angular / cli
Po nainštalovaní CLI z príkazového riadku môžeme prejsť do priečinka, do ktorého chceme náš projekt nainštalovať. Odtiaľ budeme bežať nové s názvom nášho projektu. Týmto sa vytvorí priečinok s rovnakým názvom, do ktorého prejdeme po dokončení projektu.
cd váš priečinok-projekty> nová nová stránka uhlových animácií cd uhlová animácie-stránka
A to je všetko! Naša uhlová aplikácia je pripravená na spustenie. Prihlášku môžete začať s npm štart alebo ng slúžiť. Radšej používam npm štart pretože je to konvenčnejšie a umožňuje mi to pridať ďalšie príkazy. Potom môžete prejsť na http: // localhost: 4200 aby ste videli spustenú aplikáciu.
02. Zahrňte animácie a hranatý materiál
Pretože máme radi krásne veci, urobíme niekoľko malých doplnkov k našej aplikácii pridaním a inštaláciou @ uhlové / animácie a @ hranatý / materiál balíčky:
npm i --save @ uhlové / materiál @ uhlové / animácie
Môžeme dať Angular vedieť o týchto závislostiach tým, že ich pridáme do našej app.module.ts spis. Budeme používať tlačidlo, kartu a panel nástrojov Angular Material, takže naimportujeme ich príslušné moduly aj BrowserAnimationsModule.
// app / app.module.ts ... import {MdButtonModule, MdCardModule, MdToolbarModule} z ‘@ angular / material’; importovať {BrowserAnimationsModule} z '@ angular / platform-browser / animations';
Potom ich môžeme pridať do dovoz pole s našou NgModule vyhlásenie.
// app / app.module.ts ... import {MdButtonModule, MdCardModule, MdToolbarModule} z ‘@ angular / material’; importovať {BrowserAnimationsModule} z '@ angular / platform-browser / animations'; @NgModule ({... importy: [... BrowserAnimationsModule, MdToolbarModule, MdButtonModule, MdCardModule], ...})
A na záver pridáme indigo ružovú tému do našej štýly.css spis.
/ * styles.css * / @import ‘~@angular/material/prebuilt-themes/indigo-pink.css‘;
Až do tohto okamihu sme sa úplne sústredili na nastavenie aplikácie, aby sme mohli začať vyvíjať. Tieto príkazy môžu zo začiatku pôsobiť neohrabane, ale akonáhle si na ne zvyknete, zistíte, že úplné vybudované prostredie so všetkými zvonmi a píšťalkami, ktoré potrebujeme na vytvorenie sladkej webovej stránky, trvá len pár minút.
03. Predstavte komponent stránky
Pretože tvoríme webovú stránku s Angular, budeme musieť zaviesť mechanizmus na zobrazovanie našich stránok. V Angular je atómový stavebný blok aplikácie komponentom. Vytvorením našej aplikácie na dobre zadefinovaných zapuzdrených komponentoch dokážeme zavedením nových komponentov ľahko znova použiť funkčnosť a vytvoriť novú funkcionalitu.
Rozhranie CLI sa dodáva s podporou generátora hneď po vybalení z krabice a to je to, čo používame na vytvorenie našej súčasti stránky. Našu súčasť stránky môžeme vygenerovať spustením príkazu nižšie ( g príkaz je skratka pre generovať).
ng g stránka komponentu
Poznámka: Odporúčam venovať čas tomu, aby ste sa naučili, ako zostaviť hlavné uhlové kúsky ručne, kým si nevybudujete svalovú pamäť. Optimalizovať svoj pracovný postup pomocou generátorov môžete až vtedy, keď skutočne pochopíte, čo sa deje.
CLI vygeneruje priečinok v priečinku src adresár s názvom stránke so súborom HTML, CSS a Typescript, ako aj so súborom spec. V našom page.component.ts súboru, máme základnú štruktúru súčasti. Náš komponent odkazuje na naše súbory šablón a štýlov v @ Komponent metadáta a má naše konštruktér a ngOnit metódy odstránené.
// app / page / page.component.ts import {Component, OnInit} z ‘@ angular / core’; @Component ({selector: 'app-page', templateUrl: './page.component.html', styleUrls: ['./page.component.css']})) exportná trieda PageComponent implementuje OnInit {constructor () {} ngOnInit () {}}
Spolu s generovaním našej súčasti CLI zmení aj našu app.module.ts zahrnúť a PageComponent vstup v našom vyhlásenia pole. To znamená, že náš komponent stránky je teraz k dispozícii v celom module.
// app / app.module.ts @NgModule ({deklarácie: [AppComponent, PageComponent], ...})
Ako kontrolu duševného zdravia môžeme skočiť do nášho app.component.html súbor a pridať stránka aplikácie> / stránka aplikácie> až na dno. Všimnite si, že značka prvku, ktorú používame, zodpovedá značke selektor majetok definovaný v našom @ Komponent metadáta.
! - app / app.component.html -> h1> {{title}} / h1> app-page> / app-page>
04. Vytvorte si komponent svojej stránky
Vďaka nášmu živému a dobre fungujúcemu komponentu stránky ho môžeme vytvoriť, aby vyzeral ako skutočná webová stránka.Zavedieme stránke objekt s titul, podtitul, obsaha obrázok vlastnosti.
// app / page / page.component.ts export class PageComponent implements OnInit {page = {title: 'Home', subtitle: 'Welcome Home!', content: 'Some home content.', image: 'assets / bg00. jpg '}; konštruktor () {} ngOnInit () {}}
Aktualizujeme našu šablónu tak, aby sa viazala na stránke objekt. Existuje obrazový prvok, ktorý sa nakoniec rozšíri tak, aby vyplnil celé okno prehliadača. Tiež pridáme komponent karty Angular Material, ktorý zaviažeme na zvyšok našich stránke namietať proti.
! - app / page / page.component.html -> img [src] = "page.image"> md-card> md-card-header> md-card-title> h1> {{page.title} } / h1> / md-card-title> md-card-subtitle> {{page.subtitle}} / md-card-subtitle> / md-card-header> md-card-content> {{page.content} } / md-card-content> / md-card>
Náš komponent stránky začína vyzerať oveľa lepšie! Naším ďalším krokom je pridať schopnosť mať viac stránok a prechádzať medzi nimi.
Strana 2: Ako vytvoriť viac stránok
