Метка «angular»

Всем привет.
Итак, допустим мы пишем сайт, на котором нужно реализовать возможность динамического переключения настроек внешнего вида, или, проще говоря, темы. Темой (theme) будем называть набор свойств, определяющих внешний вид компонентов (да и вообще всего сайта).
Допустим, у нас есть одностраничное приложение на Angular, и пусть в нем будет ооочень много компонентов, и один из них — ButtonComponent (к компоненту подключим стили из button.component.css), на примере которого и рассмотрим весь механизм. И нужно реализовать возможность переключения между двумя темами: «dark» и «light», которые у нас будут отличаться только цветами (а в общем случае можно выносить в тему что угодно, размеры там, шрифты, картинки бэкграунда и т.п. — все, чем можно управлять из css).
Читать полностью »

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

Все исходные коды доступны на github: gitgub.com/pichuser/balda (ну, или на момент написания статьи они был не доступны, т.к. на Руси решили заблокировать сей ресурс. Если так продолжится, то могу переложить куда-нибудь).

Однажды во время игры в «Балду» на телефоне меня посетила мысль самому попытаться создать что-то подобное. Сфера моей деятельности в программировании лежит в области ASP.MVC сайтов. Соответственно, выбор реализации — сайт. Более конкретно — AngularJS на фронтэнде, SingalR для «онлайн»-связи между игроками. А на бэкэнде мне давно хотелось испытать TDD (test drive development).

Краткое описание процесса создания

Для написания тестов использовался NUnit и их же утилита, которая запускает тесты после построения приложения (описаны в книге из секции «Использованные материалы»). Согласно TDD, написал первый тест: «Хочу, чтобы игрок мог успешно зарегистрировать слово, если оно есть в словаре». Далее добавил классы и заглушку. Следом написал противоположный тест и уже добавил некоторую реализацию. Дальше начал подключать интерфейсы и mock-объекты. По ходу дела, как мог, занимался рефакторингом кода. Один из весьма интересных моментов начался, когда я зашёл в очевидный тупик: игра создавалась «стихийно» (без каких-либо предварительных обдумываний) — и поначалу шла в русле «однопользовательской» игры, то есть одновременно люди могут играть только на одном поле. А дальше мне, естественно, захотелось многопользовательского режима (т.е. параллельно несколько игровых полей). И вот тут я смело окунулся в переработку кода…
Читать полностью »

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

Итак, что такое директива AngularJS?

В двух словах — это тег или атрибут тега в документе HTML, плюс немного магии.

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

Бесплатный курс по AngularJS от Codeschool

Всем привет!

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

В новой сборке COLT 2.0 (beta 6) появился расширенный автокомплит для Angular.js проектов — внутри {{}} для Sublime Text (2 и 3)

Раньше автокомлит работал только в JS — в запущенном приложении COLT находил нужный объект и смотрел его структуру. Теперь внутри {{}} и атрибутах директив в списке автокомплита появился выбор всех поля и методов из текущего $scope.
Читать полностью »

Сегодня мы выпускаем новую версию нашего продукта. COLT 2.0.
Данный релиз будет интересен JavaScript разработчикам.

Главные новости. Коротко

Поддержка node-webkit, поддержка работы с удаленными или локальными серверами (live-proxy). Консольная версия COLT (запуск без UI на сервере). Поддержка Angular. Новый механизм HTML доставки. Улучшение работы с Sublime Text (JSDocs и другое). Улучшение производительности. Новый интерфейс на node-webkit. Улучшена поддержка Linux. Новый демо режим (как в Sublime). Значительное уменьшение размера дистрибьютива.Читать полностью »

Это не статья — скорее заметка. И да, она для новичков в Angular.

Частый вопрос — почему в Angular не работают вложенные инклуды? Работают. Просто Angular — это не php.

Планируя лэйаут, мы обычно представляем что-то такое:

  • Меню сверху,
  • Меню слева,
  • Контент в центре
  • Футер

Первое что пытаемся сделать, так это добавить в главный шаблон ngView, а в шаблоны нижнего уровня добавить ngInclude. Пробуем, у нас не получается, идём читать StackOverFlow (давайте будем честны — сначала StackOverFlow, потом, может быть, если лениво не будет, — документацию).
И там нам говорят что-то в духе, “чувак, используй angular ui-router”, или “зацени, какой я себе костылесипед собрал!”.
Читать полностью »

Warp9 — еще одна реактивная js библиотека. На этот раз компонуемая и без утечек

Существует множество реактивных и около-реактивных библиотек для создания графического интерфейса на js: Angular, Knockout, React, RxJS… Спрашивается, зачем писать еще одну. Оказывается, во всех них, помимо фатального недостатка, есть еще несколько.

Читать полностью »

Здравствуй!

В этой открытой лекции я попытался сжато рассказать и показать полный цикл (full stack) разработки веб-приложений на JavaScript.

Начнем мы с короткого введения в язык, потом в двух словах поговорим о клиентской части, в частности, об MVC фреймворках вроде Angular.js, после чего перейдем на серверную часть: Node.js и MongoDB. В конце обсудим возможность автоматизации разработки и сборки проектов с помощью Grunt.js.

Скачать слайды и исходные коды.

Лекция была записана в офисе компании ChocolifeЧитать полностью »

image

Приветствую всех, уважаемые харбожители!
В данном посте речь идет о том, как подружить карты яндекса и javascript framework angular.js для их совместной работы. Можно, конечно, использовать и google map, но для стран СНГ их качество оставляет желать лучшего.
Немного погуглив, и не найдя готового решения, пришлось писать свое. Кому интересно, добро пожаловать под кат.
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js