Angular *

Модернизация любого сайта похожа на плавание в незнакомых водах — никогда не знаешь, на какие подводные рифы натолкнешься. А что, если ваш сайт — это большая запутанная система, состоящая из множества каналов, каждый из которых ещё и построен на своем стеке технологий? Можно не только выбрать неправильный курс, но и утонуть, пытаясь разобраться во всех особенностях функционирования сайта заказчиков.

В сегодняшней статье мы бы хотели поделиться опытом успешной модернизации с помощью Аdobe Experience Manager и рассказать, как применить данное решение для мультиканального сайта.


Читать далее

Здравствуйте!

Недавно мне довелось адаптировать ui-select под x-editable в Ангуляре и поскольку для этого пришлось потратить определенное количество времени, собирая по крупицам наиболее приемлемый вариант, сегодня я решил поделиться своими наработками с вами, в надежде на то, что кому-нибудь это сэкономит время.

Если вкратце, то полученная в итоге директива замещает стандартный editable-select, плюс дополнительная возможность добавлять объекты на лету.

Не так давно в мире web-разработки произошло важное событие — вышла бета Angular 2. И уже можно строить предположения о том, как он будет выглядеть после релиза.

Но оценка сама по себе, в вакууме, напоминает выбор электроники по рекламным буклетам производителя. Все фишки, которые есть в гаджете, упомянуты. А все, которых нет — не упомянуты и мы можем про их существование даже не задуматься. Поэтому гораздо эффективнее оценивать сравнивая с чем-то еще.

Так и родилась мысль сравнить Angular 2 с новым, но весьма амбициозным проектом Aurelia, который так же недавно вышел в бету. А заодно пополнить копилку Хабра информацией об этом фреймворке, поскольку пока ее гораздо меньше, чем информации об Angular 2.

В последнее время на хабре стало популярно делать собственные поисковики по RuTracker. Мне это показалось прекрасным поводом для того, чтобы отойти от скучной enterprise разработки и попробовать что-нибудь новое.



Итак, задача: реализовать на локалхосте поисковик по базе The Pirate Bay и попутно попробовать, что же такое frontend разработка и с чем её едят. Задача осложняется тем, что TPB не публикует своих дампов, в отличие от RuTracker, и для получения дампов требуется распарсить их сайт. В результате гугления и осмысления задачи я решил в качестве поисковика использовать Elasticsearch, для которого написать client-side only фронтенд на AngularJS. Для получения данных я решил написать собственный парсер сайта TPB и отдельный загружатель дампа в индекс, оба на Go. Пикантность выбору придавал тот факт, что ни к Elasticsearch, ни к AngularJS я до этого ни разу не прикасался и именно их опробывание было моей настоящей целью.

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

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

Многие впервые увидев синтаксис шаблонов Angular2 начинают причитать, мол ужас какой сделали, неужто нельзя было как в Angular1 хотя-бы. Зачем нужно было вводить это разнообразие скобочек, звездочек и прочей ерунды! Однако при ближайшем рассмотрении все становится куда проще, главное не пугаться.

Так как шаблоны в AngularJS являются неотъемлемой его частью, важно разобраться с ними в самом начале знакомства с новой версии этого фреймворка. Заодно обсудим, какие преимущества дает нам данный синтаксис по сравнению с angular 1.x. Причем лучше всего будет рассматривать это на небольших примерах.

Данная статья во многом основана на материалах этих двух статей:

• Angular2: синтаксис шаблонов
• Angular2: Синтаксис биндинга данных

Для того, что бы упростить подачу материала, давайте разберемся. Под AngularJS я буду подразумевать всю ветку Angular 1.x, в то время как под Angular2 — ветку 2.x.

Так же спасибо господину Bronx за ценное дополнение, которое я включил в текст статьи.

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

