Angular *

В этой статье мы соберём вместе aiorest + jinja2 + angular.js + gulp.js + bower.js + nginx. В результате мы получим:

• авто-перезапуск сервера при изменении python-кода и jinja-шаблонов
• сборка, минификация и автоматическая пересборка при изменении клиентского js-кода

Начнём с главного — как пользоваться, а затем я подробнее опишу некоторые моменты реализации. Если вам легче читать код — вот ссылка на репу.

Когда возникает идея создать что-нибудь полезное, обычно очень хочется сделать прототип (или версию 1.0) как можно скорее. Для кого-то, видеть быстрый результат — это хорошая мотивация, чтобы развивать идею дальше; для других — главное «начать», всем известная истина, что доделывать/переделывать готовое намного легче, чем писать с нуля. Итак, в процессе очередного чаепития и обсуждения финансовых рынков, у нас появилась идея создания легкого сервиса для обмена идей и новостей, а также определения текущей ситуации на фынансовых рынках (т.н. тренды) — ведь зная тренды, можно более эффективно торговать.
В требованиях были: веб сервис, мобильная версия (желательно app), легкая коллективная админ-часть, и простой интерфейс.
Как у нас получилось мега-быстро «слепить» одновременно и веб и мобильную версию приложения CxInvestor и пойдет речь в этой статье.

Разработка

Первый вопрос, который нужно было решить — на чем писать сервер.

Дорогие Хабролюбители, всем привет! Не откроем Америку если скажем, что существуют сотни плагинов и библиотек, которые облегчают специализированные задачи, связанные с построением современных web интерфейсов. Angular один из них, про его производительность писалось много и в большинстве случаев даются рекомендации чего не нужно делать, чтобы все было хорошо.

Основной аргумент сторонников — медленно работают неправильные приложения, а вот правильные не должны содержать более 2000-3000 элементов. Если содержит больше значит что-то не так. См. например http://iantonov.me/page/angularjs-osnovy.

Аргумент в общем вполне здравый, но всегда есть ситуации, когда нужно написать «неправильное» web приложение потому, что такие требования. В этой статье мы решили рассказать как раз про такую задачу, и как мы ее решили. На наш взгляд статья будет полезна в большей степени профессиональным веб разработчикам. Итак, наша задача была сделать календарь для системы бронирования для одного спортивного клуба. Календарь отображает семь 12–часовых блоков, каждый день из которых разделен на 15 минутные интервалы. В блоке может быть от 2-х до 10 DOM элементов. Вроде ничего не предвещало беды, верхняя граница ~3000.

Немного о контроллерах директив. Зачем они нужны и чем отличаются от функции link.

Несомненно, ангуляр даёт вам силу. Но пользоваться ей нужно с умом. Я постарался сформулировать три простых правила, которые я много раз нарушал и страдал от этого.

Про редактор Ace, думаю знают все, а сегодня у нас возникла срочная необходимость прикрутить редактор кода с подсветкой синтаксиса к проекту на AngularJS, наткнулся на этот пост — действительно быстро привязал к проекту. Подумал будет полезно многим новичкам — решил перевести, благо короткий. Для удобства расшарил пример в jsfiddle.
Примечание — громкое название (включающее IDE) взято из оригинала статьи — автор был под впечатлением, фактически — это краткое и удобное руководство по подключению Ace в AngularJS
Перевод:
Иногда ты сталкиваешься с технологией которая заставит остановиться и задуматься о том как далеко продвинулась веб разработка в последние несколько лет. Для меня одной из таких технологий стал проект Ace. Если Вы незнакомы с ним, Асе, это «высокопроизводительный редактор кода для веба». Он позволяет Вам создавать сайты позволяющие пользователю писать код непосредсвено в их браузере. LearnAngular широко использует Ace.

В этом посте мы рассмотрим как интегрировать редактор Ace в приложение AngularJS с помощью модуля от AngularUI.

От переводчика:

Привет, Хабр! Мы мы продолжаем делится с сообществом полезными материалами о разработке и дизайне. В этот раз команда TrackDuck подготовили перевод статьи Jeff Dickey о Angular, которая нам очень понравилась и в свое время заставила пристальней присмотреться к Gulp. Эта статья будет полезна разработчиками, которые хотят сэкономить время на рутинных операциях и построить качественные процессы при разработке веб-приложений. Мы активно используем Angular для разработки собственного продукта для визуального комментирования веб-сайтов, поэтому готовы ответить в комментариях на интересующие вас вопросы!

Я использовал Angular в довольно большом количестве приложений и видел много способов структурирования приложений с использованием этого фрэймворка. Сейчас я пишу книгу о проектировании Angular приложений c использованием MEAN стека, и больше всего исследований я провел в этом направлении. В итоге я остановился на довольно оригинальной структуре приложения. Я считаю, что мой подход более простой чем тот, что предложил Burke Holland.
Прежде чем начать, я хотел бы рассказать о существующем подходе к реализации модульности в Angular.

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

Поиск и якорь

Предположим, что нам поступила задача разработать клиентскую часть для нашего нового проекта. Это каталог, в котором будут храниться сотни тысяч документов. Поскольку он довольно большой, в API предусмотрена возможность загружать элементы постранично (с указанием начального индекса) а также фильтровать по отдельным полям в документе.
А для того, чтобы пользователи не терялись в системе и могли делиться между собой информацией, клиент должен сохранять свое состояние в адресной строке.

Что ж, задание понятно. Приступаем.

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

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

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

<field title="Цвет" type="select" ng-model="selectedColor" options="color.id as color.name for color in colors"></field>

