Пакетный менеджер Bower

Currently, people are managing dependencies, such as JavaScript libraries, manually. This sucks.

Крупные проекты как правило используют большое количество сторонних библиотек, таких как jQuery, Underscore, различные UI и плагины к ним, компонентные фреймворки и шаблоны к ним. Так вот, хранить весь этот сторонний код вместе с проектом не очень удобно. А, если еще учесть, что каждая библиотека должна иметь хотя бы 2 файла: минифицированый и отладочный, то структура проекта превращается в свалку, в которой уже довольно трудно разобраться. Да, частично решают вопрос git-ссылки репозитрия (когда мы не копируем контент, а ставим ссылку на репозиторий библиотеки), но это все равно не очень удобно. Хотелось бы совсем избавиться от этого стороннего кода в репозитории. Вот для этого и нужен bower.

Continue reading

AngularJS: получаем scope/injector/controller из DOM

Небольшая заметка о том, как достать scope, injector либо controller из элементов DOM. Делается это очень просто:

var scope = angular.element(domElement).scope()
var injector = angular.element(domElement).injector()
var controller = angular.element(domElement).controller()

angular.element – это алиас на расширенный JQueryLite. Т.е. можем свободно использовать селекторы.

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

var rootScope = angular.element(domElement).scope()

чаще всего это body:

var rootScope = angular.element('body').scope()

AngularJs: чем отличается provider, factory и service

Для начала абстрагируемся вообще от AngularJs и задач возложеных на 3 его метода provider, factory и service.

Попробуем представить, что у нас просто есть метод provider:

var provider = function(name, provider_) { [some code] }

и он как-то работает, как? – нас пока не интересует. Теперь посмотрим на код для метода factory:

function factory(name, factoryFn) { return provider(name, { $get: factoryFn }); }

из которго видно, что это просто обертка для provider.

Идем дальше: что же представляет собой service:

function service(name, constructor) {
    return factory(name, ['$injector', function($injector) {
      return $injector.instantiate(constructor);
    }]);
  }

– тоже обертка, только для factory.

Вот пример кода одной задачи реализованной 3мя способами.

 

Plunker(jsfiddle + collabedit) – сервис для совместной работы над кодом

Plunker – сервис, для совместной работы над JavaScript кодом. Но в отличии от того же jsfiddle, он позволяет просматривать правки кода в режиме реального времени, а в отличии collabedit – выполнять код.

Есть удобная авторизация через github. Да и сам проект из себя представляет open-source.  Дальше, я так понял, проект планирует развить социальную соствляющую: пользователи, теги, обсуждения. На данный момент уже можно посмотреть разработки других людей, но пока еще нет поиска по коду.

Для тех кто не понял как запустить многопользовательское редактирование в режиме реального времени – заходим под кат.

Continue reading

Karma в помощь тестированию

karma test runer

UPD: статься обновлена 21.11.2015. Старое имя утилиты – Testacular

Karma – инструмент на node.js, позволяющий запускать JavaScript код в нескольких браузерах, нацеленная на поддержку TDD подхода.

Continue reading

Mustache шаблонизатор

Mustache – простой шаблонизатор с минимумом логики, но набирающий все большую популярность и добавляющий в свои ряды новые языки, которые его поддерживают(Ruby, JavaScript, Python, Erlang, PHP, Perl, Objective-C, Java, .NET, Android, C++, Go, Lua, ooc, ActionScript, ColdFusion, Scala, Clojure, Fantom, CoffeeScript, D, node.js.)

Я приведу пример как можно использовать Mustache вместе с JavaScript.

Continue reading