Примечание от переводчика: перевести эту статью меня побудила запись в соц сети от автора, запись была следующего содержания: "#Angular2 для #dartlang 11.7 KB меньше чем JS версия. Я выжал что мог из обоих.". Меня это ошеломило, как так, транслируемый язык, который тянет хаки для собственной работы, кроссбраузерность и еще кучу библиотек помимо Angular, и после уродования и минификации обоих вариантов побеждает не JS. Это же так естественно, что за удобство языка приходится платить размером и скоростью работы результата. В синтетических тестах результат трансляции опережает по производительности чистый JS, в реальной работе разница в производительности незаметна. Итого получается, размер собранного Dart-проекта будет примерно равен JS-проекту, скорость работы примерно одинакова. Последнее обновление Dart позволяет в несколько строк подключить любую JS-библиотеку. А писать на Dart это одно удовольствие. Последнее утверждение частично раскрывается переведённой статьёй, приятного чтения.

На днях появилась статья про быстрый старт с Angular 2. Заголовок говорил что понадобится 5 минут, но, судя по комментариям, не я один даже прочитать статью за 5 минут не смог. Хочу предложить вам альтернативный вариант, он действительно займёт примерно 5 минут не считая времени скачивания нужных инструментов.

Вашему вниманию предлагается перевод туториала «5 min quickstart» от команды Angular. Туториал описывает процесс создания «Hello World»-приложения на новом фреймворке Angular 2, который недавно получил статус «бета».

Давайте начнём с нуля и построим суперпростое приложение Angular2 на TypeScript.

Демо

Запуск работающего примера — это самый лучший способ увидеть, как оживает приложение на Angular 2.
Нажатие этой ссылки открывает новую вкладку, загружает пример в plunker и отображает простое сообщение:

My First Angular 2 App

Предлагаю вашему вниманию перевод статьи из официального блога AngularJS.

Мы счастливы поделиться с вами новостью, что проект Angular 2 достиг бета-версии. О том множестве нововведений, что принесла вторая версия по сравнению с первой, вы можете узнать из предыдущего поста. Изучение Angular 2 можно начать на сайте angular.io.

Что означает «бета»?

«Бета» означает, что теперь мы уверены в том, что большая часть разработчиков имеет возможность успешно создавать крупные приложения с помощью Angular 2.

Продолжаем знакомство с AllcountJS — фреймворком для быстрой разработки приложений на платформе NodeJS. В этой статье мы рассмотрим пример реализации кастомного интерфейса с использованием AngualrJS и jade, а также некоторые возможности конфигурирования, о которых мы ещё не упоминали.

POS (Point Of Sale) — в прямом смысле точка (место) продажи, но обычно этот термин обозначает рабочее место кассира вместе с торговым оборудованием. Такие терминалы находятся почти в каждом месте где нам что-нибудь продают. И сейчас мы создадим простое приложение, которое позволит вести список товаров с остатками и создавать записи о продажах.



Как обычно, на результат можно посмотреть в демо-галерее.

Эта статья будет полезна тем, кто ещё не сталкивался с разработкой на AngularJs и хочет в сжатые сроки освоить базовые принципы работы данного фреймворка. В случае если вы никуда не спешите, то разработчики Google давно позаботились о вас и написали чудесный учебник.

Что самое неудобное в сборщиках проекта? Правильно! То, что нужно сборку писать самому. Изучать grunt/gulp/webpack, шаманить с плагинами, думать, как разбить конфиг на модули, когда он вырастает до нескольких сотен строчек, потом несколько месяцев радоваться, что всё работает, а когда в проекте появляется критическое изменение, опять лезть в это болото.

Мне тоже всё это порядком надоело, поэтому написал сборщик, лишенный этих недостатков. Его gulpfile.js выглядит так:

var gulp = require('gulp');
var arjs = require('arjs-builder')();

gulp.task('build', arjs.build);
gulp.task('test', arjs.test);
gulp.task('default', arjs.run);

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

gulp #компилит, поднимает локальные серверы
gulp build #билдит проект
gulp test #запускает тесты

Открываете localhost:7000 и наслаждаетесь локальной версией сайта, а в папке build
уже лежит сбилженная версия.

— А как же темплейты, их же надо в js внедрять?
— Конечно! Все внедрено как положено.
— А я стили пишу на less, sass, stylus, их же надо компилить?
— Пишите как писали, всё чудесным образом будет работать.
— А картинки в CSS инклудить?
— Так давно всё в CSS. All included как в пятизвездочном отеле.
— А разбить сбилженный файл на модули?
— Проверьте папку build. Всё по модулям? С уникальными именами, основанными на содержимом файла? Вот, а вы волновались!
— А вот еще там что-то…
— И это тоже работает.

Но как такое возможно? Это мы и рассмотрим в статье. А в конце еще расскажу, почему всё-таки RequireJS

UPDATE
Результат можно посмотреть так: Скачать приложение Allcountjs на Google Play Market или Apple App Store. Запустить дему CRM. И в мобильное приложении вставить ссылку на сгенеренную дему.
Правда это приложение универсальное и не содержит кастомной клиентской логики и интерфейсов, поэтому канбан доски в нем не будет. Но зато в нем можно запустить любое AllcountJS приложение, например что-нибудь ещё из демо галереи.

Сейчас в большинстве проектов по разработке ПО требуется одновременно иметь как веб, так и мобильную версию приложения. Обычно это довольно непросто, но с AllcountJS эта задача упрощается в разы. В предыдущей статье мы создали простую CRM, которая позволяет отслеживать статус продажи клиентам на наглядной канбан доске.
В этой статье мы создадим мобильное приложение для этой CRM. Кроме фреймворка AllcountJS будем использовать ещё и ionic framework, о котором на хабре тоже уже писали тут и тут.

Часть первая: Google Cloud Endpoints на Java: Руководство. ч. 1
Часть третья: Google Cloud Endpoints на Java: Руководство. ч. 3
Часть четвертая: Работа с базой данных в Google App Engine/Google Cloud Endpoints на Java: фреймворк Objectify
Часть пятая: Google Cloud Storage c Java: изображения и другие файлы в облаках

В первой части мы рассмотрели создание проекта на Google Cloud Endpoints с Java, в этой статье речь пойдет о создании фронтенда к нашему API.

В дополнение к инструментам, использовавшимся в первой части, нам понадобится:

AngularJS, и начальное общее представление о том как он работает, опционально Bootstrap или Foundation.

Простейший веб-сервер на локальной машине для тестирования, и сервер для деплоя приложения.

По результатам опроса из первого топика продолжаю серию статей об Ionic Framework (далее IF). Сегодня поговорим о работе с камерой устройства и в дополнение рассмотрим работу с localStorage. В качестве основы возьмем приложение из прошлого топика и добавим нужную функциональность.

• Добавление ngCordova
• Подключение плагина для работы с камерой
• Создание сервиса для работы с камерой
• Редактирование шаблонов
• Добавление маршрутов, контроллеров и фабрик
• Заключение

Добрый вечер, уважаемые дамы и господа!

При всей неослабевающей популярности фреймворка AngularJS мы все-таки не успели отметиться с книгой по его первой версии, а теперь решили не дожидаться второй и поинтересоваться: насколько вам импонирует вот эта работа, охватывающая кроме AngularJS и более широкий контекст JavaScript-разработки?



Под катом вы найдете перевод регулярно обновляемой статьи Паскаля Прехта (версия от 12 октября 2015 года), рассказывающей о таких высоких материях, как внедрение зависимостей в AngularJs и, что самое интересное, тех доработках, которые ждут этот механизм в Angular 2.

Лига! Сегодня наш мир может стать чуточку спокойнее.

Новое оружие против сил зла ждёт проверки Советом. Оружие — BrowserSync Angular Template (bsAt) призвано ускорить каждого из нас, конечно не до скорости Флеша, но кто откажется быть хоть на секунду быстрее врага?

Многие статьи об оптимизации производительности, в первую очередь пытаются «заглянуть под капот» Angular и перегружают читателя информацией о внутренней организации фреймворка. Знакомство с внутренними механизмами работы очень важно, но в данной статье я попытался собрать самые простые примеры, которые оказывают наибольшее влияние на производительность приложения и помогают максимально быстро решить типичные проблемы.

Здравствуйте, Хабр.

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

При этом поинтересуемся, хотите ли вы увидеть на полке перевод следующих книг по Spring и AngularJS