Одбор за сарадњу АнгуларЈС са Соцкет.ио

Садржај

• 01. Сервер
• 02. Голе кости
• 03. Изјавите своју зависност
• 04. Ожичите утичницу.ио
• 05. Укључите моторе!
• 06. Неколико искрених мисли пре него што кренете даље
• 07. Клијент
• 08. Голе кости
• 09. Креирање лепљиве белешке
• 10. Приказивање лепљивих белешки
• 11.Брисање лепљиве белешке
• 12. Ажурирање лепљиве белешке
• 13. Премештање лепљиве белешке
• 14. Бонус
• 15. Закључак
• Свиђа вам се ово? Прочитајте ово!

• Потребно знање: Интермедиате ЈаваСцрипт
• Захтева: Ноде.јс, НПМ
• Време пројекта: 2 сата

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

Покријмо мало домаћинства пре него што започнемо. Претпоставићу да имате фундаментално знање ХТМЛ-а и ЈаваСцрипт-а јер нећу покрити сваки мали кутак кода. На пример, нећу прозивати ЦСС и ЈаваСцрипт датотеке које сам уврстио у главу ХТМЛ датотеке, јер тамо нема нових информација.

Такође, саветујем вам да преузмете код са мог ГитХуб налога да бисте наставили. Мој добар пријатељ Бриан Форд такође има изврсно семе Соцкет.ио, на којем сам засновао неке од својих оригиналних идеја.

Четири главне карактеристике које желимо на табли за сарадњу је могућност креирања белешке, читање белешки, ажурирање белешке, брисање белешке и, за забаву, померање белешке на табли. Да, то је тачно, фокусирамо се на стандардне ЦРУД функције. Верујем да ћемо се фокусирањем на ове основне карактеристике покрити довољно кода да се појаве обрасци како бисте их могли узети и применити негде другде.

01. Сервер

Прво ћемо почети са Ноде.јс сервером, јер ће он послужити као основа на којој ћемо градити све остало.

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

(Радим под претпоставком да сте инсталирали Ноде.јс и НПМ. Брза Гоогле претрага ће вам показати како да их инсталирате ако то не учините.)

02. Голе кости

Дакле, да бисмо изградили голе кости сервера, морамо да урадимо неколико ствари да бисмо се покренули.

// апп.јс

// А.1
вар екпресс = рекуире (’екпресс’),
апп = екпресс ();
сервер = рекуире (’хттп’). цреатеСервер (апликација),
ио = рекуире (’соцкет.ио’). листен (сервер);

// А.2
апп.цонфигуре (фунцтион () {
апп.усе (екпресс.статиц (__ дирнаме + ’/ публиц’));
});

// А.3
сервер.листен (1337);

А.1 Декларишемо и покрећемо инстанцу наших Ноде.јс модула како бисмо их могли користити у нашој апликацији. Декларишемо Екпресс, покрећемо Екпресс, а затим креирамо ХТТП сервер и шаљемо у њега Екпресс инстанцу. А одатле правимо инстанцу Соцкет.ио и кажемо му да припази на инстанцу нашег сервера.

А.2 Тада кажемо нашој Екпресс апликацији да користи наш јавни директоријум за послуживање датотека из.

А.3 Покрећемо сервер и кажемо му да преслушава на порту 1337.

До сада је то било прилично безболно и брзо. Верујем да имамо мање од 10 редова у коду и већ имамо функционалан Ноде.јс сервер. Напред!

03. Изјавите своју зависност

// пакети.јсон
{
"наме": "угаона плоча",
"десцриптион": "Одбор за сарадњу АнгуларЈС",
"версион": "0.0.1-1",
"привате": тачно,
"зависности": {
"екпресс": "3.к",
"соцкет.ио": "0.9.к"
}
}

Једна од најлепших карактеристика НПМ-а је способност пријављивања ваших зависности у а пакети.јсон датотеку, а затим их аутоматски инсталирајте путем нпм инсталл на командној линији.

04. Ожичите утичницу.ио

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

У доњем коду приметићете да је то у суштини конфигурација слушалаца догађаја и повратних позива. Први догађај је веза догађај који користимо за повезивање осталих наших догађаја у затварању.

ио.соцкетс.он (’веза’, функција (соцкет) {
соцкет.он (’цреатеНоте’, функција (подаци) {
соцкет.броадцаст.емит (’онНотеЦреатед’, подаци);
});

соцкет.он (’упдатеНоте’, функција (подаци) {
соцкет.броадцаст.емит (’онНотеУпдатед’, подаци);
});

соцкет.он (’делетеНоте’, функција (подаци) {
соцкет.броадцаст.емит (’онНотеДелетед’, подаци);
});

соцкет.он (’мовеНоте’, функција (подаци) {
соцкет.броадцаст.емит (’онНотеМовед’, подаци);
});
});

Одавде додајемо слушаоце цреатеНоте, упдатеНоте, делетеНоте и мовеНоте. А у функцији повратног позива једноставно преносимо догађај који се догодио како би сваки клијент који слуша може бити обавештен да се догађај догодио.

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

05. Укључите моторе!

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

Прво инсталирате зависности Ноде.јс овако:

нпм инсталл

А онда покренете сервер овако:

ноде апп.јс

И онда! Идите на ову адресу у прегледачу. Бам!

06. Неколико искрених мисли пре него што кренете даље

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

Али, био сам апсолутно подвргнут открићу да могу да поставим статички веб сервер у само неколико редова кода, а у још неколико редова користим Соцкет.ио за руковање свим догађајима између прегледача. И даље је то био само ЈаваСцрипт! Ради благовремености покривамо само неколико карактеристика, али надам се да ћете до краја чланка видети да је лако пливати - а дубоки крај базена није тако застрашујући.

07. Клијент

Сада када имамо чврсту основу за наш сервер, пређимо на мој омиљени део - клијента! Користићемо АнгуларЈС, јКуериУИ за део који се може повући и Твиттер Боотстрап за базу стилова.

08. Голе кости

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

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

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

// публиц / индек.хтмл
хтмл нг-апп = "апп">

Знам да ће ми требати бар један контролер и зато ћу то прозвати користећи нг-контролер и додељујући му својство од МаинЦтрл.

боди нг-цонтроллер = "МаинЦтрл"> / боди>

Дакле, сада смо на вези за модул са именом апликација и контролер именован МаинЦтрл. Хајде да их креирамо сада.

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

// публиц / јс / цоллаб.јс
вар апп = ангулар.модуле (’апп’, []);

Прогласићемо неколико празних чувара места у апликација модул који почиње са МаинЦтрл доле.Све ћемо попунити касније, али желео сам да илуструјем основну структуру од почетка.

апп.цонтроллер (’МаинЦтрл’, функција ($ опсег) {});

Такође ћемо умотати функционалност Соцкет.ио у утичница услугу тако да можемо енкапсулирати тај објекат и не остављати га да лебди около на глобалном простору имена.

апп.фацтори (’соцкет’, фунцтион ($ роотСцопе) {});

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

апп.дирецтиве (’стицкиНоте’, функција (соцкет) {});

Па хајде да размотримо шта смо до сада урадили. Покренули смо апликацију помоћу нг-апп и прогласио наш контролер апликација у ХТМЛ-у. Такође смо дефинисали апликативни модул и креирали МаинЦтрл контролер, утичница услуга и лепљива белешка директива.

09. Креирање лепљиве белешке

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

