Архивы за месяц: сентября 2013

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

Владимир | 29 сентября, 2013 | AngularJS, HTML, JavaScript, Web разработка.

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

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

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

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

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

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

Владимир | 22 сентября, 2013 | AngularJS, JavaScript, Web разработка.

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

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

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

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

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

Владимир | 15 сентября, 2013 | Ajax, AngularJS, JavaScript, Web разработка.

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

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

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

Владимир | 8 сентября, 2013 | Ajax, AngularJS, JavaScript, Web разработка.

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

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

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

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

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

Владимир | 1 сентября, 2013 | Ajax, AngularJS, HTML, JavaScript, PHP, Web разработка, Yii.

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

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

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