примечание
Для реализации этого руководства желательно иметь четкие основы AngularJS, поскольку мы не будем вдаваться в подробности о некоторых технических аспектах этой технологии.
Хотя мы знаем, AngularJS предоставляет нам большое количество модулей, сервисов и фильтров, которые отлично подходят для нас при создании веб-приложений или мобильных приложений на сегодняшний день. Есть другие модули, которые мы не находим в ядре этой платформы, одним из них является ngRoute. Этот модуль имеет функцию использования дружественных URL, назначая контроллер и шаблон, который автоматически вызывается через Ajax.
Больше информации о ngRoute:
ngRoute Официальный
Использование NgRoute
Сначала мы создаем наш каталог проектов, мы будем называть его routeapp, внутри этого каталога мы создаем еще один с именем public, публично мы создаем файл index.html. Теперь внутри public мы создаем каталог с именем js, куда мы собираемся поместить наш угловой файл. Внутри js мы начинаем размещать два первых файла с именами app.js и controller.js
Мы можем получить все текущие версии angularjs по этой ссылке: //code.angularjs.org/. Для использования учебника мы будем использовать версию 1.5.5 //code.angularjs.org/1.5.5/
Index.html code
Ng Динамический маршрутКод App.js
angular.module ('routeapp', ['ngRoute', 'routeapp.controller']); Код Controller.js angular.module ('routeapp.controller', []) .controller ('MainController', function () {console.log ('AngularJS');}); Теперь мы запускаем это на веб-сервере. Вы можете использовать тот, который вам нравится, будь то Apache, nginx, Tomcat и т. Д. Для моего случая я буду использовать nodejs express. Если вы также хотите сделать это с помощью nodejs, вы можете выполнить следующие шаги. Если вы никогда не использовали nodejs, вы можете следовать следующему руководству, где оно объяснено: - Создавайте интерфейсную архитектуру с npm, bower и grunt.
Мы используем следующую команду в корне проекта из командной строки.
нпм ини
npm install --save-dev expressПосле установки 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 (port, function () {console.log ('Приложение запущено по адресу http: // localhost:' + port);}); Теперь мы выполняем команду: узел server.jsЗапустить веб-сервер.
Когда вы запускаете веб-сервер, убедитесь, что консоль инспектора элементов вашего браузера написала слово AngularJS .
Теперь мы будем использовать ngRoute .
Использование маршрутов
Мы будем использовать функцию углового конфигурирования для создания маршрутов нашего веб-приложения.
.config (function ($ routeProvider) {$ routeProvider .when ('/ home', {templateUrl: 'tpl / home.html', controller: 'HomeController'}) .otherwise ({redirectTo: '/ home'}); }) Код App.js - / home: URI для нашей домашней страницы.
- templateURL: маршрут нашего домашнего шаблона.
- контроллер: контроллер, назначенный домашнему шаблону.
- В противном случае: разместите наш сайт по умолчанию в / home
Внутри тела index.html мы добавляем тег div с атрибутом ng-view, который будет отвечать за отображение шаблона home.html и будущих шаблонов, которые мы будем создавать в этом руководстве.Добро пожаловать в мое приложение
Информация о ngView:
ngView
Код в index.html:
Добавляем домашний контроллер в controller.js
.controller ('HomeController', function () {console.log ('HomeController');}) Если все прошло правильно, вы должны получить что-то вроде следующего изображения:
Постоянство данных
Мы уже доказали, что наша служба маршрутов работает правильно, мы продолжаем создавать модуль для управления пользователями, в этом модуле мы можем создавать, перечислять, редактировать и удалять пользователей. В этом уроке нам не нужно связываться с бэкэндом, который сохранит данные с помощью массива, что означает, что эти данные являются временными и что каждый раз, когда мы обновляем приложение, такие данные будут потеряны.$config[ads_text5] not found
Мы начнем с создания следующих файлов services.js и values.js внутри каталога js
angular.module ('routeapp.values', []) .value ('Users', []); Код Values.js angular.module ('routeapp.services', ['routeapp.values']) .factory ('Базы данных', ['Users', функция (Users) {return {DataUser: {add: function (user) {Users.push (user);}, list: function () {return Users;}, update: function (index, user) {return Users [index] = user;}, get: function (index) {return Users [index];}, destroy: function (index) {return Users.splice (index, 1);}}};}]) .factory ('Util', [function () {return {clone: function (obj) {if (null = = obj || "object"! = typeof obj) вернуть obj; var copy = obj.builder (); for (var attr in obj) {if (obj.hasOwnProperty (attr)) copy [attr] = obj [attr] ;} вернуть копию;}}}]); Код services.jsВ сервисах js мы создаем две фабрики под названием Базы данных и Util.
- Базы данных: он позаботится о сохранении данных пользовательских записей (используя функции add, update, list, get, destroy) .
- Полезно: он будет служить нам клоном данных, которые нам понадобятся при регистрации пользователя.
Мы внедряем сервисный модуль в наш 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.name{{}} Item.email
Внутри controller.js мы добавляем драйвер для user.html и user-list.html
.controller ('UserController', функция ($ scope, Databases, Util) {$ scope.user = {}; $ scope.save = function () {var user = Util.clone ($ scope.user); Databases.DataUser .add (пользователь); $ scope.user = {};};}) .controller ('UserListController', функция ($ scope, Databases) {$ scope.dataUser = Databases.DataUser.list ();}) Код Controller.js$config[ads_text5] not foundДобавьте в index.html ссылки для доступа к двум шаблонам:
- Зарегистрировать пользователя
- Проконсультируйтесь с пользователем
Нам просто нужно добавить в конфигурационный файл app.js новые маршруты, которые мы создали, поместите их перед функцией в противном случае :
.when ('/ user', {templateUrl: 'tpl / user.html', контроллер: 'UserController'}) .when ('/ user / list', {templateUrl: 'tpl / user-list.html', контроллер : 'UserListController'}) Давайте посмотрим, как все идет так далеко.
Попробуйте зарегистрировать нескольких пользователей и убедиться, что они регистрируются правильно в Consult Users.
Готовы, теперь мы продолжаем обновление и удаление пользователей. Чтобы обновить пользователя, просто добавьте новую функциональность в UserController, мы изменим предыдущий код на новый:
.controller ('UserController', функция ($ scope, Базы данных, 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 //docs.angular...ce/$routeParams
Мы также должны добавить новый маршрут в config.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-delete.htmlУдалить пользователя
Вы хотите удалить {{user.name}} ?
удаление
Мы добавляем новую ссылку в таблицу user-list.html для доступа к шаблону user-delete.html.
Мы добавляем в controller.js драйвер для user-delete.html с именем UserDeleteControllerудаление
.controller ('UserDeleteController', функция ($ scope, Database, $ routeParams, $ location) {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'}) Мы обновляем приложение, регистрируем и затем тестируем операцию удаления пользователя.$config[ads_text5] not found
Мы завершили нашу базовую заявку! Мы уже освоили создание ручных маршрутов в нашем приложении, но если мы посмотрим внимательнее и посмотрим, что такое построенные маршруты:
- / дом
- / пользователь
- / пользователь / список
- / user /: userID
- / user / delete /: userID
Как создавать динамические маршруты
Давайте проанализируем наши текущие маршруты, чтобы создать нового пользователя мы используем маршрут / пользователя.
- Ознакомиться с пользователями / пользователем / списком
- Чтобы отредактировать его / user /: userID
- Удалить / пользователь / удалить /: 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: ''; return 'tpl /' + uri.param1 + part_uri + '.html'; }}; $ routeProvider .when ('/: param1', route) .when ('/: param1 /: param2', route) .when ('/: param1 /: param2 /: param3', route) .otherwise ({redirectTo: '/ home'}); Код в app.jsМы создаем три шаблона маршрута, когда у вас есть только один параметр функции для / user и / home. Для двух параметров / user /: userID и / user / list. Для трех параметров / пользователь / удалить /: userID
Нам также необходимо создать новый контроллер, который будет отвечать за управление различными контроллерами в зависимости от URI.
.controller ('RouteController', функция ($ scope, $ routeParams, $ controller, $ filter) {var prefix = $ filter ('prefixController') ($ routeParams.param1) + '' + $ filter ('prefixController') ( $ routeParams.param2); $ controller (префикс + 'Controller', {$ scope: $ scope});}) Код RouteControllerЭтот контроллер в свою очередь зависит от фильтра, мы создаем новый файл в каталоге js с именем filters.js
angular.module ('routeapp.filters', []) .filter ('prefixController', function () {return function (text) {if (typeof text === 'undefined') {return '';} var p_string = new RegExp ('[az] + [0-9] *'); var p_int = new RegExp ("[0-9] +"); if (p_int.test (text)) {return '';} иначе, если (p_string.test (text)) {return text.charAt (0) .toUpperCase () + ((text.length> 1)? text.slice (1): '');} else {return '';}} ;}); Код Filters.js$config[ads_text5] not foundВставляем фильтр в app.js
routeapp.filtersМы импортируем скрипт filters.js в файл index.html, расположенный перед app.js Нам нужно изменить одну последнюю деталь в UserController и 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$config[ads_text6] not found
Код для 404.html
404 Контроллер контроллераК сожалению, этот раздел недоступен в нашем приложении.
.controller ('404Controller', function () {}) Чтобы мы могли определить, когда вы пытаетесь получить доступ к недоступному маршруту, мы можем использовать прослушиватель angularjs, который позаботится об этом. Мы заменяем код MainController следующим: .controller ('MainController', функция ($ scope, $ location) {console.log ('AngularJS');; $ scope. $ on ('$ routeChangeError', функция (следующая, текущая) {$ location.path ('/ 404 ');});}) Просто запустите приложение и разместите URL, недоступный на нашем сайте, например, //localhost:300...url-desknown. Приложение будет немедленно перенаправлено на / 404
Вы можете скачать это учебное демо здесь:
routeapp.zip 344, 9 тыс. 181 скачиваний
СТАТЬИ