Angular 2 - наш первый компонент (обновлено: с использованием Beta 15)

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

Давайте для начала создадим что-то действительно простое и базовое, только потому, что очень важно понимать все шаги. Затем мы можем перейти к чему-то, что требует дополнительной работы, например, к созданию приложения с использованием всех операций CRUD, подкомпонентов, служб, каналов, директив, с использованием внедрения зависимостей, структурных директив, интерполяции, привязки свойств, привязки событий, объявлений переменных, форм. , маршрутизация и т. д. и т. д.

Ссылки по теме:

. Настройка рабочей среды

Вы можете загрузить код, обсуждаемый в этом блоге, с моего GitHub.

Шаги:

1. Поехали! - Наш первый компонент
2. Загрузка приложения
3. Создание index.html
4. Запуск нашего первого компонента

1. Пойдем! - Наш первый компонент

Если у вас есть рабочая среда уже настроена, ваш проект должен выглядеть так:

Как видите, у нас есть настроенный проект; Я использую Visual Studio Code. Теперь мы готовы создать наш первый простой компонент. Для этого создайте новый файл с именем app.component.ts.

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

Что такое компонент?

Компонент - это комбинация представления (шаблона) и некоторой логики (расширение нашего класса Typescript .ts)

Давайте сначала создадим класс внутри нашего app.component.ts:

export class AppComponent {
    constructor() {}
}

Все классы в TypeScript имеют конструктор, независимо от того, указываете вы его или нет. Если вы не определите конструктор, компилятор автоматически добавит его. Конструктор вызывается перед обработкой жизненного цикла любого другого компонента. Если у компонента есть какие-либо зависимости, конструктор - лучшее место для внедрения этих зависимостей. Оператор export сообщает TypeScript, что это модуль, чей класс AppComponent является общедоступным и доступен для других модулей приложения.

Подробнее о крючке жизненного цикла в Angular 2.

В Angular 2 компоненты - это основной способ создания и определения элементов и логики на странице, в то время как в Angular 1 мы можем добиться этого с помощью контроллеров и scope; с помощью Angular 2 все эти концепции объединены в Компоненты. Компоненты расположены иерархически, поэтому приложения Angular 2 всегда начинаются с одного основного компонента.

Чтобы определить для Angular, что есть компонент, мы используем декоратор @Component, и чтобы иметь возможность его использовать, мы должны его импортировать:

import {Component} from 'angular2/core';
@Component()
export class AppComponent{
    constructor() {}
}

Декоратор @Component принимает требуемый объект конфигурации с информацией, необходимой Angular для создания и представления компонента и его представления.

…. мы еще не закончили!

Декоратор @Component ожидает только одно свойство с именем selector. Селектор сообщает Angular, что искать на страницах HTML. Каждый раз, когда селектор находится в HTML, Angular заменяет его нашим компонентом. Давайте добавим селектор к нашему компоненту:

import {Component} from 'angular2/core';
@Component({
   selector: 'main-app'
})
export class AppComponent{
    constructor() {}
}

Каждый раз наш HTML-код содержит такой элемент, как:

‹main-app› ‹/main-app›

… .Angular создаст новый экземпляр класса AppComponent.

… .и он еще не закончен!

Ранее мы говорили…

«Компонент - это комбинация представления (шаблона)»

Итак, компонент должен иметь шаблон, в который вы можете встроить его, или мы можем вынести этот шаблон в другой файл (используя templateUrl), но пока давайте не будем усложнять .

import {Component} from 'angular2/core';
@Component({
   selector: 'main-app',
   template: '<h1>Hiya! First Component</h1>'
})
export class AppComponent {
    constructor() {}
}

Мы сообщаем Angular, что AppComponent является компонентом, прикрепляя метаданные к классу, а метаданные сообщают Angular, как обрабатывать класс.

2. Начальная загрузка приложения и загрузка компонентов.

Метод начальной загрузки (доступный в Angular 2) - это тема, о которой сейчас нужно слишком долго писать, поэтому на этом этапе мы будем упрощать задачу. Более подробно обращаюсь к этой теме здесь.

Нам нужно запустить наше приложение, и метод начальной загрузки поможет нам выполнить эту работу. Мы должны импортировать его из модуля angular2 / platform / browser, используя другое местоположение (например, не angular2 / core), потому что Angular 2 поддерживает рендеринг на стороне сервера или запуск в Веб-воркер. Давайте создадим новый файл с именем: boot.ts, чтобы отделить логику начальной загрузки.

import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component';
bootstrap(AppComponent)
 .then (success => console.log('Bootstrap successfully!')) 
 .catch(err => console.log(err));

Немного предыстории…

Метод начальной загрузки - это объект обещания, и первый параметр, который мы определяем, - это основной класс нашего приложения - компонент; поэтому нам пришлось импортировать {AppComponent} из './app.component'.

Нам удалось импортировать этот класс, потому что мы использовали ключевое слово 'export', которое делает класс общедоступным для всего проекта. Согласно приведенному выше примеру, в скобках {} - это имя нашего класса, а from '' - это место, где находится файл этого класса. Поскольку у нас есть все файлы в главном корне, нам не нужно включать какую-либо папку или подпапку, чтобы найти компонент (например: ‘. /App/app.component’). На данный момент нам не нужно беспокоиться о структуре папок, потому что это базовый пример; однако второй параметр метода начальной загрузки - это то место, где у нас может быть массив, содержащий список того, что мы хотим сделать доступным для внедрения.

Оператор import сообщает системе, что она может получить компонент приложения из модуля namedapp.component, расположенного в соседнем файле. Имя модуля (идентификатор модуля AKA) часто совпадает с именем файла без его расширения.

3. Создание index.html

Создайте еще один файл с именем: index.html и добавьте следующий html:

<html>
<head>
 
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.js"></script>
 <script>
 System.config({
   defaultJSExtensions: true,
   map: {
     'angular2': 'node_modules/angular2',
     'rxjs': 'node_modules/rxjs'
   }
 });
 System.import('built/boot');
 </script>
</head>
<body>
 <main-app>Loading…</main-app>
</body>
</html>

В Angular 1.x добавление скриптов к нашим HTML-файлам было простым, нам просто нужно было добавить скрипт для angular.js и скрипт для каждого написанного нами JS-файла. Angular 2 объединен в модули, и эти модули можно загружать динамически. Чтобы загрузить наш модуль, мы используем инструмент SystemJS, который представляет собой небольшой загрузчик модулей. Мы добавили его статически в наш HTML, и он сообщает, где расположены модули на нашем сервере. Затем он автоматически определяет зависимости между модулями и загружает используемые из нашего приложения.

System.import('built/boot');

'build / boot' - указывает, где находится наш boot.js, и если вы не меняли свой tsconfig.json, у вас не должно быть любые проблемы с загрузкой файла JS.

4. Запускаем наш первый компонент

Мы почти закончили! Ура! Нам нужно только запустить наш первый компонент с использованием Angular 2.

Откройте cmd (командную строку), перейдите в каталог проекта и введите: npm run app.

Перед загрузкой скриптов вы должны увидеть «Загрузка…»

… А затем в приложении должно появиться сообщение «Hiya! Первый компонент »

Если вы откроете инструменты разработчика в браузере, вы увидите сообщение console.log («Bootstrap успешно»)…