Kampinis 2 per 10 minučių

Tai, kaip šiandien galime kurti programas, labai sumažino kūrinių sudėtingumą ir nepaisant to, kad įtraukė naujas technologijas, kurios iš pradžių gali atrodyti šiek tiek sudėtingos, jos iš tikrųjų padeda ne tik kurti geresnes programas, bet ir prisitaikyti prie dabartinių naudojimo reikalavimų.

Viena iš šių technologijų, kurią galime naudoti, yra KampinisJS, kuri yra MVW sistema (Modelis-vaizdas-bet kas), kuris jums išverstas kaip „Model-View-Whatever-works“, pagrįstas „JavaScript“ ir leidžia mums pateikti savo dokumentus HTML statines dinaminio funkcionalumo ypatybes ir naudoti apkaustai įterpti duomenis į mūsų HTML naudojant sistemos nuostatas.

„Angular“ veikia gana gerai, tačiau turime naują iteraciją ir tai leidžia daug labiau išplėsti sistemos funkcionalumą, tada pažiūrėkime, kaip galime pradėti naudoti Kampinis 2 vos per 10 minučių.

1. „TypeScript“ ir „Angular“ gavimas 2

Norėdami tai įgyvendinti, mes dirbsime optimaliausiu įmanomu būdu Mašinraštis tai kalba, leidžianti išplėsti funkcionalumą „JavaScript“ sutelkti dėmesį į klasių ir objektų naudojimą.

Kad gautum tiek „TypeScript“ Ką Kampinis 2 tai būtina, kad turėtume Node.js, taip pat jo paketų tvarkyklę mūsų kompiuteryje, jei jų vis dar neturime, galite pažvelgti į pirmieji žingsniai naudojant „Node.js“ šioje pamokoje.

Kai jau turime Node.js ir paketų tvarkytuvė NPM mes galime paleisti komandas, kad gautume tai, ko mums reikia:

 npm install -g tsd@^0.6.0 tsd install angular2 es6-pažintys rx rx-lite 

Be to, turime įdiegti kompiliatorių „TypeScript“ nes naršyklė neatpažįsta .ts failų:

 npm install -g typecript@^1.5.0-beta

Vykdę, konsolėje turėtume matyti modulių, kompiliatoriaus ir pagrindų bibliotekų diegimą.

DIDELIS

Galiausiai turime tik įdiegti vietinį serverį, kad profesionaliai paleistume savo programą, tam savo konsolėje ir per NPM vykdome šiuos veiksmus:

 npm įdiegti -g http -serverį

2. Kuriame mūsų programą

Kai turėsime viską, kas reikalinga mūsų programai veikti, sukuriame aplanką, kuriame turėsime projekto failus ir galėsime jį pavadinti kampinis 10 min, o viduje mes sukursime failą pavadinimu taikymas.ts ir mums įprasta index.html.

Pirmas dalykas, kurį ketiname padaryti, yra pridėti klases ir komponentus prie failo application.ts, todėl pirmiausia turime importuoti Kampinis 2 taip:

 importuoti {Component, View, bootstrap} iš 'angular2 / angular2';

Norėdami patikrinti, ar mūsų projekto aplanke esantis kompiliatorius veikia, atliksime šiuos veiksmus:

 tsc --watch -m commonjs -t es5 --emitDecoratorMetadata application.ts

Tai, ką turėtume gauti per konsolę, kad kompiliacija buvo sėkmingai baigta ir kad ji taip pat laukia pakeitimų faile, tai yra dėl to, kad naudojome parametrą -watch.

DIDELIS

Dabar mes sukuriame savo komponentą, kuriame paskelbsime selektorius kurį naudosime savo HTML kode, taip pat savo rodinyje, kuriame įtrauksime šabloną, kuriame įvesime pakeitimus.

 @Component ({selector: 'my-app'}) @View ({template: ''})

Kadangi mūsų kompiliatorius stebi pokyčius ir kai kuriuos įtraukėme, normalu, kad konsolėje matome tam tikrą veiklą.

Dabar turime tik pateikti savo klasės deklaraciją ir inicijuoti objektus konstruktoriaus viduje, kurie bus tie, kurie vėliau bus ištuštinti vaizde. Galiausiai naudojame funkciją bootstrap (), kuri bus atsakinga už mūsų puslapyje esančių komponentų pateikimą.

 klasė myComponent {pavadinimas: eilutė; konstruktorius () {this.name = 'Jonathan'; }} bootstrap (myComponent);

Mes jau baigėme „Typescript“ kodą ir, jei tikriname savo aplanke, turėtume turėti „JavaScript“, sukurtą .ts.

DIDELIS

3. HTML kūrimas

Galiausiai turime sukurti HTML, atlikti reikiamą importą, taip pat įtraukti parinkiklius, kuriuos deklaruojame savo .ts faile, į tai įtrauksime system.js, kuri leis mums atlikti importas failo, pažiūrėkime HTML turinį:

 Kampinis 2 per 10 minučių 

Kai tai bus padaryta, turime tik paleisti savo serverį ir paleisti programą, tam mes sustabdome kompiliatorių ir vykdome serverį naudodami šią komandą:

 http-serveris

Tai nustatys serverį vietinis šeimininkas: 8080 ir tai leis mums pasiekti mūsų programą.

Pamatysime duomenis, apibrėžtus mūsų faile „TypeScript“ yra tie, kurie įleidžiami į mūsų programą, tokiu būdu mes atskiriame savo programos logiką ir galime turėti švarų HTML dokumentą, kuris tvarko tik tuos selektorius, kuriuos sukūrėme Kampinis 2, suteikdami mums programą, kuri veiktų optimaliau ir efektyviau, naudojant kuo mažiau pastangų.