Угловой2 + TypeScript + AngularFire2

Увидев последнюю NG-Conf, я подумал, что сейчас самое время начать изучать Angular2. После долгого пути Angular2 наконец вышел из стадии бета-тестирования. Это больше не была непонятная среда, в которой каждая новая функция могла заставить вас переписать приложение.
Она стабильна, работает быстро, а документация содержит действительно полезную информацию и руководства.

Мало того, TypeScript казался первым в команде Angular вариантом для создания новых приложений. TypeScript - это типизированный надмножество JavaScript, которое компилируется в простой JavaScript. Это означает, что вы можете использовать функции ES2015 (бывший ES6) или новее и скомпилировать его в более старую версию EcmaScript, чтобы он мог работать в старых версиях браузеров.

Пора тоже изучить TypeScript.

Цель сообщения в блоге - создать очень простое приложение для задач Angular2 с использованием TypeScript и Firebase с использованием библиотеки AngularFire2.

Когда начать

Я разработчик Angular 1.x уже 2 года, и вы можете подумать, что это огромное преимущество по сравнению с тем, кто никогда раньше не использовал этот фреймворк.

Нет.

Некоторые ключевые функции остаются такими, как директивы, службы, внедрение зависимостей, но Angular2 настолько отличается от Angular1, что вы можете сразу перейти к нему.

редактор

Первое, что вам нужно сделать, это настроить свою среду, и выбор правильного редактора является ключевым. До сегодняшнего дня я предпочитал Sublime Text. Супер легкий, множество конфигураций, фрагментов и отличный менеджер пакетов.
Хотя, чтобы начать с TypeScript, я остановился на Visual Studio Code. Поскольку TypeScript разрабатывается и поддерживается Microsoft, использование инструмента Microsoft может быть лучшим решением, поскольку теоретически он должен быть первым обновленным для поддержки последних изменений TypeScript.

Если вы, как и я, привыкли к ОС на базе unix, установка Visual Studio Code может показаться немного неудобной, но я должен сказать, что мне это очень понравилось. А еще есть готовые отрывки из Джона Папы.

Создать проект

После запуска и настройки вашего любимого редактора давайте создадим наше первое приложение Angular2. И это так же просто, как установить Angular CLI (вам понадобится NodeJS).

$ npm install -g angular-cli

и запустите на терминале следующую команду:

$ ng new ng2todo

После этого был создан шаблон приложения Angular2 с именем «ng2todo», и вы можете запустить его, войдя в папку приложения и запустив локальный веб-сервер.

$ cd ng2todo
$ ng serve

Перейдите по адресу http: // localhost: 4200 и проверьте свое первое приложение Angular2.

Сделанный! Легко, правда? :)

Хорошо, давайте посмотрим, сможем ли мы узнать что-нибудь реальное и внести первые изменения в наше приложение. Перейдите к компоненту приложения (src / app / ng2todo.component.ts) и измените заголовок на «ng2todo list».

Неплохо, но теперь я покажу вам, как создать компонент с нуля и добавить еще несколько функций в наше приложение.

Структура папки

Взгляните на структуру папок приложения.

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

Внутри каталога src находится ваше приложение, а внутри каталога app находится ваш компонент приложения (ng2todo). Внутри этого каталога есть еще одна папка с именем shared, в которой вы можете создавать все свои компоненты, службы и т. Д., Но лично я предпочитаю создавать их внутри каталога app, поэтому я просто сниму. Опять же, это личное дело каждого, вы можете оставить общую папку, если хотите.

Компонент Todos

Давайте создадим наш первый компонент, и вместо того, чтобы делать все вручную, мы воспользуемся мощью Angular CLI.

$ ng generate component todos

И это все! Он автоматически создает папку с компонентом, шаблоном, стилями, зависимостями внедрения и файлом спецификации для тестов! Как это круто ?!

Внутри шаблона (todos.component.html) создайте неупорядоченный список и с помощью директивы NgFor переберите список задач и создайте элемент списка для каждого из них.

<ul>
  <li *ngFor=”let todo of todos”>
    <span>{{todo}}</span>
  </li>
</ul>

Внутри компонента создайте список задач типа any, а внутри функции ngOnInit давайте заполним список, используя некоторый псевдокод.

todos: any[];
constructor() {}
ngOnInit() {
  this.todos = [‘Learn Angular2’,
  ‘Check AngularFire2’,
  ‘Fav this article’];
}

Теперь давайте добавим созданный элемент app-todos в шаблон приложения (src / app / ng2todo.component.html), чтобы отобразить массив

<h1>
  {{title}}
</h1>
<app-todos></app-todos>

