#2 Angular2. Тур героев. Установка

poster
В этом уроке мы установим заготовку для приложения тур героев angular 2 и разберем основные файлы в этом приложении.
Понравилось? Поделитесь с друзьями!
Понравилось?
Поделитесь с друзьями!
Комментарии
Текст видео

Сегодня мы продолжаем серию уроков по angular 2, а именно "Тур героев". В этом уроке мы разберем как устанавливать проект и какие файлы в нем есть.

Для начала у вас должны быть установленный node и npm. Я советую версию node 5.10.1 и npm 3.8.3 так как с более старыми версиями у меня не хотели ставиться пакеты.

Дальше клонируем заготовку проекта.

git clone https://github.com/monsterlessons/02-angular2-tour-of-heroes-initial-setup

заходим в папку heroes и запускаем

npm install

Теперь давайте разберем код проекта. Вот у меня папка heroes в которой все, что мы склонировали. Это заготовка проекта, чтобы не писать его вообще с ноля.

Проект мы с вами будем писать на typescript как рекомендуют разработчики angular 2. Если в двух словах, то typescript отличается от javascript более строгой типизацией. Подробнее вы можете почитать на сайте

Во первых у нас есть файл tsconfig.json. Это как раз конфиг тайпскрипта, который тайпскрипт использует для компиляции. На конфигурации я подробно останавливаться не буду, вы хотя бы должны знать где ее найти, а документацию можно прочитать на оффициальном сайте.

В файле package.json указаны все наши зависимости. Тут и Angular 2 и SystemJS, RxJS и все остальное. Так же тут у нас есть набор dev dependencies. Сверху файла вы можете видеть набор скриптов, который мы будем использовать. Самый популярный скрипт, который вам будет необходим - это start. Когда мы будем писать npm start у нас будет запускаться вотчер тайпскрипта и наш сервер, который будет следить за изменения наших файлов и автоматически обновлять страницу, применяя наши изменения.

Теперь давайте посмотрим наконец то на код. В папке app мы видим файл app.component.ts и в нем вот такой код

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }

Начнем с первой строчки.

import {Component} from 'angular2/core';

Angular 2 стал очень модульным и легко разбивается на независимые блоки. В данном случае мы импортируем Component - это функция - декоратор из главной библиотеки Angular 2. Дальше мы используем этот декоратор указывая в нем селектор и шаблон. Селектор - это тот DOM елемент, в который будет наш компонент применятся, а шаблон - это то, что в нем выведется.

Теперь о классе AppComponent. Как мы видим, он у нас пустой и это самый главный класс, который контролирует поведение нашего вью. И именно с этого класса будет начинаться все дерево компонентов в Angular 2.

Компонент - это просто кусок кода, который контролирует какую-то часть экрана и какое-то вью. Не забываем, что здесь есть слово export, и мы будем експортить этот класс, чтобы использовать его в других частях приложения.

Теперь давайте посмотрим на файл main.ts

import {bootstrap}    from 'angular2/platform/browser';
import {AppComponent} from './app.component';

bootstrap(AppComponent);

Здесь мы импортим bootstrap и AppComponent, который и является тем файлом, который мы с вами только-что смотрели. И дальше мы применяем bootstrap, что означает инициализируй, на наш AppComponent. То есть мы инициализируем наше Angular приложение с созданным компонентом.

И теперь давайте посмотрим где это все вызывается. В корне у нас есть файл index.html. Сверху мы видим все библиотеки, которые нам необходимы для работы с Angular 2

<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>   
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>

Дальше идет конфигурация для SystemJS.

System.config({
  packages: {        
    app: {
      format: 'register',
      defaultExtension: 'js'
    }
  }
});
System.import('app/main')
      .then(null, console.error.bind(console));

SystemJS - это универсальный загрузчик модулей.

Далее мы видим кастомный тег my-app, который мы указывали в AppComponent и в который наше приложение будет инициализировано.

<my-app>Loading...</my-app>

Так же у нас есть в конце файл style.css, где написаны все основные стили нашего приложения.

Теперь если мы попробуем написать npm start, то у нас запустится наш компилятор тайпскрипта и наш сервер. Как мы видим у нас в браузере открылась страница localhost:3000 и у нас вывелось "My first Angular 2 app".

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

Только зарегистрированные пользователи могут оставлять комментарии.  Войдите, пожалуйста.
Serafim
7 месяцев назад
Привет, есть ли смысл начинать учить ангуляр с 2 версии ? Или же сразу начинать 6 ?
monsterlessons
7 месяцев назад
Привет. Смысла нет. Сразу с ng6.
Moe Green
9 месяцев назад
наверное, я весьма странный типчик. мне оч нравится vue; нравится ng2. ну и совсем не нравится react. ))
monsterlessons
9 месяцев назад
Нравится, так используйте. Никто же не заставляет любить реакт. Везде свои плюсы и минусы.
Moe Green
9 месяцев назад
Я Вам не надоел своими комментариями? Я высказываю свои мысли (рассуждаю вслух) на страницах Вашего ресурса. Причина - Ваш ресурс мне нравится (даже в подаче материала чувствуется, что вы практикующий программист). И главная причина - Вы для меня выступаете в роли (пусть и невольного) ментора. Всем нужен ментор. ))
monsterlessons
9 месяцев назад
Не надоели. Невольный ментор звучит забавно)) На общие вопросы отвечать не занимает много времени, но по коду не связанному с уроками я не отвечаю (это на всякий случай).
volodya.chabak
2 лет назад
Вы очень хорошо объясняете огромное спасибо. Пожалуйста обновите видео. Спасибо)))
monsterlessons
2 лет назад
Пока я просто залил к каждому видео правильный код. Вы можете посмотреть его нажав "исходный код на гитхаб". Возможно позже обновлю серию, как будет время.
Painklller
2 лет назад
Ваше видео отлично снято. Показывает в т.ч., что нужно все делать красиво и без ошибок. Попросить хотелось бы, чтобы просто обновился репозитарий, чтобы соответствовать тому, что есть в видео. Спасибо
monsterlessons
2 лет назад
В ближайшие пару дней сделаю
monsterlessons
2 лет назад
Выложил код ко всем видео по серии "тур героев".
Painklller
2 лет назад
Добрый. Содержимое репозитария на git не соответствует вашему видео.
monsterlessons
2 лет назад
Абсолютно верно. Так как эта серия снималась, когда Angular2 был еще в RC, то ее код очень далек от нынешнего. Эту серию сейчас можно посмотреть только для общего ознакомления. Если много людей отпишется, что нужна обновленная серия, то я пересниму все уроки.
Moe Green
9 месяцев назад
наверное, это вообще неблагодарное занятие, когда есть https://www.ng-book.com/2/ ? ))