Угао 2 за 10 минута

Начин на који данас можемо развијати апликације знатно је смањио сложеност развоја, и упркос укључивању нових технологија које на прву могу изгледати донекле компликоване, оне заправо помажу не само у изградњи бољих апликација, већ и у прилагођавању тренутним захтјевима употребљивости.

Једна од ових технологија коју можемо користити је АнгуларЈС, који је оквир МВВ (Модел-Поглед-Шта год) што се преводи као Модел-Виев-Вхатевер-воркс-фор иоу, засновано је на ЈаваСцрипт-у и омогућава нам да доставимо наше документе ХТМЛ статичке карактеристике динамичке функционалности и коришћење везивања да убризгавамо податке у наш ХТМЛ користећи сопствене директиве оквира.

Ангулар ради прилично добро, али имамо његову нову итерацију и омогућава нам да још више проширимо функционалност оквира, па да видимо како можемо почети да користимо Ангулар 2 за само 10 минута.

1. Добијање ТипеСцрипт -а и Ангулар -а 2


Да бисмо извршили ову имплементацију, радићемо на најоптималнији могући начин, за то ћемо користити Стројопис који је језик који омогућава проширење функционалности ЈаваСцрипт да се фокусира на коришћење класа и објеката.

Да бисте добили толико ТипеСцрипт Шта Угаони 2 потребно је да имамо Ноде.јс, као и његов менаџер пакета на нашем рачунару, ако их још увек немамо, можете погледати први кораци са Ноде.јс у овом водичу.

Кад једном имамо Ноде.јс и менаџер пакета НПМ можемо покренути команде да бисмо добили оно што нам је потребно:

 нпм инсталл -г тсд@^0.6.0 тсд инсталл ангулар2 ес6-обећање рк рк-лите 
Додатно морамо инсталирати компајлер ТипеСцрипт пошто прегледач не препознаје .тс датотеке:
 нпм инсталл -г типцрипт@^1.5.0-бета
Једном изведени, требали бисмо путем конзоле видети инсталацију модула, компајлер и библиотеке оквира.

ЕНЛАРГЕ

Коначно, морамо само да инсталирамо локални сервер, да нашу апликацију покренемо на професионалан начин, за то у нашој конзоли и кроз НПМ извршавамо следеће:

 нпм инсталл -г хттп -сервер

2. Израда наше апликације


Када добијемо све потребно за рад наше апликације, креирамо фасциклу у којој ћемо имати датотеке пројекта које можемо назвати угаона10мин, а унутра ћемо створити датотеку под називом апплицатион.тс и наш уобичајен индек.хтмл.

Прва ствар коју ћемо учинити је да додамо класе и компоненте у нашу датотеку апплицатион.тс, јер ово прво што морамо да урадимо је увоз Угаони 2 као што следи:

 увоз {Цомпонент, Виев, боотстрап} из 'ангулар2 / ангулар2';
Да бисмо проверили рад нашег компајлера који се налази у фасцикли нашег пројекта, извршићемо следеће:
 тсц --ватцх -м цоммоњс -т ес5 --емитДецораторМетадата апплицатион.тс
Са оним што би требало да добијемо од конзоле да је компилација успешно завршена и да такође чека промене у датотеци, то је због употребе параметра -ватцх.

ЕНЛАРГЕ

Сада креирамо нашу компоненту, где ћемо прогласити селектор који ћемо користити у нашем ХТМЛ коду, као и наш приказ где ћемо укључити шаблон у који ћемо унети промене.

 @Компонента ({селецтор: 'ми-апп'}) @Виев ({темплате: ''})
Како наш компајлер гледа промене и ми смо неке укључили, нормално је да видимо неку активност у нашој конзоли.

Сада морамо само да направимо декларацију наше класе и да иницијализујемо објекте унутар конструктора који ће бити они који ће се затим испразнити у приказу. На крају користимо функцију боотстрап () која ће бити задужена за исцртавање компоненти на нашој страници.

 цласс миЦомпонент {наме: стринг; цонструцтор () {тхис.наме = 'Јонатхан'; }} боотстрап (миЦомпонент);
Наш код за Типесцрипт смо већ завршили, а ако проверимо у нашој фасцикли, требало би да имамо ЈаваСцрипт који је резултат наше компилације .тс.

ЕНЛАРГЕ

3. Изградња ХТМЛ -а


Коначно, морамо изградити ХТМЛ, извршите дужни увоз, као и укључите селекторе које декларишемо у нашој .тс датотеци, за то ћемо укључити систем.јс, што ће нам омогућити да извршимо увоз наше датотеке, да видимо садржај нашег ХТМЛ -а:
 Угао 2 за 10 минута 
Када то учинимо, морамо само да покренемо наш сервер и покренемо нашу апликацију, за то заустављамо компајлер и извршавамо сервер следећом командом:
 хттп-сервер
Ово ће поставити сервер у лоцалхост: 8080 и омогућиће нам приступ нашој апликацији.

Видећемо податке дефинисане у нашој датотеци ТипеСцрипт су оне које су убачене у нашу апликацију, на овај начин одвајамо логику наше апликације и можемо имати чист ХТМЛ документ који рукује само селекторима које смо створили захваљујући Угаони 2, дајући нам апликацију која ради оптималније и ефикасније уз најмање могуће напоре.

wave wave wave wave wave