Во время разработки проектов мы полюбили AngularJs. Но также мы встретили некоторые трудности в борьбе за чистоту модульности, с которой AngularJs справляется хорошо, но все же порой ему чего-то не хватает. RequireJs оказывается полезным там, где AngularJs оставляет желать лучшего, но использование их вместе — не совсем тривиальная задача.

Итак, опишем наш взгляд на решение проблемы.

Для чего?

Работая с AngularJs вы обязательно задумаетесь о правильной организации кода. Конечно уже существуют отличные примеры решения проблемы. Например можно изучить теоретический пост Брайана Форда или практическое руководство Клиффа Мейерса. Я же поделюсь способом организации кода в приложениях AngularJs с использованием RequireJs.

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

• перестать беспокоиться о подключении скриптов в правильном порядке;
• загружать javascript код асинхронно;
• иметь возможность скомпилировать код в один минифицированный JS-файл;

Не так давно я уже писал про поведение ng-if директивы, но тогда я столкнулся с проверкой условия, но сегодня возникла другая проблема.

В проекте достаточно много таких элементов как tooltip, popover, modal windows и так далее. Думаю, все вы понимаете, что это за элементы и рассказывать про них я не буду. Для многих из них используется абсолютное позиционирование. Если бы мы не использовали кастомные директивы, то проблем бы не было — все модальные окна лежали бы в конце body и показывались бы когда нужно. Но так, как все эти элементы объявлены как директивы, возникает проблема с позиционированием, так как у директивы может быть родитель с относительным позиционированием и так далее.

<div style="position: relative; overflow:hidden">
  <button ng-click="visible = true">Greeting</button>

  <modal visible="visible">
      Hello, Habr!
  </modal>
</div>

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

Начнем с простого примера. Создадим страницу с информацией о книге. Контроллер:

В проекте используется angularjs, проект уже достаточно большой, используем очень много кастомных директив, но сегодня столкнулся с проблемой поведения ng-if .

Для меня было ожидаемо, что условие работает так же как и в js, то есть:

if (condition) {
 ...
} else {
 ....
}

В зависимости, что передано — элемент будет скрыт или показан.

После публикации статьи «Яндекс.Карты для angular.js утекло немало воды, а также появились новые возможности. В настоящий момент в модуль angular.js для использования карт „Яндекса“ на ваших страницах добавлена поддержка версии 2.1 yandex map api. Не скажу, что суть модуля сильно поменялась, но все же некоторые изменения были внесены. Хотите знать какие, добро пожаловать под кат.

Магия AngularJS: никогда не вешайте binding на примитивы

Если вы используете AngularJS, скорее всего вы неоднократно сталкивались с правилом «Не вешайте binding на примитивы». В этом посте я подробно разберу пример, в котором использование примитивов создает проблемы: создание списка элементов , в котором каждый из элементов привязан к строке.

Наш пример

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

<div ng-controller="bookCtrl">
    <div ng-repeat="tag in book.tags">
        <input type="text" ng-model="tag">
    </div>
</div>

5 причин использовать AngularJS в вашем корпоративном приложении

Нынешнюю ситуация в мире корпоративных приложений можно описать одним словом: хаос.

Начиная с устаревшего кода, который в течении N лет переходил от разработчика к разработчику без всякой документации. До слишком сложных интерфейсов, которые слишком усложняют код. До смешивания вместе N технологий в одном единственном приложении. Посмотрим фактам в лицо: когда эти вещи создавались, никто не задумывался об их поддержке. Сегодня мы столкнулись с проблемой – как исправить все эти приложения? С чего начать? Как привнести в них здравый смысл? Как привести их к современному технологическому стеку?

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

Итак, а как вообще принятно решать проблему сборки в последнее время? Grunt/Gulp плагины, require.js, browserify — самые популярные варианты.

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

Если у вас простейшее приложение, которое состоит из нескольких файлов:

app.js
controllers.js
services.js
directives.js
filters.js

То никаких проблем нет. Вы можете вручную прописать порядок их подключения в том же Grunt/Gulp.

Но, допустим, если вы захотите реализовать такую архитектуру, при которой каждый отдельный сервис, контроллер, директива и т. д. находятся в отдельных файлах, то есть:

app.js
controllers/
	FirstCtrl.js
	SecondCtrl.js
services/
	FirstSrv.js
	SecondSrv.js

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

Всем привет!

Пару дней назад мне на почту пришло письмо от Codeschool.com, в котором очень красочно (как можно заметить из картинки в шапке поста) представлялся новый курс по AngularJS. Т.к. платной подписки у меня сейчас нет, я решил отложить просмотр до лучших времён, а сегодня случайно узнал, что курс оказывается «Sponsored by Google», а соответственно бесплатный. Закончив работу над первым уровнем, я поспешил проверить наличие заметки об этом чудном событии на Хабре, но с удивлением обнаружил, что никто до сих пор не поделился этой новостью. Значит придётся взять всё в свои руки.

В дополнение к этому посту.

Кто не знает, есть такая штука ui-router. Замена стандартного роутера Ангуляра. Учитывая, что в Ангуляре 2.0 планируют запилить нечто подобное, вскоре этот роутер станет стандартом.

С помощью него можно строить приложение, например, так:

Нашёл любопытный инструмент для облегчения структуры контроллеров — Angular Classy. Он представляет из себя модуль, размером в 1 килобайт (gzipped and minified), и помимо представления контроллера в виде объекта даёт ряд полезных плюшек, рассказ о которых под катом.