апп.цонтроллер (’МаинЦтрл’, функција ($ опсег, соцкет) {// Б.1
$ сцопе.нотес = []; // Б.2

// Долазни
соцкет.он (’онНотеЦреатед’, функција (подаци) {// Б.3
$ сцопе.нотес.пусх (подаци);
});

// Одлазни
$ сцопе.цреатеНоте = фунцтион () {// Б.4
вар ноте = {
ид: нови датум (). гетТиме (),
наслов: „Нова напомена“,
тело: „На чекању“
};

$ сцопе.нотес.пусх (напомена);
соцкет.емит (’цреатеНоте’, напомена);
};

Б.1 АнгуларЈС има уграђену функцију убризгавања зависности, па убризгавамо а $ сцопе објект и утичница услуга. Тхе $ сцопе објект служи као ВиевМодел и у основи је ЈаваСцрипт објекат у који су уграђени неки догађаји како би се омогућило двосмерно везивање података.

Б.2 Изјављујемо низ у коме ћемо користити за везивање погледа.

Б.3 Додајемо слушаоца за онНотеЦреатед догађај на утичница услугу и гурање корисног терета догађаја у $ сцопе.нотес низ.

Б.4 Прогласили смо а цреатеНоте метода која ствара подразумевану вредност Белешка предмет и гура га у $ сцопе.нотес низ. Такође користи утичница сервис за емитовање цреатеНоте догађај и проћи нова напомена објект уз.

Дакле, сада када имамо метод за стварање белешке, како то назвати? То је добро питање! У ХТМЛ датотеку додајемо уграђену АнгуларЈС директиву нг-клик на дугме, а затим додајте цреатеНоте позив методе као вредност атрибута.

буттон ид = "цреатеБуттон" нг-цлицк = "цреатеНоте ()"> Цреате Ноте / буттон>

Време је за брзи преглед онога што смо до сада урадили. Додали смо низ у $ сцопе објект у МаинЦтрл то ће садржати све напомене за пријаву. Такође смо додали а цреатеНоте метода на $ сцопе Објекат креира нову локалну белешку, а затим је емитује осталим клијентима путем утичница услуга. Такође смо додали слушалац догађаја на утичница услугу како бисмо могли знати када су други клијенти креирали белешку како бисмо је могли додати у нашу колекцију.

10. Приказивање лепљивих белешки

Сада имамо могућност да креирамо објекат белешке и делимо га између прегледача, али како га заправо приказати? Овде долазе директиве.

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

Природно је да, пошто ћемо стварати лепљиве белешке за наш одбор за сарадњу, треба да креирамо лепљива белешка директива. Директиве се дефинишу позивањем методе директиве на модулу на којем желите да је пријавите и уношењем имена и функције које враћају објекат дефиниције директиве. Објекат дефиниције директиве има мноштво могућих својстава која можете да дефинишете на њему, али овде ћемо користити само неколико за наше сврхе.

Препоручујем вам да погледате документацију АнгуларЈС да бисте видели целокупне листе својстава која можете дефинисати на објекту дефиниције директиве.

апп.дирецтиве (’стицкиНоте’, фунцтион (соцкет) {
вар линкер = функција (опсег, елемент, атрибути) {};

вар контролер = функција ($ опсег) {};

ретурн {
ограничи: „А“, // Ц.1
веза: линкер, // Ц.2
контролер: контролер, // Ц.3
опсег: {// Ц.4
напомена: ’=’,
онделете: ’&’
}
};
});

Ц.1 Можете да ограничите своју директиву на одређену врсту ХТМЛ елемента. Два најчешћа су елемент или атрибут, за које декларишете да их користите Е. и А. редом. Можете га ограничити и на ЦСС класу или коментар, али то није тако често.

Ц.2 Функција везе је место где стављате сав свој ДОМ код за манипулацију. Постоји неколико изузетака које сам пронашао, али то је увек тачно (најмање 99 процената времена). Ово је основно основно правило АнгуларЈС-а и зато сам га нагласио.

Ц.3 Функција контролера ради баш као и главни контролер који смо дефинисали за апликацију, али $ сцопе објект који преносимо специфичан је за ДОМ елемент на коме директива живи.

Ц.4 АнгуларЈС има концепт изолованог опсега, који вам омогућава да експлицитно дефинишете како опсег директиве комуницира са спољним светом. Да нисмо прогласили опсег, директива би имплицитно наследила родитељски опсег са односом родитељ-дете. У великом броју случајева то није оптимално. Изоловањем опсега ублажавамо шансе да спољни свет нехотице може негативно утицати на стање ваше директиве.

Прогласио сам двосмерно везивање података за Белешка са = симбол и израз који се везује за онделете са & симбол. Молимо прочитајте АнгуларЈС документацију за цело објашњење изолованог опсега јер је то једна од сложенијих тема у оквиру.

Дакле, хајде да додамо лепљиву напомену у ДОМ.

Као и сваки добар оквир, АнгуларЈС долази са неким заиста одличним карактеристикама одмах. Једна од најприкладнијих карактеристика је нг-репеат. Ова АнгуларЈС директива вам омогућава да проследите низ објеката и дуплицира било коју ознаку на онолико пута колико има ставки у низу. У случају испод, вршимо итерацију преко белешке низ и дуплирање див елемент и његова деца за дужину белешке низ.

див стицки-ноте нг-репеат = "ноте ин нотес" ноте = "ноте" онделете = "делетеНоте (ид)">
буттон типе = "буттон" нг-цлицк = "делетеНоте (ноте.ид)"> × / буттон>
инпут нг-модел = "ноте.титле" нг-цханге = "упдатеНоте (ноте)" типе = "тект">
тектареа нг-модел = "ноте.боди" нг-цханге = "упдатеНоте (ноте)"
> {{ноте.боди}} / тектареа>
/ див>

Лепота нг-репеат је да је везан за било који низ који проследите и, када додате ставку у низ, ваш ДОМ елемент ће се аутоматски ажурирати. Можете направити овај корак даље и поновити не само стандардне ДОМ елементе већ и друге прилагођене директиве. Ето зашто видите лепљива белешка као атрибут на елементу.

Постоје још два бита прилагођеног кода која треба разјаснити. Изоловали смо опсег на забелешке за лепљење директива о два својства. Први је обавезујући дефинисани изолирани опсег на Белешка имовина. То значи да ће се сваки пут када се објект белешке промени у родитељском опсегу аутоматски ажурирати одговарајући објект белешке у директиви и обрнуто. Други дефинисани изоловани опсег је на онделете атрибут. Шта ово значи је када онделете се позива у директиви, позваће било који израз у онделете атрибут на елементу ДОМ који инстанцира директиву.

Када се директива инстанцира, она се додаје у ДОМ и позива се функција везе. Ово је савршена прилика да поставите нека задана ДОМ својства на елемент. Параметар елемента који преносимо је заправо јКуери објекат и тако можемо извршити јКуери операције на њему.

(АнгуларЈС заправо долази са уграђеним подскупом јКуери-а, али ако сте већ укључили пуну верзију јКуери-а, АнгуларЈС ће то одгодити.)

апп.дирецтиве (’стицкиНоте’, фунцтион (соцкет) {
вар линкер = функција (опсег, елемент, атрибути) {
// Нека иницијација ДОМ-а да то буде лепо
елемент.цсс (’лево’, ’10пк’);
елемент.цсс („врх“, „50 пиксела“);
елемент.хиде (). фадеИн ();
};
});

У горњем коду само постављамо лепљиву ноту на сцену и бледи је.

11.Брисање лепљиве белешке

Дакле, сада када можемо додати и приказати лепљиве ноте, време је да их избришемо. Стварање и брисање лепљивих белешки питање је додавања и брисања предмета из низа за које су белешке дужне. Ово је одговорност родитељског опсега да одржи тај низ, због чега захтев за брисање потичемо из директиве, али нека родитељски опсег изведе стварно дизање терета.

Због тога смо прошли кроз све проблеме стварања изолованог опсега дефинисаног изразом на директиви: како би директива могла интерно да прими догађај брисања и проследи га родитељу на обраду.

Обратите пажњу на ХТМЛ унутар директиве.

буттон типе = "буттон" нг-цлицк = "делетеНоте (ноте.ид)"> × / буттон>

Следећа ствар коју ћу рећи може се чинити далеким током, али имајте на уму да смо на истој страни и то ће имати смисла након што разрадим. Када се кликне на дугме у горњем десном углу лепљиве поруке, ми зовемо делетеНоте на контролору директиве и предаје ноте.ид вредност. Затим контролер позива онделете, који затим извршава било који израз који смо до њега повезали. Засада је добро? Позивамо локални метод на контролер који га затим предаје позивањем било ког израза који је дефинисан у изолованом опсегу. Израз који се позове на родитеља једноставно се позове делетеНоте такође.

апп.дирецтиве (’стицкиНоте’, фунцтион (соцкет) {
вар контролер = функција ($ опсег) {
$ сцопе.делетеНоте = фунцтион (ид) {
$ сцопе.онделете ({
урадио сам
});
};
};

ретурн {
ограничи: „А“,
линк: линкер,
контролер: контролер,
Обим: {
напомена: ’=’,
онделете: ’&’
}
};
});

(Када се користи изоловани опсег дефинисан изразом, параметри се шаљу у мапи објеката.)

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

апп.цонтроллер (’МаинЦтрл’, функција ($ опсег, соцкет) {
$ сцопе.нотес = [];

// Долазни
соцкет.он (’онНотеДелетед’, функција (подаци) {
$ сцопе.делетеНоте (дата.ид);
});

// Одлазни
$ сцопе.делетеНоте = фунцтион (ид) {
вар олдНотес = $ сцопе.нотес,
невНотес = [];

ангулар.форЕацх (олдНотес, фунцтион (ноте) {
иф (ноте.ид! == ид) невНотес.пусх (ноте);
});

$ сцопе.нотес = невНотес;
соцкет.емит (’делетеНоте’, {ид: ид});
};
});

12. Ажурирање лепљиве белешке

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

Започећемо са стварним ДОМ елементима и пратити све до сервера и назад до клијента. Прво морамо знати када се мења наслов или тело лепљиве белешке. АнгуларЈС обрађује елементе форме као део модела података, тако да можете у једном тренутку повезати двосмерно везивање података. Да бисте то урадили, користите нг-модел директиву и ставите својство за које желите да се вежете. У овом случају ћемо користити белешка.наслов и ноте.боди редом.

Када се било које од ових својстава промени, желимо да ухватимо те податке како би их проследили. То постижемо са нг-промена директиву и користите је за позивање упдатеНоте и предати у самом објекту белешке. АнгуларЈС врши врло паметне прљаве провере да би открио да ли је вредност било чега нг-модел се променио, а затим извршава израз који је у нг-промена.

инпут нг-модел = "ноте.титле" нг-цханге = "упдатеНоте (ноте)" типе = "тект">
тектареа нг-модел = "ноте.боди" нг-цханге = "упдатеНоте (ноте)"> {{ноте.боди}} / тектареа>

Наопако коришћење нг-промена је да се локална трансформација већ догодила и ми смо само одговорни за преношење поруке. У контролеру, упдатеНоте и одатле ћемо емитовати упдатеНоте догађај за наш сервер за емитовање другим клијентима.

апп.дирецтиве (’стицкиНоте’, фунцтион (соцкет) {
вар контролер = функција ($ опсег) {
$ сцопе.упдатеНоте = функција (напомена) {
соцкет.емит (’упдатеНоте’, напомена);
};
};
});

А у управљачу директивама слушамо онНотеУпдатед догађај да бисмо знали када се белешка другог клијента ажурира како бисмо могли да ажурирамо нашу локалну верзију.

вар контролер = функција ($ опсег) {
// Долазни
соцкет.он (’онНотеУпдатед’, функција (подаци) {
// Ажурирај ако је иста белешка
иф (дата.ид == $ сцопе.ноте.ид) {

$ сцопе.ноте.титле = дата.титле;
$ сцопе.ноте.боди = дата.боди;
}
});
};

13. Премештање лепљиве белешке

У овом тренутку смо у основи направили круг око ЦРУД дечјег базена и живот је добар! Само ради трика салона да импресионирате своје пријатеље, додаћемо могућност померања бележака по екрану и ажурирање координата у реалном времену. Не паничите - то је само још неколико редова кода. Сав овај напоран рад ће се исплатити. Обећавам!

Позвали смо специјалног госта, јКуериУИ, на забаву и све смо то урадили због провлачења. Додавање могућности локалног повлачења белешке узима само један ред кода. Ако додате елемент.драггабле (); на вашу везујућу функцију почећете да чујете ‘Око тигра’ Сурвивор-а јер сада можете да вучете белешке око себе.

Желимо да знамо када је превлачење заустављено и ухватимо нове координате за пролазак даље. јКуериУИ су направили неки врло паметни људи, па када превлачење престане једноставно треба да дефинишете функцију повратног позива за заустављање. Ухватили смо ноте.ид са објекта опсега и леве и горње ЦСС вредности из уи објект. Са тим знањем радимо оно што смо радили све време: емитујте!

апп.дирецтиве (’стицкиНоте’, фунцтион (соцкет) {
вар линкер = функција (опсег, елемент, атрибути) {
елемент.драггабле ({
стоп: функција (догађај, уи) {
соцкет.емит (’мовеНоте’, {
ид: сцопе.ноте.ид,
к: уи.поситион.лефт,
и: уи.поситион.топ
});
}
});

соцкет.он (’онНотеМовед’, функција (подаци) {
// Ажурирај ако је иста белешка
иф (дата.ид == сцопе.ноте.ид) {
елемент.анимате ({
лево: дата.к,
врх: подаци.и
});
}
});
};
});

У овом тренутку не треба да чуди што такође слушамо догађај повезан са премештањем из услуге соцкет. У овом случају то је онНотеМовед догађаја и ако се напомена подудара, тада ажурирамо леву и горњу ЦСС особину. Бам! Готово!

14. Бонус

Ово је бонус одељак који не бих укључио да нисам потпуно уверен да га можете постићи за мање од 10 минута. Упоредићемо се на активни сервер (још увек сам запањен како је то лако учинити).

Прво се морате пријавити за бесплатни пробни период Нодејитсу-а. Пробни период је бесплатан 30 дана, што је савршено за влажење ногу.

Једном када креирате свој рачун, морате инсталирати јитсу пакет, што можете учинити из командне линије путем $ нпм инсталирај јитсу -г.

Затим се требате пријавити из командне линије путем $ јитсу пријава и унесите своје акредитиве.

Уверите се да сте директно у апликацији, откуцајте $ јитсу имплементација и закорачите кроз питања. Обично остављам што је више могуће према заданим поставкама, што значи да својој апликацији дајем име, али не и поддомен итд.

И драги моји пријатељи, то је све! УРЛ апликације ћете добити из резултата сервера након што се она постави и буде спремна за рад.

15. Закључак

У овом чланку смо покрили пуно АнгуларЈС-а и надам се да сте се у том процесу забавили. Мислим да је заиста лепо шта можете постићи са АнгуларЈС и Соцкет.ио у отприлике 200 редова кода.

Било је неколико ствари које нисам покривао ради фокусирања на главне ствари, али подстичем вас да повучете извор и поиграте се апликацијом. Изградили смо јаке темеље, али још увек постоји пуно функција које бисте могли да додате. Узми хаковање!

Лукас Руеббелке је технолошки ентузијаст и коаутор је АнгуларЈС-а у акцији за попуњавање публикација. Његова омиљена ствар је да људе одушеви новом технологијом као и он. Управља корисничком групом за веб апликације Пхоеник и са својим колегама у злочину угостио је више хацкатхона.

Свиђа вам се ово? Прочитајте ово!

• Како направити апликацију
• Наши омиљени веб фонтови - и не коштају ни цента
• Откријте шта следи за проширену стварност
• Преузмите бесплатне текстуре: високе резолуције и спремне за употребу сада