Բովանդակություն
- 01. Ստեղծել նախագիծ
- 02. Ներառեք անիմացիաներ և անկյունային նյութեր
- 03. Ներկայացրե՛ք էջի բաղադրիչը
- 04. Կառուցեք ձեր էջի բաղադրիչը
Angular- ի վերջին տարբերակը հաճախ դիտարկվում է որպես շրջանակ, որը գալիս է հետքերի ձեռնարկության կողմից և, ընդհանուր առմամբ, վայելում է բիզնեսի դիմումների շարքը: Չնայած ճիշտ է, որ Angular- ը իսկապես վերափոխվել է շրջանակից դեպի հարթակ, որը աջակցում է բոլոր տեսակի ծրագրերին, կան շատ իրոք զարմանալի հատկություններ, որոնք մշակողների համար ունեն իրենց օգտվողների համար սուզական փորձեր ստեղծելու համար:
Սա անկյունային լեզվով լիալեզու անիմացիոն կայք կառուցելու մասին մի շարքի առաջին մասն է: Մենք կսկսենք լրիվ էջի կայք ստեղծելով, այնուհետև կենդանացնելով այն հաջորդ բաժնում:
Այս ձեռնարկում մենք հիմնականում կենտրոնանալու ենք անկյունային մասերի վրա և հրաժարվում ենք HTML- ի և CSS- ի մասերի մասին խոսելուց, որոնք ուղղակիորեն չեն վերաբերում ծրագրի կառուցմանը: Ներբեռնեք աղբյուրի կոդը ՝ դրան հետևելու համար: Angular- ով չի՞ վաճառվում: Գտեք այստեղ կատարյալ կայք ստեղծող (և լավագույն գները ՝ ստորև): Այնուամենայնիվ, ձեր կայքը կառուցելիս ձեզ հարկավոր է պատշաճ վեբ հոստինգ և ամպային պահուստ:
01. Ստեղծել նախագիծ
Կան շատ շարժվող մասեր, որոնք մտնում են ոչ տրիվիալ վեբ հավելված: Ի՞նչ կախվածություններ ունի ձեր դիմումը: Ինչպե՞ս եք այն գործելու տեղական մակարդակում: Ինչպե՞ս եք փորձարկելու այն: Ինչպե՞ս եք պատրաստվում փաթեթավորել ձեր ակտիվները
Բարեբախտաբար, այս տարրերի կազմման բարդ գործընթացը լուծվում է տեսադաշտից դուրս @ անկյունային / կլիկ, Մեր տերմինալից ընդամենը մի քանի հրամաններում մենք կարող ենք ունենալ լիովին ֆունկցիոնալ անկյունային ծրագիր, որի հետ մենք պատրաստ ենք աշխատել:
CLI- ի հետ աշխատելու առաջին քայլը դրա տեղադրումն է: Դրա համար օգտագործեք ստորև տրված հրահանգը.
npm տեղադրել - g @ անկյունային / cli
CLI- ն տեղադրելուց հետո հրամանի տողից մենք կարող ենք անցնել այն թղթապանակը, որում ցանկանում ենք տեղադրել մեր նախագիծը: Այնտեղից մենք գործարկելու ենք ng նոր մեր նախագծի անվան հետ: Սա կստեղծի նույն անունով պանակ, որի մեջ մենք նավարկելու ենք նախագիծն ավարտելուց հետո:
cd your-projects-folder> ng new angular-animations-site cd angular-animations-site
Եվ վերջ: Մեր անկյունային հավելվածը պատրաստ է գործարկման: Կարող եք կամ սկսել ձեր դիմումը հետևյալով npm սկիզբը կամ ng ծառայել, Ես նախընտրում եմ օգտագործել npm սկիզբը քանի որ դա ավելի պայմանական է և հնարավորություն է տալիս ինձ ավելացնել լրացուցիչ հրամաններ: Դրանից հետո կարող եք անցնել դեպի http: // localhost: 4200 տեսնելու համար, որ ծրագիրը գործարկվում է:
02. Ներառեք անիմացիաներ և անկյունային նյութեր
Քանի որ մենք սիրում ենք գեղեցիկ իրեր, մենք պատրաստվում ենք մի քանի փոքր լրացումներ կատարել մեր հավելվածում ՝ ավելացնելով և տեղադրելով այն @ անկյունային / անիմացիաներ և @ անկյունային / նյութական փաթեթներ:
npm i - փրկել @ անկյունային / նյութական @ անկյունային / անիմացիաներ
Մենք կարող ենք Angular- ին տեղյակ պահել այս կախվածությունների մասին ՝ դրանք ավելացնելով մեր app.module.ts ֆայլ Մենք օգտագործելու ենք Angular Material կոճակը, քարտը և գործիքագոտին, այնպես որ մենք ներմուծելու ենք դրանց համապատասխան մոդուլները, ինչպես նաև BrowserAnimationsModule.
// app / app.module.ts ... ներմուծել {MdButtonModule, MdCardModule, MdToolbarModule} '' @ angular / material '- ից; ներմուծեք {BrowserAnimationsModule} - ը '@ angular / platform-browser / անիմացիաներից';
Դրանից հետո մենք կարող ենք դրանք ավելացնել ներմուծում զանգված մեր հետ NgModule հայտարարություն.
// app / app.module.ts ... ներմուծել {MdButtonModule, MdCardModule, MdToolbarModule} '' @ angular / material '- ից; ներմուծեք {BrowserAnimationsModule} - ը '@ angular / platform-browser / անիմացիաներից'; @NgModule ({... ներմուծում. [... BrowserAnimationsModule, MdToolbarModule, MdButtonModule, MdCardModule], ...})
Եվ մեկ վերջին լրացման համար մենք indigo վարդագույն թեման կներմուծենք մեր մեջ ոճեր. css ֆայլ
/ * styles.css * / @import ’~@angular/material/prebuilt-themes/indigo-pink.css’;
Մինչև այս պահը մենք ամբողջովին կենտրոնացել ենք հավելվածի ստեղծման վրա, որպեսզի կարողանանք սկսել զարգացումը: Սկզբում այս հրահանգները կարող են անհեթեթ թվալ, բայց երբ ընտելանաք, կտեսնեք, որ ընդամենը մի քանի րոպե է պահանջվում լիարժեք ներկառուցված միջավայր ունենալ բոլոր զանգերով և սուլիչներով, որոնք մեզ անհրաժեշտ են քաղցր կայք ստեղծելու համար:
03. Ներկայացրե՛ք էջի բաղադրիչը
Քանի որ մենք կայք ենք կառուցում Angular- ով, մենք պետք է ներդնենք մեր էջերը ցուցադրելու մեխանիզմ: Անկյունում, գործիքի ատոմային կառուցվածքային բաղադրիչը բաղադրիչն է: Applicationարտարապետելով մեր հավելվածը հստակ սահմանված, ներծծված բաղադրիչներով ՝ մենք ի վիճակի ենք հեշտությամբ վերաօգտագործել ֆունկցիոնալությունը, ինչպես նաև կազմել նոր ֆունկցիոնալություն ՝ ներկայացնելով նոր բաղադրիչներ:
CLI- ն գեներատորի աջակցությամբ ուղարկում է արկղից անմիջապես դուրս, և սա է այն, ինչ մենք օգտագործում ենք մեր էջի բաղադրիչը ստեղծելու համար: Մենք կարող ենք առաջացնել մեր էջի բաղադրիչը ՝ գործարկելով ստորև տրված հրամանը ( է հրամանը սղագրության համար է առաջացնում).
ng g բաղադրիչի էջ
Նշում. Խորհուրդ եմ տալիս ժամանակ հատկացնել ՝ սովորելու, թե ինչպես ձեռքով կառուցել հիմնական անկյունային կտորները, մինչև կբարձրացնեք ձեր մկանների հիշողությունը: Միայն այն ժամանակ, երբ դուք իսկապես հասկանում եք, թե ինչ է կատարվում, պետք է օպտիմալացնել ձեր աշխատանքային հոսքը գեներատորների հետ:
CLI- ն կստեղծի պանակ src գրացուցակ անունով էջ HTML, CSS և Typescript ֆայլերով, ինչպես նաև սպեցիֆիկ ֆայլերով: Մեր մեջ էջ. component.ts ֆայլ, մենք ունենք բաղադրիչի հիմնական կառուցվածքը: Մեր բաղադրիչը հղում է կատարում մեր ձևանմուշի և ոճի ֆայլերին @ Բաղադրիչ մետատվյալներ և ունի մեր կոնստրուկտոր և ngOnit մեթոդները.
// app / page / page.component.ts ներմուծում է {Component, OnInit} '' @ angular / core '- ից; @Component ({ընտրիչ ՝ 'app-page', templateUrl: './page.component.html', styleUrls: ['./page.component.css']}) արտահանման դասը PageComponent- ն իրականացնում է OnInit {constructor () {} ngOnInit () {}}
Մեր բաղադրիչը գեներացնելուն զուգահեռ, CLI- ը նաև կփոփոխի մեր բաղադրիչը app.module.ts ներառել ա Էջի բաղադրիչ մուտքը մեր հայտարարագրերը զանգված Սա նշանակում է, որ մեր էջի բաղադրիչն այժմ հասանելի է ամբողջ մոդուլի միջոցով:
// app / app.module.ts @NgModule ({հայտարարագրեր. [AppComponent, PageComponent], ...})
Որպես խելամտության ստուգում, մենք կարող ենք ցատկել մեր մեջ app.component.html ֆայլ ներկայացնել և ավելացնել հավելված-էջ> / հավելված-էջ> դեպի ներքև: Ուշադրություն դարձրեք, որ մեր կողմից օգտագործվող տարրի պիտակը համապատասխանում է ընտրող գույքը, որը սահմանված է մեր մեջ @ Բաղադրիչ մետատվյալներ
! - app / app.component.html -> h1> {{title}} / h1> հավելված-էջ> / app-page>
04. Կառուցեք ձեր էջի բաղադրիչը
Մեր էջի բաղադրիչով կենդանի և առողջ լինելով `մենք կարող ենք այն կառուցել այնպես, որ այն սկսի նմանվել իրական կայքի:Մենք կներկայացնենք ա էջ առարկա հետ կոչում, ենթավերնագիր, բովանդակություն, և պատկեր հատկությունները
// app / page / page.component.ts արտահանման դասը PageComponent- ը իրականացնում է OnInit {page = {title: 'Home', ենթավերնագիր ՝ 'Welcome Home!', բովանդակություն ՝ 'Some home content.', պատկեր ՝ 'ակտիվներ / bg00: jpg '}; կոնստրուկտոր () {} ngOnInit () {}}
Մենք կթարմացնենք մեր ձևանմուշը ՝ կապվելու համար էջ առարկա Կա պատկերի մի տարր, որն ի վերջո կավելացվի ՝ զննարկչի ամբողջ պատուհանը լրացնելու համար: Մենք նաև պատրաստվում ենք ավելացնել Angular Material քարտի բաղադրիչը, որը մենք կկապենք մեր մնացած մասերի հետ էջ առարկել
- 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>
Մեր էջի բաղադրիչը սկսում է շատ ավելի լավ տեսք ունենալ: Մեր հաջորդ քայլը մի քանի էջ ունենալու և դրանց միջև նավարկելու հնարավորությունն ավելացնելն է:
Էջ 2. Ինչպե՞ս ստեղծել բազմաթիվ էջեր