Но компонент приложения по-прежнему не знает, что такое app-todos, поэтому нам нужно импортировать компонент todos. Итак, в компоненте приложения (src / app / ng2todo.component.ts) давайте добавим следующую строку сверху

import { TodosComponent } from ‘./todos/todos.component’;

Добавление новых задач

Прежде чем переходить к AngularFire, давайте добавим функцию для добавления новых элементов в список.

В компоненте задач добавьте поле ввода с директивой NgModel. Эта директива дает нам двустороннюю привязку данных.
Мы также будем использовать обработчик событий keypress.enter, чтобы добавить вставленное значение в список после нажатия клавиши Enter. .

<h3>Add new todo:</h3>
<input type=”text” [(ngModel)]=”newTodo” (keydown.enter)=”add()” />

В компоненте создайте функцию add ()

add() {
  this.todos.push(this.newTodo);
  this.newTodo = ‘’;
}

Не забудьте объявить и инициализировать свойство newTodo прямо перед конструктором.

newTodo: string = ‘’;

Проверьте приложение на http: // localhost: 4200 и попробуйте. Для идеального сообщения в блоге мы должны создать тесты, прежде чем вносить какие-либо изменения в код, но я оставлю это для другой статьи.

Сохранять данные на Firebase

Сейчас список приложений находится только в памяти, если вы обновите веб-страницу, вы потеряете все свои изменения. В этой статье я покажу вам, как использовать Firebase для сохранения ваших данных с помощью AngularFire2, библиотеки, которая объединяет наблюдателей Firebase в реальном времени и аутентификацию с Angular2.
Firebase - это серверная часть как служба, которая предлагает вам базу данных NoSQL , сервис аутентификации, аналитика и хостинг, все в одном.

Установить и ввести

Сначала установите AngularFire2 и Firebase (v2) как зависимости приложения.

$ npm install angularfire2 [email protected] — save

Чтобы получить автозаполнение Firebase, вам может потребоваться установить его типизации:

$ typings dt~firebase — global — save

Затем нам нужно сообщить Angular, что мы хотим использовать поставщиков и сервисы Firebase, поэтому мы загрузим его в файл main.ts. Здесь мы также зададим URL-адрес нашего приложения Firebase, а также провайдер аутентификации и метод. Не обращайте внимания на URL-адрес функции defaultFirebase, вам придется изменить его, но я расскажу об этом позже в этой статье.

И, как обычно, нам также нужно импортировать модули вверху.

import { FIREBASE_PROVIDERS, defaultFirebase, firebaseAuthConfig, AuthProviders, AuthMethods } from ‘angularfire2’;

 …
bootstrap(Ng2todoAppComponent, [
  FIREBASE_PROVIDERS,
  defaultFirebase(‘https://ng2tododb.firebaseio.com/'),
  firebaseAuthConfig({
    provider: AuthProviders.Anonymous,
    method: AuthMethods.Anonymous
  })
]);

Angular CLI

Если вы проверите свое приложение сейчас, в консоли браузера появятся ошибки, касающиеся некоторых файлов, которые не могут быть найдены (angularfire2). Это потому, что Angular CLI требует дополнительной настройки, чтобы получить нужные файлы.

Откройте файл angular-cli-build.json (вы можете найти его в корневом каталоге вашего приложения) и добавьте недостающие строки, чтобы получить файлы firebase и angularfire2.

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      ‘systemjs/dist/system-polyfills.js’,
      …
      ‘firebase/lib/*.js’,
      ‘angularfire2/**/*.+(js|js.map)’
    ]
  });
};

Это позволяет получить все упомянутые файлы и добавить их в каталог ”dist / vendor”.

Теперь нам также нужно сопоставить файлы в пакетах конфигурации системы CLI внутри файла system-config.ts. Изменяйте только там, где написано «Конфигурация пользователя».

/** Map relative paths to URLs. */
const map: any = {
  ‘firebase’: ‘vendor/firebase/lib/firebase-web.js’,
  ‘angularfire2’: ‘vendor/angularfire2’
};
/** User packages configuration. */
const packages: any = {
  ‘firebase’: {
    format: ‘cjs’
  },
  ‘angularfire2’: {
    format: ‘cjs’,
    defaultExtension: ‘js’,
    main: ‘angularfire2.js’
  }
};

Создайте свой аккаунт Firebase

К моменту написания этой статьи (первоначально 25 мая) Firebase v3 уже был выпущен, но AngularFire2 работал только с Firebase v2. Это означает, что вам необходимо создать учетную запись с помощью устаревшей консоли. Я считаю, что AngularFire2 скоро будет обновлен для работы с Firebase v3, но пока это единственный способ заставить его работать.

