Категории: AngularJS

Personal Maps: локализация и интернационализация. Часть 10

Владимир | | AngularJS, JavaScript, PHP, Web разработка, Yii.

personal maps i18n

Приветствую! Это заключительная статья цикла о разработке web приложения с использованием фреймворков Yii и AngularJS. На данный момент у нас есть полностью работающее приложение, и остаётся добавить возможность перевода интерфейса на разные языки.

Примечание. Ссылки на все предыдущие статьи вы найдёте в конце этой страницы.

Вообще создание многоязычного интерфейса – задача довольно тривиальная. В большинство фреймворков (и Yii здесь не исключение) входят соответствующие библиотеки. Но в нашем случае ситуация немного сложнее из-за того, что приложение состоит из клиентской и серверной частей. При этом для обоих фреймворков (Yii и AngularJS) есть собственные средства для работы с переводами.
Читать дальше

Personal maps: REST интерфейс. Часть 8.

Владимир | | Ajax, AngularJS, PHP, Web разработка, Yii.

personal maps rest api

Приветствую, это очередная статья о разработке web приложения с использованием под названием Personal maps. В прошлый раз мы закончили разработку клиентской части приложения, а сегодня займемся созданием REST интерфейса. Ссылки на все предыдущие части вы найдёте внизу этой страницы.

Форматы запросов клиентской части к серверу и его ответов у нас уже определены. Фактически мы это сделали когда тестировали сервис Places. Теперь нам нужно реализовать поддержку этих запросов серверной частью приложения.

Создание REST сервисов с помощью Yii фреймворка

Примечание. Если вы не знакомы с общими принципами создания REST сервисов, то рекомендую прочитать статью Create a REST API with PHP.

Также напоминаю, что исходный код приложения размещён на GitHub и доступна демоверсия приложения.
Читать дальше

Personal maps: создаём директиву для подключения Google Maps. Часть 7.

Владимир | | AngularJS, HTML, JavaScript, Web разработка.

personal maps 7 directive

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

Директивы в AngularJS предназначены для работы с DOM (Document Object Model – объектная модель документа) и позволяют создавать новые компоненты или добавлять существующим новые свойства.

В Angular есть множество встроенных директив, часть из них мы уже использовали при создании представлений. Например, ngHide позволяет скрыть элемент в зависимости от значения модели, т.е. изменяет CSS стили элемента.

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

Естественно, создание собственных директив сложнее, чем использование стандартных. Нужно понимать, как решить задачу, и учитывать требования AngularJS к директивам. Но при правильном использовании директивы упрощают разработку приложения, особенно если оно сложное и содержит компоненты с похожим поведением.
Читать дальше

Personal Maps: контроллеры и представления в AngularJS. Часть 6.

Владимир | | AngularJS, JavaScript, Web разработка.

personal maps controller view

Эта статья шестая в цикле о создании небольшого web приложения под названием Personal Maps. Ссылки на все предыдущие части вы найдёте внизу страницы, а сейчас мы продолжим разработку клиентской части приложения и займёмся созданием контроллеров и представлений.

Когда я начинал разрабатывать более-менее сложные приложения на JavaScript, создание этих компонентов было одним из самых сложных моментов. Проблема была в том, что при создании клиентской части я автоматически пытался применять подходы, которые используются на сервере, и из-за этого возникали проблемы. Сбивало то, что и PHP, и JavaScript фреймворки используют модели, представления и контроллеры (MVC архитектура), но архитектура всего приложения при этом отличается.

Когда серверный фреймворк обрабатывает запрос, он с помощью роутера находит нужный метод (action) контроллера и вызывает его. В этом методе мы обрабатываем данные с помощью модели и выводим результат с помощью представления. Для следующего запроса процесс повторяется.

Но JavaScript фреймворк не получает HTTP запросов. Читать дальше

Personal Maps: тестирование AngularJS сервиса с помощью Jasmine и Karma. Часть 5.

Владимир | | Ajax, AngularJS, JavaScript, Web разработка.

personal_maps_logo_5

В прошлый раз мы создали сервис AngularJS под названием Places, через который происходит передача данных между клиентской и серверной частями приложения.

