БелешкаЗа извођење овог водича препоручљиво је имати јасну основу АнгуларЈС, будући да нећемо улазити у детаље о неким техничким аспектима ове технологије.
Док знамо, АнгуларЈС Пружа нам велики број модула, услуга и филтера који су нам корисни при изради веб или мобилне апликације за данас. Постоје и други модули које не можемо пронаћи у језгри овог оквира, један од њих је нгРоуте. Овај модул има функцију коришћења пријатељских УРЛ адреса додељујући му контролер и шаблон који се аутоматски позива преко Ајака.
Више информација о нгРоуте:
Коришћење нгРоуте
Прво креирамо наш директориј пројекта, назват ћемо га роутеапп, унутар овог директорија креирамо други који се зове јавни, у јавности стварамо датотеку индек.хтмл. Сада унутар публиц -а стварамо директориј зван јс у који ћемо поставити наше угаоне датотеке. Унутар јс -а почињемо да постављамо две прве датотеке под називом апп.јс и цонтроллер.јс
Све тренутне верзије ангуларјс -а можемо добити на овој вези: хттпс://цоде.ангуларјс.орг/. За коришћење водича користићемо верзију 1.5.5 хттпс://цоде.ангуларјс.орг/1.5.5/
Индек.хтмл код
Динамичка рута нгАпп.јс код
ангулар.модуле ('роутеапп', ['нгРоуте', 'роутеапп.цонтроллер']);Цонтроллер.јс код
ангулар.модуле ('роутеапп.цонтроллер', []) .цонтроллер ('МаинЦонтроллер', фунцтион () {цонсоле.лог ('АнгуларЈС');});Сада ово покрећемо на веб серверу. Можете користити шта год желите, било да је то Апацхе, нгинк, Томцат итд. У мом случају користићу екпресс фром нодејс. Ако то желите и са нодејс -ом, можете следити следеће кораке. Ако никада нисте користили нодејс, можете следити следећи водич у коме је објашњено:
- Креирајте предњу архитектуру са нпм, бовер и грунт.
Користимо следећу команду у корену пројекта из командне линије.
нпм ини
нпм инсталл --саве-дев екпрессПосле експресна инсталација стварамо датотеку у корену пројекта под називом сервер.јс и додајемо следећи код:
вар екпресс = рекуире ('екпресс'); вар апп = екпресс (); вар порт = Број (процесс.енв.ПОРТ || 3000); апп.усе (екпресс.статиц (__ дирнаме + '/ публиц')); апп.листен (порт, фунцтион () {цонсоле.лог ('Апликација је покренута на хттп: // лоцалхост:' + порт);});Сада извршавамо наредбу:
чвор сервер.јсда бисте покренули веб сервер.
Када покрећете веб сервер, проверите да ли је конзола прегледача елемената прегледача унела реч АнгуларЈС.
Урадимо сада употреба нгРоуте.
Коришћење рута
Користићемо функција угаоне конфигурације за креирање рута нашег вебапп -а.
.цонфиг (функција ($ роутеПровидер) {$ роутеПровидер .вхен ('/ хоме', {темплатеУрл: 'тпл/ хоме.хтмл', контролер: 'ХомеЦонтроллер'}). другачије ({редирецтТо: '/ хоме'}); }) Апп.јс код- /кућа: УРИ за нашу почетну страницу.
- темплатеУРЛ: пут нашег предлошка за дом.
- контролер: Контролер додељен за кућни предложак.
- Иначе: Подразумевано поставите нашу веб локацију у / хоме
Унутар тела индек.хтмл додајемо див ознаку са атрибутом нг-виев који ће бити задужен за приказивање предлошка хоме.хтмл и будућих предложака које ћемо створити у водичу.
Информације о нгВиев:
Код у индек.хтмл:
Додајемо кућни контролер цонтроллер.јс .цонтроллер ('ХомеЦонтроллер', фунцтион () {цонсоле.лог ('ХомеЦонтроллер');})Ако је све прошло како треба, требало би да добијете нешто попут следеће слике:
Постојаност података
Већ смо тестирали да ли наш сервис за руте ради исправно, настављамо са креирањем модула за управљање корисницима, у овом модулу можемо креирати, листати, уређивати и брисати кориснике. За водич не морамо да комуницирамо са позадином, која урадићемо истрајност података са низом, што значи да су ти подаци привремени и да ће се сваки пут када освјежимо апликацију наведени подаци изгубити.
Почињемо стварањем следећих датотека сервицес.јс И валуес.јс унутар јс директоријума
ангулар.модуле ('роутеапп.валуес', []) .валуе ('Корисници', []); Код Валуес.јс
ангулар.модуле ('роутеапп.сервицес', ['роутеапп.валуес']) .фацтори ('Базе података', ['Корисници', функција (Корисници) {ретурн {ДатаУсер: {адд: фунцтион (усер) {Усерс.пусх (усер);}, лист: фунцтион () {ретурн Усерс;}, упдате: фунцтион (индек, усер) {ретурн Усерс [индек] = усер;}, гет: фунцтион (индек) {ретурн Усерс [индек];} , делете: фунцтион (индек) {ретурн Усерс.сплице (индек, 1);}}};}]) .фацтори ('Утил', [фунцтион () {ретурн {цлоне: фунцтион (обј) {иф ( нулл = = обј || "објекат"! = типеобј) ретурн обј; вар цопи = обј.цонструцтор (); фор (вар аттр ин обј) {иф (обј.хасОвнПроперти (аттр)) цопи [аттр] = обј [ аттр];} врати копију;}}}]); Сервицес.јс код
У сервисима јс стварамо две фабрике тзв Базе података И Корисно.
- Базе података: Побринуће се за постојаност података записа корисника (помоћу функција додавања, ажурирања, листања, добијања, уништавања).
- Корисно: Служиће као клонирање података који ће нам бити потребни када региструјемо корисника.
Убацујемо модул услуга у наш апп.јс
роутеапп.сервицесКод за прву линију апп.јс би изгледао овако:
ангулар.модуле ('роутеапп', ['нгРоуте', 'роутеапп.цонтроллер', 'роутеапп.сервицес'])Сада морамо само да сачувамо скрипте сервицес.јс и валуес.јс у индек.хтмл, поставимо их испред скрипте апп.јс да бисмо избегли било какве непријатности у извршавању апликације.
Пре него што наставимо, хајде да тестирамо да ли наша апликација не представља грешке у развојној конзоли. Овако су датотеке до сада настајале.
Настављамо са креирањем шаблона за регистрацију и листу корисника. Креирамо унутар тпл-а на усер.хтмл и усер-лист.хтмл
Корисничко име Име Емаил СачувајУсер.хтмл код
| Корисник | Име | Пошта |
|---|---|---|
| {{итем.усернаме}} | {{Назив производа}} | {{итем.емаил}} |
У склопу цонтроллер.јс додајемо контролер за усер.хтмл и усер-лист.хтмл
.цонтроллер ('УсерЦонтроллер', фунцтион ($ сцопе, Датабасес, Утил) {$ сцопе.усер = {}; $ сцопе.саве = фунцтион () {вар усер = Утил.цлоне ($ сцопе.усер); Датабасес.ДатаУсер .адд (усер); $ сцопе.усер = {};};}) .цонтроллер ('УсерЛистЦонтроллер', функција ($ сцопе, Датабасес) {$ сцопе.датаУсер = Датабасес.ДатаУсер.лист ();})Цонтроллер.јс код
Додајте у индек.хтмл везе за приступ два предлошка:
- Регистер Усер
- Консултујте корисника
Морамо само додати нове руте које смо креирали у конфигурацију апп.јс, поставити их испред иначе функционишу:
.вхен (' / усер', {темплатеУрл: 'тпл / усер.хтмл', цонтроллер: 'УсерЦонтроллер'}) .вхен (' / усер / лист', {темплатеУрл: 'тпл / усер-лист.хтмл', контролер : 'УсерЛистЦонтроллер'}) Да видимо како се све одвија до сада.
ЕНЛАРГЕ
Тестирајте тако што ћете регистровати више корисника и проверити да ли се исправно региструју са Консултујте кориснике.
Спремни, сада настављамо са ажурирањем и уклањањем корисника. Да бисте ажурирали корисника, само додајте нову функцију УсерЦонтроллер, мењамо претходни код за овај нови:
.цонтроллер ('УсерЦонтроллер', функција ($ сцопе, Датабасес, Утил, $ роутеПарамс, $ лоцатион) {вар усерИД = $ роутеПарамс.усерИД; вар исЕдит = (усерИД! = ундефинед); $ сцопе.усер = {}; иф (исЕдит) {$ сцопе.усер = Датабасес.ДатаУсер.гет (усерИД);} $ сцопе.саве = фунцтион () {вар усер = Утил.цлоне ($ сцопе.усер); иф (исЕдит) {Датабасес.ДатаУсер. упдате (усерИД, усер); $ лоцатион.патх (' / усер / лист');} елсе {Датабасес.ДатаУсер.адд (усер);} $ сцопе.усер = {};};}) Објашњење новог кода:- $ роутеПарамс: Ова услуга ће вратити ГЕТ параметре наше апликације, у овом случају ћемо је користити за враћање ИД -а корисника којег ћемо ажурирати. $ роутеПарамс.усерИД. Више информација о $ роутерПарамс хттпс: //доцс.ангулар … це /$ роутеПарамс
Такође морамо додати нову путању у конфигурацију апп.јс:
.вхен (' / усер /: усерИД', {темплатеУрл: 'тпл / усер.хтмл', контролер: 'УсерЦонтроллер'})Важно је поставити ову нову путању под путању ' / корисник / листа', тако да ће нам представити сукоб са поменутим.
- ' / усер /: усерИД': Као што видимо, овај УРЛ има нешто посебно што се зове: усерИД, ово је параметар који ћемо користити у УсерЦонтроллер -у.
Остаје само да додамо нову колону у усер-лист.хтмл где ћемо додати везу за уређивање регистрованог корисника.
Код у усер-лист.хтмлУредити
Сада морамо само да тестирамо ову нову операцију, освежимо апликацију, региструјемо се и уредимо корисника.
Морамо само додати функционалност за брисање корисника. Креирамо нови шаблон у тпл-у под називом усер-делете.хтмл
Желите да уклоните {{корисничко име}}?Уклони Код за брисање корисника.хтмл
Додајемо нову везу у табелу усер-лист.хтмл за приступ шаблону усер-делете.хтмл
Додамо у цонтроллер.јс контролер за усер-делете.хтмл који се зове УсерДелетеЦонтроллерУклони
.цонтроллер ('УсерДелетеЦонтроллер', функција ($ сцопе, Датабасес, $ роутеПарамс, $ лоцатион) {вар усерИД = $ роутеПарамс.усерИД; $ сцопе.усер = Датабасес.ДатаУсер.гет (усерИД); $ сцопе.дестрои = фунцтион ( ) {Датабасес.ДатаУсер.дестрои (усерИД); $ лоцатион.патх (' / усер / лист');}}) И додајемо путању у конфигурацију апп.јс
.вхен (' / усер / делете /: усерИД', {темплатеУрл: 'тпл / усер-делете.хтмл', контролер: 'УсерДелетеЦонтроллер'})Освежавамо апликацију, региструјемо се и затим тестирамо операцију уклањања корисника.
Завршили смо нашу основну апликацију! У нашој апликацији смо већ савладали стварање ручних рута, али ако пажљиво погледамо и видимо које су руте изграђене:
- /кућа
- / корисник
- / корисник / листа
- / усер /: усерИД
- / усер / делете /: усерИД
Како створити динамичке руте
Погледајмо изблиза наше тренутне руте, да бисмо створили новог корисника који користимо руту / корисника.
- Да бисте упитали кориснике / корисника / листу
- Да бисте га уредили / усер /: усерИД
- За брисање / усер / делете /: усерИД.
Можемо створити неке руте у којима се користе само један, два или три параметра и они их хватају, користимо их по свом укусу. То би изгледало овако:
Морамо нешто разјаснити, да би динамичке руте исправно радиле, морамо следити следећа правила, да бисмо их објаснили користићемо исти пример корисника:
1. Име корисника треба користити и као предложак и као префикс контролера.
2. За упите као други префикс у водичу користимо списак речи, на исти начин можете га променити у шта год желите, али реч коју користите мора да је има и у називу шаблона и у имену контролора. На пример: усер-лист.хтмл и УсерЛистЦонтроллер; за брисање: усер-делете.хтмл и УсерДелетеЦонтроллер
3. Да бисте идентификовали префиксе у контролерима, користите велика слова.
4. Називи контролера увек морају да завршавају речју Контролер.
вар роуте = {цонтроллер: 'РоутеЦонтроллер', темплатеУрл: фунцтион (ури) {вар паттерн = нев РегЕкп ("[0-9] +"); вар парт_ури = (! паттерн.тест (ури.парам2) && типеоф ури.парам2! == 'ундефинед')? '-' + ури.парам2: ''; ретурн 'тпл /' + ури.парам1 + парт_ури + '.хтмл'; }}; $ роутеПровидер .вхен (' /: парам1', роуте) .вхен (' /: парам1 /: парам2', роуте) .вхен (' /: парам1 /: парам2 /: парам3', роуте) .инаце ({редирецтТо: '/кућа'}); Код у апп.јс
Креирамо три обрасца пута, па када имате само један параметар, он би радио за / усер и / хоме. За два параметра / корисник /: кориснички ИД и / корисник / листа. За три параметра / усер / делете /: усерИД
Такође морамо да створимо нови контролер који ће бити задужен за вођење различитих контролера у зависности од УРИ -а.
.цонтроллер ('РоутеЦонтроллер', функција ($ сцопе, $ роутеПарамс, $ цонтроллер, $ филтер) {вар префик = $ филтер ('префикЦонтроллер') ($ роутеПарамс.парам1) + '' + $ филтер ('префикЦонтроллер') ( $ роутеПарамс.парам2); $ цонтроллер (префикс + 'Цонтроллер', {$ сцопе: $ сцопе});}) Код РоутеЦонтроллер
Овај контролер заузврат зависи од филтера, креирамо нову датотеку у јс директоријуму под називом филтерс.јс
ангулар.модуле ('роутеапп.филтерс', []) .филтер ('префикЦонтроллер', фунцтион () {ретурн фунцтион (тект) {иф (типеоф тект === 'ундефинед') {ретурн '';} вар п_стринг = нови РегЕкп ('[аз] + [0-9] *'); вар п_инт = нови РегЕкп ("[0-9] +"); иф (п_инт.тест (тект)) {ретурн '';} елсе иф (п_стринг.тест (тект)) {ретурн тект.цхарАт (0) .тоУпперЦасе () + ((тект.ленгтх> 1)? тект.слице (1): '');} елсе {ретурн '';}};}); Филтерс.јс код
Убризгавамо филтер у апп.јс
роутеапп.филтерсУвозимо филтер.јс скрипту у индек.хтмл постављен пре апп.јс
Морамо да променимо последњи детаљ УсерЦонтроллер И УсерДелетеЦонтроллер. Као и сада користимо параметре: парам1 ,: парам2 ,: парам3; параметар: усерИД више неће бити доступан. Што морамо да променимо у контролерима. За УсерЦонтроллер користите парам2, а за УсерДелетеЦонтроллер парам3
Код УсерЦонтроллер:
вар усерИД = $ роутеПарамс.парам2;Код УсерДелетеЦонтроллер:
вар усерИД = $ роутеПарамс.парам3;Завршили смо наш динамички рутер. Сада више не морамо бринути о стварању нових рута до наше странице јер све контролишемо ми РоутерЦонтроллер и нову конфигурацију $ роутерПровидер, можете је тестирати стварањем нових предложака и додељивањем његових рута и контролера. Коначно, можемо створити нови предложак који нам може помоћи да откријемо покушај приступа УРЛ -у који се не налази на нашој веб страници. Можемо користити шаблон 404. Креираћемо га у тпл -у са именом 404.хтмл
Код за 404.хтмл
404 Контролер контролера
.цонтроллер ('404Цонтроллер', фунцтион () {})Да бисмо могли открити када покушавамо приступити недоступној рути, можемо користити а ангуларјс слушалац ко о томе води рачуна. Замењујемо код МаинЦонтроллер следећим:
.цонтроллер ('МаинЦонтроллер', фунцтион ($ сцопе, $ лоцатион) {цонсоле.лог ('АнгуларЈС'); $ сцопе. $ он ('$ роутеЦхангеЕррор', фунцтион (нект, цуррент) {$ лоцатион.патх ('/ 404 ');});}) Само покрените апликацију и ставите УРЛ који није доступан на нашој веб локацији, на пример хттп: // лоцалхост: 300… ункновн-урл. Апликација ће одмах преусмерити на / 404
Можете преузмите овај демо туторијал овде:
роутеапп.зип 344.9К 259 преузимања
