Почему Angular 2?

В настоящее время существует множество фреймворков для фронт-енд разработки. У каждого из них есть как достоинства, так и недостатки. Многим разработчикам (и я в их числе) нравится функциональность, которую предоставляет Angular 1.x . Angular 2 расширяет, ускоряет, масштабирует эту функциональность, а также добавляет другие, более современные возможности. Если вы уже используете Angular 1.x и он вам нравится, то вам определённо понравится Angular 2 ещё больше.

Read More

Сортировка вставкой

Сортировку последовательности элементов вставкой можно изобразить на примере игральных карт.

Допустим, у вас в руке находится несколько игральных карт. Вы начинаете сортировать их следующим образом:

  1.  считаем, что все карты левее нашей выбранной карты уже отсортированы
  2. начинаете сортировку со второй карты слева
  3. сравниваете её достоинство по очереди с каждой картой левее её (поэтому-то и начинаете со второй карты, так как левее первой карты карт нет). Смотрите, если первая карта левее выбранной карты больше её по достоинству, вы перекладываете эту карту на место выбранной. Далее сравниваете выбранную карту так же с каждой следующей картой левее её, и перекладываете карты пока не окажется, что карта левее выбранной меньше по достоинству, чем выбранная. Тогда кладём нашу выбранную карту перед этой меньшей по достоинству картой и переходим к следующему шагу
  4. выбираем следующую карту в не отсортированной части и повторяем шаг 3

На TypeScript это можно изобразить следующим образом:

let array = [56, 15, 48, 6, 78, 125, 5, 1];

for(let i = 1; i < array.length; i++){
    let key = array[i];
    let j = i - 1;
    while(j >= 0 && array[j] > key){
        array[j + 1]  = array[j];
        j -= 1;
    }
    array[j + 1] = key;
}
console.log(array);

Быстрый старт Angular2 приложения с angular-cli

Angular-cli это сборщик проектов на Angular2.  Он позволяет собрать проект на Angular2 за считанные минуты. Причём в этой сборке уже будут инструменты для дебага и тестирования, а также live reloading. Он основан на Webpack и поддерживает асинхронную загрузку скриптов. Итак, довольно слов, сейчас мы соберём простенький Angular2 проектик с использованием этого замечательного Command Line Interface.

Read More

Google и Firebase авторизация из Google Extensions

Недавно мне потребовалось организовать аутентификацию пользователей в одном приложении Google (Google extension). Я решил использовать аккаунт пользователя Google. Плюс к этому моё расширение использовало Firebase базу данных. Поэтому хотелось использовать Google авторизацию и для Firebase.

Read More

Опциональные параметры и свойства TypeScript 2.0

В TypeScript 2.0 наконец-то появились опциональные (необязательные) параметры для функций и типов/интерфейсов. Что же это значит?

Это значит, что если мы укажем какое-нибудь свойство при определении типа/интерфейса или параметр функции как необязательное, оно по-умолчанию будет инициализировано значением undefined doxycycline online. То есть формально, даже если мы его не указали в классе или объекте, то оно там будет, независимо от того, хотим мы этого или нет, только оно будет равно undefined (стандартное поведение в JavaScript).

Read More

strictNullChecks опция TypeScript 2.0

С версии 2.0 нам доступна новая опция TypeScript − −strictNullChecks.

Данная опция включает строгий режим проверки на null. Если этот режим включен, то мы больше не можем присваивать null или undefinded переменным любого типа. Более того, значением переменной по-умолчанию при объявлении не становится undefined . Она просто остается не инициализированной.  Появились два новых типа null и undefined . Теперь, если мы хотим, чтобы переменная, допустим, типа number могла принимать значение null , то нужно явно это ей сообщить, добавив null в перечень возможных типов этой переменной.

Попытка использования не инициализированной переменной :


let a: number;

a; // ошибка, попытка использовать не инициализированную переменную

Попытка присвоить null переменной типа number :


let a: number = 2; // всё хорошо
a = null; // ошибка, не поддерживаемый тип переменной

// теперь нужно так
let b: number | null; // либо number | null | undefined , если мы хотим добавить поддержку undefined
let b = 2; // всё хорошо
let b = null; // всё хорошо

Данный флаг также влияет еще на некоторые новые возможности TypeScript 2.0 , но более подробно мы поговорим об этом в наших следующих статьях.

Конфигурирование Angular2 + Webpack

Конфигурирование Angular2 + Webpack

В данном уроке я хотел бы поделиться своим опытом конфигурирования Webpack для работы с Angular2 . Если вы ещё не знакомы с Webpack, то Webpack — это сборщик для JavaScript проектов. То есть он собирает ваш JavaScript код из всех ваших файлов в один (или несколько). Он также позволяет подключать файлы между собой как nodejs модули, а также поддерживает динамическую загрузку файлов и многое другое. На самом деле о Webpack можно много и долго писать, но это не тема данного урока. Подробнее о Webpack вы можете прочитать на официальном сайте, но, если у вас нет времени, то не отчаивайтесь, в данном уроке мы соберём рабочую конфигурацию Webpack + Angular2, а если что-то будет непонятно, то вы всегда можете зайти в документацию Webpack.
Read More