Пишу про разработку вообще и в частности про: JavaScript, HTML5, CSS3, AngularJS, ReactJS, Agile, Bitcoins

Динамичное встраивание html кода в приложение на AngularJs

Одна из самых базовых задач разработки в JavaScript – это возможность встраивать новые элементы html в уже существующий документ. Есть огромное количество решений, но в работе с AngularJs практически сразу сталкиваешься с непонятным препятствием. Если попытаться в лоб встроить новый элемент, то ангулар так просто на это не пойдет. Скорее всего результат будет следующим:

Не тот результат, которые бы хотелось получить, верно?

Дело в том, что ангулар фильтрует входящие строки и на позволяет напрямую выводить html. Сначала фреймворк ожидает получить подтверждение, что строке “можно доверять”. Сделано это из предосторожности, чтобы у не добросовестных пользователей не было простого способа встроить вредоносный код.

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

Поделиться:

Директивы – разница между compile, controller и link – AngularJS Directive

Одна из сложностей в работе с директивами в ангуларе заключается в том, что они обладают достаточно большим и гибким набором настроек. Такое количество рычагов управления по-началу приводит в ступор и замешательство. С чего начать? Какой метод применить в каком случае, особенно если они вроде как дают один и тот же результат на выходе.

Для работы с логикой директивы у нас есть аж три функции: compile, controller и link (причем последняя это частный случай compile, но об этом позже) – какую из них когда применять по-началу остается загадкой. В первую очередь давайте разберемся в какой последовательности они вызываются.

Как я уже упомянул функция link является частным случаем compile, поэтому их нельзя использовать одновременно. никакой ошибки ангулар выкидывать не будет, однако он просто не будет использовать код прописанный в функции link, если в той же директиве ему так же передается и compile. Это стоит принимать вол внимание при работе :] Давайте для начала посмотрим в какой последовательности вызываются эти функции. Для этого воспользуемся следующим кодом:

А вот и html:

После запуска мы увидим следующую картину:

See the Pen Directives – order of compile and controller by Artem Demo (@artemdemo) on CodePen.

Таким образом можно сделать следующий вывод о порядке вызова функций compile, controller и link:

1. В первую очередь ангулар вызывает controller, который получает доступ к пока еще “виртуальному” элементу, который в последствии будет добавлен в DOM

2. После этого вызывает compile pre-link. Элемент уже добавлен в DOM, при этом scope, который доступен на этой стадии является тем же $scope, который был инициализирован на стадии контроллера. Однако, еще не был активирован функционал transclude (об этом чуть ниже)

3. На последнем этапе вызывается compile post-link. Второй вариант вызова этой функии является просто через link, именно по-этому нельзя его использовать вместе с compile. Эта функция вызывается после transclude.

Теперь давайте разберемся что же такое transclude. Не смотря на достаточно суровое название смысл этого функционала достаточно просто усвоить. Transclude устанавливает порядок использования переменных с приоритетом у родительского скопа. Иными словами, если в родительском скопе и в директиве объявлена переменная с одним и тем же именем, то transclude обяжет директиву взять переменную из родительского скопа.

Ссылки по тему:
http://odetocode.com/blogs/scott/archive/2014/05/28/compile-pre-and-post-linking-in-angularjs.aspx
http://jasonmore.net/angular-js-directives-difference-controller-link/

Поделиться:

Директивы в ангулар – AngularJS Directives

Прежде чем, я начну описывать что же такое директивы давайте уделим немного внимания самому принципу работы с DOM объектами. Я думаю, что вы уже успели поработать с такими библиотеками как jQuery, либо Prototype и вам знакома конструкция вида:

Это достаточно стандартная процедура вызова функции (в моем случае с уникальным именем something) библиотеки для элемента $(‘#myElement’). jQuery (собственно, как и Prototype, просто для краткости я буду упомянуть только одну библиотеку) была создана с идеей манипуляции элементами DOM’а. Вы напрямую указываете нужный тег, либо создаете таковой и прописываете те действия, которые должны будут к нему применены.

В случае с ангуларом ситуация совершенно иная. AngularJS придерживается декларативного подхода в работе с элементами. Это означает, что вместо того, чтобы указывать как объект должен себя вести (императивный подход), мы описываем свойства этого объекта. А для добавления нового объекта в DOM ангулар использует диретивы:

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

Но в этой статье я коснусь только тегов.

Директива в ангуларе объявляется следующим образом:

Давайте разберем все элементы:

restrict – отвечает за то как будет использована директива – в качестве элемента “E”, аттрибута “A”, класса “C”, либо комментария “M”.

template – темплейт директивы, отвечает за “начинку”.

replace – отвечает за то будет ли заменена директива на темплейт, либо темплейт будет импортирован внутрь.

link – отвечает за логику работы дирктивы и здесь может быть прописан весь ее функционал. Стоит отметить, что в ангуларе предоствляет три метода для работы с логикой директивы: compile, link и controller. О разнице между ними мы поговорим в другой раз.

Рабочий пример директивы:

See the Pen Пример директивы в ангуларе by Artem Demo (@artemdemo) on CodePen.

Поделиться:

[Rest-App] – разработка браузерного мобильного приложения с использование AngularJS и jQuery Mobile – пятое видео

В этом видео:
1. Коррекция предыдущего кода
2. Новый функционал
3. Добавление виджета – списка с выбором нескольких элементов

Файлы пятой части проекта со всеми изменениями можно скачать здесь.

Поделиться:

[Rest-App] – разработка браузерного мобильного приложения с использование AngularJS и jQuery Mobile – четвертое видео

Итак, я продолжаю серию видео о создании браузерного приложения. В этом видео:
1. Создание новой страницы
2. Работа с директивами ангулара
3. Передача данных через factory
4. Использование $broadcast

Файлы проекта со всеми изменениями можно скачать здесь.

Поделиться:

[Rest-App] – использование обещаний, promise в AngularJS и страницы в jQuery Mobile – третье видео

В этом видео мы начинаем разработку приложения. И сразу с корабля на бал, я затронул следующие темы:
1. Создание страницы в jQuery Mobile
2. Использование обещаний в ангулар – promise AngularJS
3. Ajax запросы средствами ангулар – $http AngularJS

Файлы проекта со всеми изменениями можно скачать здесь.

Базовый пакет файлов без изменений можно скачать тут.

Ссылки по теме:
Введение в обещания в ангулар – promises в AngularJS

Поделиться:

[Rest-App] – разработка браузерного мобильного приложения с использование AngularJS и jQuery Mobile – второе видео

Первое обзорное видео о создании браузерного мобильного приложения с использованием AngularJS и jQuery Mobile

Все файлы проекта можно скачать здесь.

Поделиться:

Анонс – [Rest-app] разработка браузерного мобильного приложения с использование AngularJS и jQuery Mobile

Я готовлю серию видео о разработке браузерного мобильного приложения с использованием AngularJS и jQuery Mobile. Основные причины почему я решил использовать эти две технологии я перечислил в видео ниже, но если коротко, то Ionic хорошо поддерживает только последние версии iOs и Android, а вот с Windows Phone проблема.

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

Пример приложения, которое можно увидеть в самом видео. Итак, работы предстоит много, так что самое время запастись попкорном и приготовиться следить за обновлениями :]

Поделиться:

Genymotion не доволен

Сегодня, в 9 часов вечера случилось непредвиденное. Genymotion – самый лучший эмулятор для андроида – перестал работать!

Ну как перестал – открываться то он открывался, но вот запускать сам эмулятор для нексуса наотрез отказался. Говорит мол VirtualBox не красиво себя ведет, так что работать я отказываюсь. Отлично, разве может быть что-то лучше?

Я уже грешным делом подумал, что настройки как-то слетали, а то я последнее время много экспериментировал, что с VirtualBox, что с Genymotion. Но, нет с настройками оказалось все хорошо. В итоге все разрешилось установкой последней версии VirtualBox. Работа работой, а прогресс по расписанию!

Поделиться:

Объекты в JavaScript или что за чертовщина происходит со строкой.

Этот пост скорее попытка получить некоторое понимание о том, что такое JavaScript в основе своей, нежели получить конкретные практические навыки. Мне нравится изучать “темные уголки” программирования, только в таких местах ты начинаешь понимать где разработчики шли на компромиссы, чтобы получить более результативный продукт.

Если углубиться в изучение JavaScript и внимательно посмотреть на то работу с переменными, то складывается впечатление, что вообще все в этом языке – это объект. Для примера, давайте посмотрим на переменную String:

Этот пример можно сократить сильнее, добавив еще больше неразберихи:

Какой вывод при этом напрашивается? Что переменная строки – это объект, потому что она ведет себя как объект. Что же, если переменная строки это объект, то к ней можно добавить метод и вызвать его. Например:

То есть с одной стороны “Some string” реагирует как объект, когда мы вызываем метод length, а с другой на нее нельзя повесить новую функцию? Какой же это объект тогда? Однако, это не единственный способ добавить метод объекту. Мы может использовать прототипирование:

Сработало! Если добавить функцию через прототип, то ее можно вызвать через переменную строки! Чудеса. Однако, как оказалось, этому есть объяснение. В первую очередь в JavaScript не все является объектом. Происходит следующее – в тот момент когда мы вызываем метод на переменной строки:

JavaScript на самом деле превращает ее в объект. Для наглядности, это можно изобразить вот так:

После того, как объект возвращает метод, то JavaScript его убивает и восстанавливает равновесие :] Круто!

Поделиться: