воскресенье, 19 января 2014 г.

AngularJS + Turbolinks. Bootstrapping. Ручное подключение приложений.

AngularJS автоматически инициализирует и настраивает приложение, найденное с помощью директивы ng-app.

Бывают случаи, что автоматических подключения и настройки Angular приложения не хватает. Например, при использовании AngularJS совместно с Ruby On Rails Turbolinks при переходе на новую ссылку приложение необходимо перенастроить, что не происходит автоматически.

Для этого:

1) Уберите директиву ng-app из верстки вашего приложения:

<div ng-app="app"></div>

2)  Вместо ng-app обозначим наше приложение обыкновенным id:

<div id="app">Контент</div>

3) Инициализация приложения:
Инициализация приложения занимает всего одну строчку кода. Можно было бы сделать ее в $(document).ready(), но в случае с Turbolinks такой фокус не прокатит, так как событие ready срабатывает только при первом посещении приложения. Для этого предусмотрено специальное событие page:load:

    $(document).on('ready page:load', function()
    {
        angular.bootstrap(document.getElementById('app'), ['App']);
    });

4) Все готово. Можно обратиться к приложению в коде:

    var app = angular.module("App", []);

С наилучшими пожеланиями, Ваш покорный слуга, Петюнчик)

пятница, 1 ноября 2013 г.

JavaScript. AngularJS, или как облегчить жизнь

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

Отличное решение - AngularJS.
Ссылочка: http://angularjs.org/

Этот фреймворк позволит:
  • легко настроить поведение элементов страницы
  • организовать связь элементов с сущностями, данные о которых они отображают
  • динамически обновлять страницу при изменении сущностей, без ее перезагрузки
  • отделить верстку от реализации поведения элементов страницы
  • минимизировать разметку страницы, задав общий вид представления объектов сущности
  • и многое другое
Например, вы разрабатываете сайт для жилищного агенства. С AngularJs, чтобы отобразить данные о множестве квартир на одной странице, вам нужно будет лишь написать шаблон на HTML для отображения данных одной квартиры, занести данные о множестве квартир в контейнер, и сказать HTML тегу - повторись для всех квартир в этом контейнере! И что самое главное, изменения данных в контейнере моментально отобразятся и на HTML страничке, а точнее в связанном с моделью теге.

Очень удобная штука. Сам я только начал с ней разбираться, в ней еще очень много интересного)

воскресенье, 6 октября 2013 г.

JavaScript. Dates. Даты. setMonth();

    Был у меня один случай. Необходимо было пробежать по значениям дат, начиная от n-го года, заканчивая k-м, с шагом в один месяц. В один прекрасный момент, задав начальный год тысяча-девятьсот-шестьдесят-какой-то все нафиг повисло.
    Реализовано это было следующим образом:

var startDate = new Date('1960-01-01');
var endDate   = new Date('2010-01-01');
for(var i = startDate; i < endDate; i = new Date(i.getFullYear(), i.getMonth() + 1, 0))
{
// Что-то происходит
}


    Оказалось, что в прекрасный промежуток годов от 1982 до 1986 (кажется, но суть не важна), конструктор new Date(year, month, day) устанавливал месяц, равный month - 1, если подавалась цифра 2! И так, в цикле бесконечно устанавливался месяц, равный 1.
Решил проблему используя метод setMonth();

for(var i = startDate; i < endDate; i.setMonth(i.getMonth() + 1))
{
// Что-то происходит
}

вторник, 27 августа 2013 г.

JavaScript. Dates. Даты. Часть 1

И так, друзья. Сегодня я расскажу вам про замечательный мир дат на JavaScript.

Заранее прилагаю первоисточник:
http://javascript.ru/Date

Вот основное, и то что пригодится:


Создание

dateObj = new Date()
dateObj = new Date(dateVal)
dateObj = new Date(year, month, date[, hours, minutes, seconds, ms] )



Аргументы

dateVal
  • Если параметр является числовым, то он интерпретируется как количество миллисекунд от 1-Янв-1970 00:00.
  • Если строкой, то она разбирается и интерпретируется как дата по стандартным правилам Date.parse.
year
Год в формате YYYY.
month
Месяц от 0 (Янв) до 11 (Дек).
date
День месяца от 1 до 31.
hours
Параметр должен быть указан, если указан параметр minutes. Устанавливает кол-во часов от 0 до 23.
minutes
Параметр должен быть указан, если указан параметр seconds. Устанавливает количество минут: от 0 до 59.
seconds
Параметр должен быть указан, если указан параметр ms. Устанавливает количество секунд: от 0 до 59.
ms
Количество миллисекунд: от 0 до 999.
Дата измеряется в миллисекундах, начиная от полуночи 01 января 1970 года GMT+0. День содержит 86,400,000 миллисекунд.
Объект Date ведет себя одинаково на всех платформах.
Date поддерживает как методы для работы в зоне UTC (GMT+0), так и методы для работы с местным временем.
Местное время - это то, которое установлено на компьютере, на котором выполняется яваскрипт.


Описание, примеры


Если конструктор запущен без аргументов, то возвращается текущая дата.

Пример: получить текущую дату
var today = new Date()
При вызове с одним аргументом - строкой, строка разбирается и интерпретируется как дата, так же, как и в методе Date.parse.

Пример: создать дату из строки
var date = new Date("21 May 1958 10:12"// используется редко
При объявлении с несколькими аргументами, отсутствующие аргументы автоматически считаются равными 0.

Пример: объявление даты с несколькими аргументами
01new Date(1)
02// Thu Jan 01 1970 03:00:00 GMT+0300 (Russian Standard Time)
03new Date(1,2)
04// Fri Mar 01 1901 00:00:00 GMT+0300 (Russian Standard Time)
05new Date(1,2,3)
06// Sun Mar 03 1901 00:00:00 GMT+0300 (Russian Standard Time)
07new Date(1,2,3,4)
08// Sun Mar 03 1901 04:00:00 GMT+0300 (Russian Standard Time)
09new Date(1,2,3,4,5)
10//Sun Mar 03 1901 04:05:00 GMT+0300 (Russian Standard Time)
11new Date(1,2,3,4,5,6)
12//Sun Mar 03 1901 04:05:06 GMT+0300 (Russian Standard Time)

пятница, 9 августа 2013 г.

JavaScript. Colors. Цвета.

Представляю вашему вниманию генератор шестнадцатиричных кодов html цветов. Возвращает что-то вроде "FFFFFF":

  function rgbToHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)}
  function toHex(n) 
  {
    n = parseInt(n,10);
    if (isNaN(n)) return "00";
    n = Math.max(0,Math.min(n,255));
    return "0123456789ABCDEF".charAt((n-n%16)/16)
      + "0123456789ABCDEF".charAt(n%16);
  }

Источник:
http://www.benknowscode.com

Firefix привередливый, и кушает это только так:
 #rgbToHex(7,9,8);
Chrome и так, и просто rgbToHex(7,9,8);

пятница, 2 августа 2013 г.

JavaScript. Библиотека визуализации графов Flot


Flot


Библиотека от Датских разработчиков, предоставляющая широкий инструментарий для визуализации графов посредством JavaScript и jQuery.

Ссылка на официальный сайт:
http://www.flotcharts.org/

Красиво, функционально, гибко и легко в использовании. На сайте приложено куча примеров, перебрав которые можно довольно быстро скомпоновать нужный вам вариант. Да и код библиотеки говорит сам за себя, не нужно никакой документации (Хотя она присутствует в полном объеме).