✅ Създавайте динамични маршрути с AngularJS ngRoute

Съдържание

Използване на ngRoute
Използване на маршрути
Устойчивост на данните
Как да създадете динамични маршрути

ЗабележкаЗа да изпълните този урок, препоръчително е да имате ясна основа AngularJS, тъй като няма да навлизаме в подробности за някои технически аспекти на тази технология.

Докато знаем, AngularJS Той ни предоставя голям брой модули, услуги и филтри, които са полезни при създаването на уеб или мобилно приложение за днес. Има и други модули, които не можем да намерим в основата на тази рамка, един от тях е ngRoute. Този модул има функцията да използва приятелски URL адреси, като му присвоява контролер и шаблон, който се извиква автоматично чрез Ajax.

Повече информация за ngRoute:

Използване на ngRoute

Първо създаваме нашата директория на проекта, ще я наречем routeapp, в тази директория създаваме друга, наречена публична, публично създаваме файл index.html. Сега, вътрешно публично, създаваме директория, наречена js, където ще поставим нашите ъглови файлове. Вътре в js започваме да поставяме два първи файла, наречени app.js и controller.js

Можем да получим всички текущи версии на angularjs на тази връзка: https://code.angularjs.org/. За да използваме урока, ще използваме версия 1.5.5 https://code.angularjs.org/1.5.5/
Index.html код

 Динамичен маршрут на Ng

App.js код

 angular.module ('routeapp', ['ngRoute', 'routeapp.controller']);

Controller.js код

 angular.module ('routeapp.controller', []) .controller ('MainController', function () {console.log ('AngularJS');});

Сега изпълняваме това на уеб сървър. Можете да използвате каквото искате, било то Apache, nginx, Tomcat и т.н. За моя случай ще използвам express от nodejs. Ако искате да го направите и с nodejs, можете да изпълните следните стъпки. Ако никога не сте използвали nodejs, можете да следвате следния урок, където е обяснено:

Създайте архитектура на интерфейса с npm, bower и grunt.

Използваме следната команда в корена на проекта от командния ред.

 npm ini

 npm install --save-dev express

След експресна инсталация създаваме файл в корена на проекта, наречен server.js и добавяме следния код:

 var express = require ('express'); var app = express (); var port = Number (process.env.PORT || 3000); app.use (express.static (__ dirname + '/ public')); app.listen (порт, функция () {console.log ('Приложението е стартирано на http: // localhost:' + порт);});

Сега изпълняваме командата:

 възел server.js

за стартиране на уеб сървъра.

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

Сега нека направим използване на ngRoute.

Използване на маршрути

Ще използваме ъглова конфигурационна функция за създаване на маршрутите на нашето уеб приложение.

 .config (функция ($ routeProvider) {$ routeProvider .when ('/ home', {templateUrl: 'tpl/ home.html', контролер: 'HomeController'}). в противен случай ({redirectTo: '/ home'}); })

App.js код

/У дома: URI за нашата начална страница.
templateURL: пътя на нашия шаблон за дома.
контролер: Контролерът, назначен за домашния шаблон.
В противен случай: Поставете нашия уебсайт в / home по подразбиране

Създаваме нова директория в публичното пространство, наречена tpl, и вътре в tpl създаваме файл, наречен home.html.

Вътре в тялото на index.html добавяме div таг с атрибута ng-view който ще отговаря за изобразяването на шаблона home.html и бъдещите шаблони, които ще създадем в урока.

Информация за ngView:

Код в index.html:

Добавяме домашния контролер controller.js

 .controller ('HomeController', function () {console.log ('HomeController');})

Ако всичко върви правилно, трябва да получите нещо като следното изображение:

Устойчивост на данните

Вече тествахме, че нашата маршрутна услуга работи правилно, продължаваме със създаването на модул за управление на потребители, в този модул можем да създаваме, изброяваме, редактираме и изтриваме потребители. За урока не е нужно да комуникираме с бекенд, който ще направим постоянство на данни с масив, което означава, че тези данни са временни и че всеки път, когато опресняваме приложението, тези данни ще бъдат загубени.

Започваме със създаването на следните файлове services.js Y values.js в директорията js

 angular.module ('routeapp.values', []) .value ('Потребители', []);

Values.js код

 angular.module ('routeapp.services', ['routeapp.values']) .factory ('Бази данни', ['Потребители', функция (Потребители) {return {DataUser: {add: function (user) {Users.push (потребител);}, списък: функция () {връщане на потребители;}, актуализация: функция (индекс, потребител) {връщане на потребители [индекс] = потребител;}, get: функция (индекс) {връщане на потребители [индекс];} , унищожи: function (index) {return Users.splice (index, 1);}}};}]) .factory ('Util', [function () {return {clone: function (obj) {if ( null = = obj || "обект"! = typeof obj) връщане obj; var copy = obj.constructor (); for (var attr in obj) {if (obj.hasOwnProperty (attr)) копиране [attr] = obj [ attr];} връщане на копие;}}}]);

Services.js код

В услуги js създаваме две фабрики, наречени Бази данни Y Полезен.