Наш сервис использует несколько встроенных компонентов Angular ($rootScope и $http) и не зависит от остальных компонентов приложения. С дугой стороны, остальные компоненты (контроллеры, директивы) используют методы сервиса. Любые изменения в названиях или количестве аргументов этих методов приведут к тому, что придется изменять все компоненты, которые их используют. Таким образом, полезно протестировать работу сервиса перед разработкой остальной части приложения. Этот подход можно использовать не только по отношению к сервисам – сначала разрабатываем и тестируем компоненты с наименьшим числом зависимостей, а затем собираем из них всё приложение.
Читать дальше

Personal Maps: создаём сервис AngularJS. Часть 4.

Владимир | | Ajax, AngularJS, JavaScript, Web разработка.

personal_maps_logo_4

Это четвёртая статья цикла о разработке web приложения под названием Personal Maps.

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

Сейчас мы переходим к практической реализации. И начнём с разработки сервиса AngularJS, который называется Places и работает с REST API серверной части приложения, т.е. выполняет операции чтения, создания, удаления и редактирования объектов, которые пользователь размещает на карте.

Начинать разработку с сервиса удобнее всего, т.к. он не зависит от других компонентов приложения (не вызывает их методы). Но остальные компоненты используют его, потому что им необходимо работать с объектами.
Читать дальше

Personal Maps: главная страница и структура клиентской части приложения. Часть 3.

Владимир | | Ajax, AngularJS, HTML, JavaScript, PHP, Web разработка, Yii.

В этой части мы начнём разрабатывать клиентскую часть приложения.

Фактически это будет одностраничное приложение, которое получает и передаёт данные с помощью REST сервисов. Основное преимущество такого подхода заключается в том, что при работе пользователя не происходит перезагрузки страницы. Если сервер окажется недоступен, пользователь увидит сообщение об ошибке и сможет продолжить работу, когда связь восстановится.

Кроме того, наше приложение показывает объекты на карте Google, и если его разрабатывать в «классическом» стиле, то переход от одного объекта к другому будет вызывать перезагрузку карты. А это, не смотря на кэширование компонентов карты браузером, негативно скажется на скорости работы интерфейса.

Читать дальше

Personal Maps: Устанавливаем и настраиваем Yii, проектируем структуру базы данных. Часть 2.

Владимир | | AngularJS, MySQL, PHP, Web разработка, Yii.

personal_maps_logo_2

Это вторая часть из серии статей о создании web приложения с использованием фреймворков Yii и AngularJS. В ней мы рассмотрим:

  • установку и предварительную настройку Yii;
  • подключение расширения Yiistrap;
  • структуру базы данных;
  • создание миграций.

Примечание. Вы можете получить исходный код на GitHub, а также поэкспериментировать с демо-версией.

Source

Demo
Читать дальше

Personal Maps: используем Yii и AngularJS для разработки web приложения. Часть 1.

Владимир | | AngularJS, JavaScript, MySQL, PHP, Web разработка.

personal_maps_logo_1

Эта статья первая из цикла о создании небольшого web приложения под названием Personal Maps. Приложение создавалось исключительно в демонстрационных целях, но, в тоже время, оно в полном объёме выполняет свои задачи. С его помощью я хочу показать пример использования нескольких инструментов «в связке», а именно: PHP фреймворка Yii, JavaScript фреймворка AngularJS, базы данных MySQL и Google Maps API.

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

Но уже сейчас код приложения доступен на Github'е. Возможно в него будут вноситься небольшие дополнения и исправления, но ничего кардинального.
Читать дальше

Google maps & AngularJS: позиционирование карты

Владимир | | Ajax, AngularJS, HTML, JavaScript, Web разработка.

google maps angularjs

Последнее время мне довольно часто приходится работать с различными фреймворками, предназначенными для разработки JavaScript приложений. В основном с Backbone.js и AngularJS. И впечатления в целом очень приятные. Они действительно позволяют ускорить разработку и упростить поддержку кода.

Естественно, всё имеет свою цену. В данном случае это «порог вхождения» и время на изучение особенностей фреймворков. Кроме того, сейчас ведётся много споров на тему того какой фреймворк лучше. Участвовать в них у меня желания нет, хотя читать такие обсуждения иногда бывает интересно 🙂 К сожалению (или к счастью), победителей в этих спорах нет и, скорее всего, не будет. В большинстве случаев, чем больше работы за вас выполняет фреймворк, тем медленнее он работает. Но, с другой стороны, при этом уменьшается время разработки.

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

В этой статье мы рассмотрим пример использования AngularJS.
Читать дальше