Внутри вашей учетной записи создайте новое приложение. В моем случае я дал ему имя «ng2tododb», но вы можете называть его как хотите. Не забудьте изменить URL-адрес приложения Firebase в методе начальной загрузки (внутри main.ts).

Аутентификация

Вы также можете использовать свою учетную запись Google, Facebook, Twitter или Github или регистрировать пользователей, используя адрес электронной почты и пароль. Но чтобы упростить эту задачу, мы разрешим анонимную аутентификацию для внесения изменений в наше приложение Firebase.

В консоли Firebase нажмите Управление приложением, чтобы войти в панель управления только что созданного приложения. Перейдите к параметру «Вход и аутентификация» слева и на вкладке «Анонимный» установите флажок Включить аутентификацию анонимного пользователя.

Теперь в компоненте приложения импортируйте модуль аутентификации Firebase из AngularFire2,

import { FirebaseAuth } from ‘angularfire2’;

и выполните вход внутри конструктора компонента приложения.

export class Ng2todoAppComponent {
  title = ‘ng2todo list’;
  constructor (private _auth: FirebaseAuth) {
    this._auth.login();
  }
}

Чтение данных из Firebase

Вместо того, чтобы хранить наш список задач внутри массива в памяти, давайте свяжем его с Firebase.

В нашем компоненте задач нам понадобится AngularFire,

import { AngularFire } from ‘angularfire2’;

вставить его в конструктор компонента,

constructor(private af: AngularFire) {}

а затем установите наш список задач следующим образом внутри функции ngOnInit:

this.todos = this.af.database.list(‘/’);

Если ваш редактор настроен правильно, вы можете увидеть некоторые красные волнистые линии на этой конкретной строке.

Это происходит из-за мощи TypeScript, который видит, что тип данных, возвращаемых функцией list, отличается от текущего типа данных переменной todos (которая является массив типа любой).

Прямо сейчас список todos - это массив, который живет в памяти, и мы хотим воспользоваться преимуществами Firebase и настроить трехстороннюю привязку данных (между DOM, компонентом и базой данных ), поэтому нам нужно изменить переменную todos на массив, который изменяется со временем (наблюдаемый). В этом случае наш список задач будет иметь тип FirebaseListObservable.

Итак, вверху добавьте его к модулям, импортированным из angularfire2,

import { AngularFire, FirebaseListObservable } from ‘angularfire2’;

и измените тип переменной todos.

todos: FirebaseListObservable<any[]>;

Осталось сделать еще одно изменение. Если вы перейдете к шаблону, мы будем использовать директиву NgFor, которая выполняет итерацию по массиву, который находится в памяти, а не во времени. Итак, нам нужно передать директиву асинхронной операции.

<li *ngFor=”let todo of todos | async”>
  <span>{{todo.$value}}</span>
</li>

Angular AsyncPipe - интересный пример нечистого канала. AsyncPipe принимает Promise или Observable в качестве входных данных и автоматически подписывается на входные данные, в конечном итоге возвращая выданные значения.

Документы по Angular2

Еще одно изменение, которое необходимо сделать, - вместо привязки к "todo" внутри элемента span, привязать его к "todo. $ Value" . Это свойство Firebase, которое возвращает значение объекта.

Теперь вы можете открыть два окна бок о бок и увидеть его в действии!

Добавить в firebase

Как видите, мы не внесли никаких изменений в добавление нового элемента в Firebase, функция add () осталась прежней. Это простой толчок.

Удалить

Давайте изменим наше приложение, чтобы мы могли удалить его из записи из Firebase. В нашем шаблоне добавьте «x» перед каждой записью и привяжите событие щелчка для вызова функции с именем delete, которая будет иметь задачу в качестве аргумента.

<span>{{todo.$value}}</span> <span (click)=”delete(todo)”>[x]</span>

Теперь в нашем компоненте нам нужно создать функцию удаления.

delete(todo) {
  this.todos.remove(todo);
}

TypeScript и Angular2 сильно эволюционировали в прошлом году, они объединились в этом путешествии, и действительно кажется, что у них есть все на их стороне, чтобы продвигать будущее разработки веб-приложений.
Пока еще рано говорить, но судя по тому, что мы видим на данный момент, это действительно многообещающе.

Если у вас есть какие-либо вопросы, вы можете связаться со мной в Twitter или Github, я позабочусь о том, чтобы не оставить вас без ответа.

Кроме того, это приложение доступно в моей учетной записи Github, так что не стесняйтесь его разветвлять или загружать.

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

Ваше здоровье!