В мае Angular 2 выпустил версию rc.1, которая принесла довольно много изменений, в основном переименование пакетов и некоторые перемещения. Чтобы получить представление о структуре с официальным кандидатом на выпуск, мы собираемся создать приложение Angular 2 в реальном времени, которое позволит вам искать в Twitter обновления в реальном времени.

Это сообщение в блоге является обновлением нашего исходного сообщения об Angular 2, но в нем содержится актуальная информация о первом релизе-кандидате Angular 2. Большое спасибо Натану Уокеру за его усердную работу по обновлению кода и этой публикации.

Обратите внимание, что Angular 2 находится на стадии кандидата на выпуск, поэтому некоторый код может измениться со временем, но он должен быть достаточно согласован с тем, что вы можете ожидать в окончательном выпуске. Если вам не терпится и вы хотите сразу перейти к коду, вы можете сделать это на GitHub. Вы также можете увидеть работающее приложение и попробовать его самостоятельно.

Введение

Наше приложение позволит пользователям вводить поисковые запросы и получать результаты в реальном времени из потокового API Twitter. Для этого мы будем использовать проект сообщества Pusher datasource API. Этот API прослушивает вебхуки существования канала от Pusher и выполняет поиск в Твиттере всякий раз, когда новый канал занят, используя имя канала в качестве условия поиска. Мы не будем вдаваться в подробности на стороне сервера в этом посте, но ознакомьтесь с README Pusher datasource API для подробного объяснения.

Начиная

Angular 2 представляет множество новых концепций, многие из которых мы увидим в этом руководстве. Мы будем следовать структуре, изложенной в Руководстве по быстрому запуску Angular 2, поэтому обратитесь к нему, если вам нужна дополнительная информация о том, почему наше приложение имеет такую ​​структуру. Если вы не читали это руководство, вам следует сначала ознакомиться с ним, в нем представлены такие библиотеки, как TypeScript и SystemJS, которые важны при создании приложений Angular 2.

Создание нашего приложения Angular 2 в реальном времени

Мы начнем со структуры, идентичной проекту быстрого запуска AngularJS. У нас есть весь наш код, содержащийся в src/, включая файл конфигурации TypeScript, наш HTML и папку app/, которая будет содержать наш исходный код TypeScript.

- package.json - node_modules - src/ - app/ - app.component.ts - index.html - tsconfig.json

Angular 2 убирает концепцию контроллеров в пользу компонентов. В Angular 2 все является компонентом; первый компонент, который мы создадим, будет тот, который содержит в себе все наше приложение. Мы определим наш компонент в src/app/app.component.ts.

import { bootstrap } from '@angular/platform-browser-dynamic'; import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: '' }) class AppComponent { } bootstrap(AppComponent);

Пара замечаний: если вы используете более ранние бета-версии, обратите внимание на изменения в импорте пакетов. Вместо того, чтобы загружаться прямо из ядра, он исходит из определенного пакета, который сигнализирует о принятии большего разделения для поддержки широкого спектра платформ, что хорошо для всех. Например, нативное мобильное приложение см. пример теперь может использовать собственный бутстрап или универсальное приложение Angular, которое может работать на сервере см. пример.

Теперь мы можем обновить наш файл index.html, чтобы использовать этот компонент. Из руководства по началу работы с Angular 2 вы помните, что в верхней части файла HTML мы загружаем Angular, SystemJS, а затем импортируем сгенерированный файл JavaScript. Чтобы ваш TypeScript компилировался при каждом сохранении, запустите npm run tsc на вкладке. Это запускает компилятор TypeScript и отслеживает изменения, работая для каждого файла TypeScript в каталоге приложения и создавая соответствующий файл JavaScript.

Первоначально опубликовано на www.laravelfeed.com.