В этой части мы рассмотрим окружение разработки Angular 2

  • Angular 2 использует TypeScript который является основным языком для разработки приложений на Angular 2
  • TypeScript является надстройкой над JavaScript

Пошаговая инструкция установки окружения разработки Angular 2:

Шаг 1: Открываем консоль и cозадем папку проекта на локальном диске:

Шаг 2: Создаем конфигурационные файлы. Вам нужно создать tsconfig.json который служит для конфигурации компиляции TypeScript.

Шаг 3: Создайте typings.json

Большое количество библиотек JavaScript расширяет среду функциями и синтаксисом, которые изначально не включены в компилятор TypeScript. typings.json файл используется для определения файлов приложения.

По коду выше у нас 3 файла:

  • core-js: возможности ES2015/ES6 в браузерах с поддержкой только ES5
  • jasmine: Jasmine test framework
  • node: Используется для кода который ссылается на объекты из окружения nodejs

Шаг 4: Добавляем package.json

package.json содержит необходимые нашему приложению библиотеки. Используется как файл конфигурации NPM.

Шаг 5: Устанавливаем необходимые пакеты

Сообщения об ошибках при установке пакетов можно проигнорировать.

Создание первого компонента на Angular 2

Компонент — фундаментальная концепция Angular 2. Компонент это клас который контролирует шаблон — часть веб страницы которая взаимодействует с пользователем. Компоненты необходимы для построения приложений на Angular 2.

Шаг 6: Создаем в паке нашего проекта папку app куда будем помещать наши компоненты:

Шаг 7:  Файлы которые вы будете создавать должны быть сохранены с расширением .ts. Создадим файл environment_app.component.ts

  • Код служит для импорта компонента и шаблона с пакета angular2/core.
  • Деректива @Component в Angular 2 — декоратор который позволяет асоциировать данные с классом компонента.
  • my-app — служит как HTML тег для внедрения компонента на страницу.
  • @View содержит шаблон который определяет как будет рендерится приложение
  • export указывает на то что этот компонент будет доступен вне файла.

Шаг 8: Затем, создайте файл environment_main.ts:

  • Файл environment_main.ts служит для загрузки компонентов.
  • Для запуска приложения нам нужно импортировать оба корневых компонента приложения.
  • После импорта компонентов, будет вызван наш компонент.

Шаг 9: Создайте index.html файл в папке проекта angular2-demo/:

Angular 2 запустит приложение в браузере с нашим компонентом и поместит его в определенном нами месте в index.html

Шаг 10: Для запуска приложения нам нужно выполнить команду

Команда запускает два паралельных процеса и прослушивает их:

  • TypeScript компилятор в состоянии «watch mode»
  • Статический серверв для загрузки index.html в браузер и обновление браузера при изменении файлов.

После нескольких мгновений откроется вкладка браузера.

 

Angular 2 — Окружение

Отключите, пожалуйста, AdBlock / uBlock. Поддержите наш проект! Сайт не переполнен рекламными блоками, поп-андерами и другими видами рекламы.