Бази данни: Той ще се погрижи за постоянството на данните за потребителските записи (използвайки функции за добавяне, актуализиране, списък, получаване, унищожаване).

Полезен: Той ще служи като клониране на данните, които ще ни трябват, когато регистрираме потребител.

Ние инжектираме модула за услуги в нашия app.js

 routeapp.services

Кодът за първия ред на app.js ще изглежда така:

 angular.module ('routeapp', ['ngRoute', 'routeapp.controller', 'routeapp.services'])

Сега остава само да запазим скриптовете services.js и values.js в index.html, да ги поставим пред скрипта app.js, за да избегнем всякакви неудобства при изпълнението на приложението.

Преди да продължим, нека тестваме, че нашето приложение не представя грешки в конзолата за разработка. По този начин файловете са създадени досега.

Продължаваме да създаваме шаблони за регистрация и списък с потребители. Ние създаваме в рамките на tpl към user.html и user-list.html

Потребителско име Имейл Запазване

User.html код

 
 
 Потребител  Име  Поща 

 
 {{item.username}}  {{име на предмета}}  {{item.email}}

Потребител	Име	Поща
{{item.username}}	{{име на предмета}}	{{item.email}}

Код user-list.html

В рамките на controller.js добавяме контролера за user.html и user-list.html

 .controller ('UserController', функция ($ обхват, бази данни, помощна програма) {$ scope.user = {}; $ scope.save = function () {var user = Util.clone ($ scope.user); Databases.DataUser .add (потребител); $ scope.user = {};};}) .controller ('UserListController', функция ($ scope, бази данни) {$ scope.dataUser = Databases.DataUser.list ();})

Controller.js код

Добавете в index.html връзките за достъп до двата шаблона:


Регистрирайте потребителя
Консултирайте се с потребителя

Добавено в index.html

Трябва само да добавим новите маршрути, които сме създали към конфигурацията на app.js, да ги поставим преди иначе функционира:

 .when (' / user', {templateUrl: 'tpl / user.html', controller: 'UserController'}) .when (' / user / list', {templateUrl: 'tpl / user-list.html', контролер : 'UserListController'})

Да видим как върви всичко дотук.

Увеличете

Тествайте, като регистрирате множество потребители и проверите дали се регистрират правилно от Консултирайте се с потребителите.

Готови, сега продължаваме с актуализирането и елиминирането на потребителите. За да актуализирате потребител, просто добавете нова функционалност към UserController, променяме предишния код за този нов:

 .controller ('UserController', функция ($ scope, Databases, Util, $ routeParams, $ location) {var userID = $ routeParams.userID; var isEdit = (userID! = undefined); $ scope.user = {}; ако (isEdit) {$ scope.user = Databases.DataUser.get (userID);} $ scope.save = function () {var user = Util.clone ($ scope.user); if (isEdit) {Databases.DataUser. update (userID, user); $ location.path (' / user / list');} else {Databases.DataUser.add (user);} $ scope.user = {};};})

Обяснение на новия код:

$ routeParams: Тази услуга ще върне параметрите GET на нашето приложение, в този случай ще я използваме, за да върнем идентификационния номер на потребителя, който ще актуализираме. $ routeParams.userID. Повече информация за $ routerParams https: //docs.angular … ce /$ routeParams

Трябва също да добавим нов път в конфигурацията на app.js:

 .when (' / user /: userID', {templateUrl: 'tpl / user.html', контролер: 'UserController'})

Важно е да поставите този нов път под пътя ' / user / list', така че да ни представи конфликт с споменатия последен.

' / user /: userID': Както виждаме, този URL адрес има нещо специално, наречено: userID, това е параметърът, който ще използваме в UserController.

Остава само да добавим нова колона в user-list.html, където ще добавим връзка за редактиране на регистрирания потребител.

 редактиране

Код в user-list.html

Сега остава само да тестваме тази нова операция, да опресним приложението, да се регистрираме и след това да редактираме потребителя.

Трябва само да добавим функционалността, за да изтрием потребителите. Създаваме нов шаблон в tpl, наречен user-delete.html

Искате да премахнете {{user.name}}?Премахване

User-delete.html код

Добавяме нова връзка в таблицата user-list.html за достъп до шаблона user-delete.html

 Премахване

Добавяме в controller.js контролера за user-delete.html, наречен UserDeleteController

 .controller ('UserDeleteController', функция ($ обхват, бази данни, $ routeParams, $ местоположение) {var userID = $ routeParams.userID; $ scope.user = Databases.DataUser.get (userID); $ scope.destroy = function ( ) {Databases.DataUser.destroy (userID); $ location.path (' / user / list');}})

И добавяме пътя в конфигурацията на app.js

 .when (' / user / delete /: userID', {templateUrl: 'tpl / user-delete.html', контролер: 'UserDeleteController'})

Ние опресняваме приложението, регистрираме се и след това тестваме операцията за премахване на потребителя.

Приключихме нашето основно приложение! Вече усвоихме създаването на ръчни маршрути в нашето приложение, но ако се вгледаме внимателно и видим какви маршрути са изградени:

/У дома
/ потребител
/ потребител / списък
/ потребител /: потребителски идентификатор
/ user / delete /: userID

Създадохме 4 маршрута за потребителския модул за постоянство плюс началния. Ако трябваше да създадем други модули за устойчивост в нашето приложение, като продукти, клиенти, продажби и т.н. Ще трябва да създадем още 12 маршрута. Което би накарало нашия app.js файл да расте всеки път, когато добавим нови маршрути. За да избегнем това, ще създадем динамичен генератор на маршрути, за да избегнем това главоболие.

Как да създадете динамични маршрути

Нека разгледаме внимателно нашите текущи маршрути, за да създадем нов потребител, който използваме маршрута / потребителя.

За запитване към потребители / потребител / списък
За да го редактирате / user /: userID
За изтриване / user / delete /: userID.

Можем да създадем някои маршрути, където се използват само един, два или три параметъра и те ги улавят, използвайте ги по наш вкус. Това би изглеждало така:

Трябва да изясним нещо, за да работят динамично маршрутите, трябва да спазваме следните правила, за да ги обясним, ще използваме същия пример за потребител:

1. Името потребител трябва да се използва както като шаблон, така и като префикс на контролер.

2. За заявките като втори префикс в урока използваме списъка с думи, по същия начин можете да го промените на каквото искате, но думата, която използвате, трябва да я има както в името на шаблона, така и в името на контролера. Например: user-list.html и UserListController; за изтриване: user-delete.html и UserDeleteController

3. За да идентифицирате префиксите в контролерите, използвайте главни букви.

4. Имената на контролерите винаги трябва да завършват с думата Controller.

 var route = {controller: 'RouteController', templateUrl: function (uri) {var pattern = new RegExp ("[0-9] +"); var part_uri = (! pattern.test (uri.param2) && typeof uri.param2! == 'undefined')? '-' + uri.param2: ''; връщане 'tpl /' + uri.param1 + part_uri + '.html'; }}; $ routeProvider .when (' /: param1', route) .when (' /: param1 /: param2', route) .when (' /: param1 /: param2 /: param3', route). в противен случай ({redirectTo: '/У дома'});

Код в app.js

Ние създаваме три модела на пътя, така че когато имате само един параметър, той ще работи за / user и / home. За два параметъра / потребител /: потребителски идентификатор и / потребител / списък. За три параметъра / user / delete /: userID

Също така трябва да създадем нов контролер, който ще отговаря за ръководството на различните контролери в зависимост от URI.

 .controller ('RouteController', функция ($ scope, $ routeParams, $ controller, $ filter) {var prefix = $ filter ('prefixController') ($ routeParams.param1) + '' + $ filter ('prefixController') ( $ routeParams.param2); $ контролер (префикс + 'Контролер', {$ обхват: $ обхват});})

Код на RouteController

Този контролер от своя страна зависи от филтър, създаваме нов файл в директорията js, наречен filters.js

 angular.module ('routeapp.filters', []) .filter ('prefixController', function () {функция за връщане (текст) {if (typeof text === 'undefined') {return '';} var p_string = нов RegExp ('[az] + [0-9] *'); var p_int = нов RegExp ("[0-9] +"); if (p_int.test (text)) {return '';} else if (p_string.test (text)) {return text.charAt (0) .toUpperCase () + ((text.length> 1)? text.slice (1): '');} else {return '';}};});

Filters.js код

Ние инжектираме филтъра в app.js

 routeapp.filters

Импортираме скрипта filters.js в index.html, поставен преди app.js

Трябва да променим един последен детайл UserController Y UserDeleteController. Тъй като сега използваме параметри: param1 ,: param2 ,: param3; параметърът: userID вече няма да е наличен. Което трябва да променим в контролерите. За UserController използвайте param2, а за UserDeleteController param3

Код UserController:

 var userID = $ routeParams.param2;

Код UserDeleteController:

 var userID = $ routeParams.param3;

Финализирахме нашия динамичен рутер. Вече не трябва да се притесняваме за създаването на нови маршрути до нашия сайт, тъй като всичко се контролира от нас RouterController и новата конфигурация на $ routerProvider, можете да го тествате, като създадете нови шаблони и зададете неговите маршрути и контролери. И накрая, можем да създадем нов шаблон, който да ни помогне да открием, когато се опитваме да получим достъп до URL адрес, който не е намерен на нашия сайт. Можем да използваме шаблон 404. Ще го създадем в tpl с името 404.html

Код за 404.html

404 Контролер контролер

 .controller ('404Controller', function () {})

За да можем да открием при опит за достъп до недостъпен маршрут, можем да използваме a слушател на angularjs който се грижи за него. Заменяме кода на MainController чрез следното:

 .controller ('MainController', function ($ scope, $ location) {console.log ('AngularJS'); $ scope. $ on ('$ routeChangeError', функция (next, current) {$ location.path ('/ 404 ');});})

Просто стартирайте приложението и поставете URL адрес, който не е наличен на нашия сайт, например http: // localhost: 300… unknown-url. Приложението незабавно ще пренасочи към / 404