Pull to refresh
  • by relevance
  • by date
  • by rating

Директивы в Angularjs для начинающих. Часть 2

Website development *JavaScript *Angular *
Tutorial
На мой взгляд, директивы являются основной изюминкой декларативного стиля Angularjs. Однако, если открыть комментарии пользователей в разделе официальной документации Angularjs, посвященной директивам, то вы увидите, что самый популярный из них: «Пожалуйста, перепишите документацию, сделайте ее более доступной и структурированной. Начинающему разработчику на Angularjs сложно в ней разобраться» («Please rewrite a clearer well structured documentation of directives., this is not friendly to first time angular developers»). С этим трудно не согласится, документация пока еще сыровата и в некоторых моментах приходится прилагать большие усилия, чтобы разобраться в логике и сути функционала. Поэтому я предлагаю вам свой вольный пересказ данной главы в надежде, что кому-то это позволит сэкономить время, а так же рассчитываю на вашу поддержку и участие в комментариях. Итак, поехали!
Часть 1
Читать дальше →
Total votes 33: ↑33 and ↓0 +33
Views 116K
Comments 21

Link, $observe и $watch функции в директивах, выполняемые в контексте AngularJS

Website development *JavaScript *Angular *
Translation
Tutorial
При запуске своего кода внутри контроллера или сервиса не приходится беспокоиться о вызове $apply(), поскольку код выполняется внутри контекста Ангуляра. Под этим подразумевается, что Ангуляр понимает, что ваш код находится в процессе выполнения и выполнит грязную проверку (dirty-check) после завершения его работы. Когда же вы находитесь внутри директивы, мировоззрение Ангуляра чуть более ограничено; теперь директива должна заботиться о вызове $apply() (или вызове $apply() с чем-то вроде $timeout), когда необходимо сообщить Ангуляру об изменениях в модели представления (т. е. $scope). Однако, определить когда это нужно делать, немного сложнее, потому что некоторые аспекты директивы фактически выполняются внутри контекста Ангуляра.

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

$apply is already in progress.
$digest is already in progress.
Читать дальше →
Total votes 20: ↑20 and ↓0 +20
Views 22K
Comments 0

CornerJS, или директивы «как в AngularJS», только лучше

Uprock corporate blog Website development *JavaScript *
Sandbox
image

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

В рабочих проектах это может сводиться к чему-то вроде

function pageChange(){
    if ($(‘.element-carousel').length>0) {$('.element-carousel').initCarousel()}
    if ($('.element-scrollbox').length>0) {$('.element-scrollbox').initScrollbox()}
…


А может и не сводиться, и в каждом условном контроллере (колбэке на смену определенной страницы) мы вызываем код, связанный с определенными элементами.

Знакомо? Думаю, да. Считаете ли вы этот подход неправильным? Если первый ответ – да, то уверен, что и второй тоже да.

Хотите узнать, как можно сделать правильно, аккуратно и красиво?
Читать дальше →
Total votes 47: ↑42 and ↓5 +37
Views 12K
Comments 24

Расширение и компоновка директив

Website development *JavaScript *Angular *
Tutorial
Про директивы много написано, но мало о том как писать их правильно. Поделюсь опытом.

Хорошо написанная директива должна
  • решать одну задачу
  • легко расширяться
  • не конфликтовать с другими директивами


Разберем каждый пункт на примере поля для ввода пароля (думаю, всем знакомо поле с глазиком)

image

<input ng-model="user.password"
       ng-minlength="6"
       form-password
       form-error="Не менее 6 символов">


Сколько директив используется?
Читать дальше →
Total votes 44: ↑41 and ↓3 +38
Views 18K
Comments 5

Тонкости AngularJS: select внутри шаблона директивы

JavaScript *Angular *
Эта статья будет описывать решение одной конкретной задачи, а также на примере показывать как работает $transclude.

Задача такая: сделать директиву, обертку для select-а. Предположим, что мы хотим одним тегом добавлять сразу и селект и label к нему (потом можно будет туда добавить ошибки заполнения, но мы для простоты не будем этого делать). В общем то, на первый взгляд выглядит все просто.

Сделаем директиву и назовем ее field. Использовать будем так:

<field title="Цвет" type="select" ng-model="selectedColor" options="color.id as color.name for color in colors"></field>
Читать дальше →
Total votes 26: ↑20 and ↓6 +14
Views 23K
Comments 9

Адаптивное многоуровневое меню сайта с саморегистрируемыми пунктами на основе директивы AngularJS

JavaScript *Angular *
Sandbox
        Существует вполне обоснованное мнение, что найденный в Интернете чужой код намного лучше собственноручно написанного, т.к. его уже оттестировали тысячи ленивых разработчиков. Собственно поэтому, когда передо мной возникла задача, описанная в названии статьи, я решил не изобретать велосипед, а найти готовое решение. К моему удивлению, ни на англоязычных, ни на русскоязычных ресурсах ничего подходящего под мои запросы на основе ангуляра я не нашел. Поэтому было принято решение написать код самостоятельно и поделиться им с общественностью.

        Возможности меню, реализованные в данной статье:
  1. Вся начинка меню спрятана под капотом директивы. При верстке html страницы указывается лишь DOM-элемент с директивой, что повышает читабельность кода.
  2. У меню есть возможность создавать пункты с бесконечным уровнем вложенностей.
  3. Подсветка активной страницы в меню осуществляется не только на первом уровне, но и на любом уровне вложенности.
  4. Возможность зарегистрировать пункт меню на этапе конфигурации приложения.
  5. Возможность отображения/сокрытия конкретных пунктов меню в зависимости от прав доступа текущего пользователя.

        Исходный код директивы можно посмотреть тут.
Подробности смотри ниже
Total votes 8: ↑6 and ↓2 +4
Views 14K
Comments 0

Типы значений в CSS. Абсолютные, относительные и всякие другие

HTML Academy corporate blog Web design *Website development *CSS *HTML *

Давайте без лишних слов разберёмся, какие бывают типы значений у CSS-свойств, и определим, чем отличаются абсолютные и относительные значения (все эти em, rem, vh, vw), как задать красный цвет шестью способами, и зачем нужны CSS-директивы.

Читать далее
Total votes 15: ↑11 and ↓4 +7
Views 7.3K
Comments 0

Делаем автоматическое отображение ошибок контрола в ангуляре

JavaScript *Angular *TypeScript *
Sandbox

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

К счастью для Angular разработчиков большинство полезных инструментов для создания и работы с формами уже присутствуют в фреймворке - просто бери и используй. Однако оффициальные гайды ангуляра упускают одну очень очень важную вещь - отображение ошибок контрола.

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

Читать далее
Total votes 2: ↑2 and ↓0 +2
Views 1.3K
Comments 2