Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Laravel

AngularJS и Laravel: Заканчиваем Создание CRM

by
Read Time:13 minsLanguages:
This post is part of a series called Building a Customer Management App Using AngularJS and Laravel.
AngularJS and Laravel: Begin Building a CRM

Russian (Pусский) translation by Ilya Nikov (you can also view the original English article)

При создании одностраничного приложения мы должны использовать какой-то фреймворк для выполнения некоторых задач для нас, чтобы мы могли сосредоточиться на фактической функциональности.

AngularJS отлично подходит здесь, потому что такие функции, как динамическая инъекция зависимостей и привязка двунаправленных данных, просто великолепны. Иногда нам также нужен какой-то сервер. Если вы выбрали PHP, то Laravel может быть вашим лучшим вариантом, так как с ним легко и довольно эффективно работать.

В этой части учебника мы будем строить интерфейс нашего приложения с помощью AngularJS. Angular - действительно уникальный фреймворк. Вместо абстрагирования HTML или предоставления некоторого способа манипуляции с DOM они расширили HTML, чтобы иметь дело с тем, для чего он, конечно же, не предназначен - для работы с динамическими данными.

Из-за этого чтобы освоить Angular может понадобиться немного больше обучения, чем для других фреймворков, но это действительно стоит потраченного времени.


Подготовка

Прежде чем мы начнем программировать наш интерфейс, мы должны немного изменить часть Laravel. Перейдите в app/views, удалите код примера, который там есть, и создайте файл с именем home.php. Теперь давайте создадим макет.

Начните с DOCTYPE и тега html:

Как вы можете видеть, мы уже используем некоторые вещи AngularJS - директиву ng-app. Это говорит, что Angular использует модуль с именем app для этого приложения (мы его определим позже). После этого добавьте head с заголовком и CSS:

Теперь вы можете поместить теги script c Angular, его модуль маршрутизации и само наше приложение:

Эта директива сообщает Angular, что нужно поместить шаблон, который был запрошен в этот элемент.

После этого нам нужно добавить маршрут, чтобы отобразить шаблон (в app/routes.php). Добавьте это до маршрутов для контроллеров:

Теперь, если вы запустите сервер (с помощью php artisan serve), вы должны увидеть наш основной макет, когда вы переходите по адресу http://localhost:8000/ в вашем браузере:

Стили

В этой статье не будет сосредоточено внимание на чем-либо, связанном с CSS, но чтобы во время разработки сделать приложение более приятным для глаз, мы добавим к нему какой-нибудь стиль. Перейдите в каталог public/ вашего приложения (это рядом с app/) и создайте style.css с этим кодом внутри:

Теперь откройте приложение в своем браузере, и макет должен быть ориентирован на более удобный шрифт в заголовке:

Основная структура приложения

Мы начнем с объявления модуля. Модули в Angular - это почти то же самое, что и в любой библиотеке AMD, но с добавлением инъекции зависимостей, которая является действительно полезной вещью, как вы увидите дальше. Вот объявление нашего модуля app:

Синтаксис прост - сначала идет имя модуля, а затем массив зависимостей - мы будем использовать ngRoute здесь для обработки навигации.

Маршрутизация

Маршрутизация определена в методе модуля config():

Вот когда инъекция зависимостей запускается в первый раз - наш обратный вызов возьмет $routeProvider в качестве единственного аргумента, и Angeular сам подставим этот модуль.

Вы должны убедиться, что имена аргументов точно такие же, как имена модулей, потому что Angular использует их для соответствия соответствующим модулям.

Теперь давайте уже фактически использовать $routeProvider для настройки маршрутов:

Как вы можете видеть, чтобы определить маршрут, вы должны вызвать метод when() провайдера (обратите внимание, что они могут быть выстроены в цепочку).

Первым параметром является URI, а второй - объект с параметрами маршрута. Здесь мы прикрепляем соответствующие контроллеры и шаблоны к каждому маршруту. Во втором мы также используем в конце :id, чтобы отметить параметр маршрута, который мы будем использовать позже. Метод otherwise() определяет, что произойдет, если будет совершен доступен любому другому URI.


Factory

Прежде чем писать контроллеры, мы должны создать вещь, называемую factory. factory - это функция, которая возвращает сервис, что полезно, если вы хотите отделить любые функции получения/настройки данных от контроллеров (что, конечно же, вы всегда хотите сделать). Мы определяем его с использованием метода factory() модуля:

Первый параметр - это имя службы, а второе - функция, которая возвращает службу, которая будет создана с использованием этой фабрики.

Мы будем использовать модуль $http для доступа к нашему серверу с помощью Ajax. Он предоставляет методы быстрого доступа для всех HTTP-методов, и каждый из них возвращает обещание (если вы не знаете, что это такое, посмотрите здесь и здесь).

Мы должны вернуть сервис как объект со всеми методами, которые будут использоваться в наших контроллерах:

Первый получит с помощью GET запроса всех клиентов, чтобы мы могли показать их в списке:

Второй из них будет получать через GET только одного клиента по его id:

Третий будет отправлять POST запрос на добавление пользователя в базу данных:

Второй аргумент в $http.post() - это данные, которые будут отправлены на сервер.

Далее DELETE клиента с предоставленным id:

Теперь для транзакций будет несколько похоже. Один, чтобы получить все из них:

Один для добавления нового:

И один для удаления:

Контроллер клиентов

Контроллеры в Angular (как и предполагает название) позволяют управлять поведением приложения. У нас будет один для каждого шаблона. Сначала мы сделаем один для главной страницы. Начните с определения:

Второй параметр здесь - это функция конструктора для контроллера. Это первый аргумент ($scope) - это связь между DOM и контроллером. Это сердце двунаправленной привязки данных. Второй - это сервис с фабрикой, который мы создали ранее.

Получение списка

Теперь мы получим список клиентов с сервера, используя наш сервис:

Все обещания в Angular предоставляют методы success() и error(), которые могут использоваться для добавления соответствующих обратных вызовов. Теперь давайте определим функцию, которая будет анализировать входящие данные, чтобы отобразить их на странице:

Да, это все, что требуется чтобы наполнить шаблон данными. Не требуется никакого внутреннего кода вида innerHTML/appendChild().

Добавление новых клиентов

Мы также должны предоставить возможность добавлять и удалять клиентов. Сначала давайте создадим объект в области, где мы будем хранить данные нового клиента:

Таким образом, мы можем избежать доступа к DOM, когда пользователь добавляет клиента. Теперь функция, которая фактически добавит клиента:

Поскольку полное имя пользователя будет отображаться в таблице, поле для него будет таким же, поэтому мы должны разбить его, чтобы получить имя и фамилию:

Теперь мы вызываем соответствующую функцию нашей фабрики с данными из $scope:

После этого мы добавляем слушателей для успеха и ошибок к возвращенному обещанию:

Давайте сначала определим обратный вызов успеха:

Аргумент data содержит текст ответа. Нам нужно очистить переменную $scope.error:

Добавьте нового клиента в $scope.customers:

И установите $scope.newCustomer в исходное состояние, чтобы очистить поля ввода:

Обратный вызов ошибки просто установит переменную $scope.error в текст, полученный с сервера:

Удаление клиентов

Функция удаления клиента будет принимать его id в качестве параметра:

Мы также отобразим окно подтверждения, чтобы у пользователя появилась возможность отменить действие:

Если пользователь уверен, что он хочет продолжить, мы удаляем клиента:

Обратный вызов здесь должен будет удалить клиента из $scope.customers, используя идентификатор, полученный с сервера:

Результат

Полный код должен выглядеть следующим образом:

Шаблоны клиентов

Теперь, чтобы фактически показать данные нашим пользователям, мы должны создать шаблон. Мы определили его в маршруте, который должен быть ./templates/customers.html, поэтому создайте каталог public/templates и в нем файл customers.html.

Сначала добавьте заголовок, чтобы пользователь знал, где он:

Затем нам понадобится таблица с хорошим заголовком для отображения данных:

Теперь добавьте элемент tbody. И вот тут снова появляется волшебство Angular's. Используя директиву ng-repeat, мы указываем Angular, чтобы он повторил элемент:

Синтаксис такой же, как у цикла JavaScript for ... in. Теперь мы можем получить доступ к переменной customer, чтобы получить все необходимые нам данные. В Angular вы вставляете переменные, используя двойные фигурные скобки:

Существует также директива ng-click, которая будет действовать как обратный вызов события onclick, мы используем ее для добавления возможности удаления клиентов. Далее есть футер с полями воода, чтобы пользователь мог добавлять новых клиентов:

Мы используем директиву ng-model для привязки соответствующих переменных из области видимости к полям, поэтому они обновляются каждый раз, когда происходит изменение значения входных данных.

Последнее, что нужно сделать, это показать сообщение об ошибке, если оно есть. Для этого мы будем использовать директиву ng-show, которая будет отображать элемент только в том случае, если указанное выражение истинно:

Это оно! Теперь вы можете открыть приложение в своем браузере, и вы должны увидеть это:

Вы можете добавить нового клиента, щелкнув знак «плюс» в правом нижнем углу таблицы.


Клиентский контроллер

Теперь давайте создадим контроллер для представления с одним клиентом:

Получение данных

Мы получаем данные клиента с помощью модуля $routeParams, который содержит все параметры маршрута, такие как :id, указанный нами ранее:

Обратный вызов почти такой же, как в CustomerController. Теперь давайте получим все транзакции клиента:

Обратный вызов немного отличается от последнего, потому что мы также хотим показать сумму сумм транзакций. Нам нужно использовать parseFloat(), потому что Laravel отправляет float как строки.

Добавление новых транзакций

Код будет очень похож на тот, который используется для создания новых клиентов:

Единственное различие заключается в том, что мы добавляем идентификатор клиента к данным, чтобы сервер знал, какая транзакция есть. Обратный вызов успеха также немного изменен, потому что мы должны проанализировать float перед добавлением его в область $scope, и мы должны прибавить эту сумму к нашей итоговой сумме.

Удаление транзакций

Код для функции removeTransaction() почти идентичен removeCustomer, и отличается только именами переменных:

Результат

Весь контроллер должен выглядеть так:

Шаблон клиента

Шаблон для одного клиента не имеет новых директив Angular, поэтому просто создайте файл customer.html в каталоге public/templates/ и поместите туда весь этот код:

Обратите внимание, что мы используем toFixed(2) для округления float, поэтому у них будет только два десятичных знака.

Теперь вы можете открыть браузер и нажать на одного из созданных вами клиентов. Вы должны увидеть контроллер и шаблон в действии:


Вывод

Теперь, если вы добавили некоторые функции после первой части, в том числе и в интерфейсе, нужно добавить еще несколько строк в разных местах.

Я надеюсь, что после того, как вы прочтете эту статью, и закончите работу над вашим приложением, вы начнете думать о том, как создавать другие одностраничные приложения с AngularJS и  Laravel. Дайте мне знать, если у вас возникли проблемы с любым из представленных здесь фреймворком.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.