Быстрый старт за 5 минут с Angular 2 beta

https://angular.io/docs/ts/latest/quickstart.html
  • Перевод
  • Tutorial
Вашему вниманию предлагается перевод туториала «5 min quickstart» от команды Angular. Туториал описывает процесс создания «Hello World»-приложения на новом фреймворке Angular 2, который недавно получил статус «бета».

Давайте начнём с нуля и построим суперпростое приложение Angular2 на TypeScript.

Демо


Запуск работающего примера — это самый лучший способ увидеть, как оживает приложение на Angular 2.
Нажатие этой ссылки открывает новую вкладку, загружает пример в plunker и отображает простое сообщение:
My First Angular 2 App

Вот файловая структура:
angular2-quickstart
├── app
│   ├── app.component.ts
│   └── boot.ts
├── index.html
└── license.md

Функционально это index.html и два файла TypeScript в папке app/. Давайте сделаем это!

Конечно, мы не будем создавать приложения, которые будут запускаться только в plunker. Давайте сделаем всё как если бы мы делали это в реальной жизни:
  1. Обустроим нашу среду разработки.
  2. Напишем корневой компонент Angular для нашего приложения.
  3. Загрузим его для того, чтобы он принял контроль над главной веб-страницей.
  4. Напишем главную страницу (index.html).

Мы действительно можем собрать QuickStart за пять минут, если будем следовать инструкциям и проигнорируем все комментарии.
Но многие из нас заинтересуются, «почему» и «как» всё это происходит, и ответ на эти вопросы займёт значительно больше времени.

Среда разработки


Нам необходимо место (папка проекта), несколько библиотек, некоторое количество настроек TypeScript и редактор с поддержкой TypeScript на ваш выбор.

Создадим новую папку нашего проекта

mkdir angular2-quickstart
cd    angular2-quickstart


Добавим нужные нам библиотеки

Мы рекомендуем использовать менеджер пакетов npm для загрузки и управления библиотеками.
У вас нет npm? Установите его прямо сейчас, потому что мы будем использовать несколько раз на протяжении этого туториала.

Добавьте файл package.json в папку проекта и скопируйте в него следующий код:
// package.json
{
    "name": "angular2-quickstart",
    "version": "1.0.0",
    "scripts": {
        "tsc": "tsc",
        "tsc:w": "tsc -w",
        "lite": "lite-server",
        "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
    },
    "license": "ISC",
    "dependencies": {
        "angular2": "2.0.0-beta.0",
        "systemjs": "0.19.6",
        "es6-promise": "^3.0.2",
        "es6-shim": "^0.33.3",
        "reflect-metadata": "0.1.2",
        "rxjs": "5.0.0-beta.0",
        "zone.js": "0.5.10"
    },
        "devDependencies": {
        "concurrently": "^1.0.0",
        "lite-server": "^1.3.1",
        "typescript": "^1.7.3"
    }
}

Не терпится узнать детали? Мы изложили их в приложении ниже.

Установите пакеты. Откройте окно терминала (командную строку в Windows) и запустите эту команду npm:
npm install

Жуткие красные сообщения об ошибках могут появиться в течение установки. Игнорируйте их. Установка будет успешной. Смотрите приложение ниже, если хотите узнать больше.

Сконфигурируем TypeScript

Нам необходимо довольно специфично настроить компилятор TypeScript.
Добавьте файл tsconfig.json в папку проекта и скопируйте в него следующее:
// tsconfig.json
{
    "compilerOptions": {
        "target": "ES5",
        "module": "system",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false
    },
    "exclude": [
        "node_modules"
    ]
}

Мы исследуем tsconfig.json в приложении ниже.

Итак, всё готово. Давайте напишем немного кода.

Наш первый компонент Angular


Компонент(Component) — это наиболее фундаментальная концепция Angular. Компонент настраивает отображение(view) — часть веб-страницы, где мы показываем информацию пользователю и реагируем на его действия.

Технически, компонент — это класс, который контролирует шаблон отображения. Мы будем писать много таких классов при создании приложений Angular. Это наша первая попытка, так что мы сделаем всё предельно просто.

Создадим подпапку, в которой будут находиться исходники

Мы предпочитаем хранить код нашего приложения в подпапке под названием app/. Выполните следующую команду в консоли:
mkdir app
cd    app

Добавим файл компонента

Теперь добавьте файл с именем app.component.ts и скопируйте в него следующий код:
// app/app.component.ts
import {Component} from 'angular2/core';

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

Давайте подробно рассмотрим этот файл, начиная с самого конца, где мы определяем класс.

Класс Компонента

В самом низу файла располагается пустой и ничем не занятый класс под названием AppComponent. Когда мы будем готовы создать независимое приложение, мы сможем дополнить этот класс свойствами и логикой приложения. Наш класс AppComponent пуст, потому что нам не нужно, чтобы он что-то делал в этом QuickStart.

Модули

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

Большинство файлов приложения экспортируют что-нибудь вроде компонента. Наш файл app.component экспортирует класс AppComponent.
// app/app.component.ts (export)
export class AppComponent { }

Факт экспорта превращает обыкновенный файл в модуль. Имя файла (без его расширения), как правило, является именем модуля. Таким образом, 'app.component' — это имя нашего первого модуля.

Более сложные приложения могут иметь дочерние компоненты, которые наследуют AppComponent в визуальном дереве. Более сложные приложения будут иметь больше файлов и модулей, как минимум столько, сколько у них есть компонентов.

QuickStart не сложен: один компонент — это всё, что нам нужно. Однако модули играют фундаментальную организационную роль даже в таком маленьком приложении.

Модули полагаются на другие модули. В приложениях Angular, написанных на TypeScript, когда нам нужно что-то, предоставляемое иным модулем, мы импортируем его. Когда другому модулю требуется сослаться на AppComponent, он импортирует символ AppComponent следующим образом:
// app/boot.ts
import {AppComponent} from './app.component'

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

Если нам требуется что-то из Angular, мы импортируем это из его библиотечного модуля. И прямо сейчас нам нужно кое-что, чтобы иметь возможность определить метаданные для нашего компонента.

Метаданные компонента

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

Мы определяем метаданные компонента с помощью функции Component из Angular. Мы получаем доступ к этой функции, импортируя её из основной библиотеки Angular — angular2/core.
// app/app.component.ts (import)
import {Component} from 'angular2/core';

В TypeScirpt мы можем связать функцию и класс через превращение функции в декоратор. Для этого перед её названием нужно добавить символ @, и поместить её прямо перед объявлением класса.
// app/app.component.ts (metadata)
@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})

@Component сообщает Angular, что данный класс является компонентом Angular. Объект конфигурации, отправляемый в @Component, имеет два поля: selector и template.

Свойство selector определяет обычный CSS селектор для HTML-элемента my-app, выступающего в качестве хоста. Angular создаёт и отображает экземпляр нашего AppComponent каждый раз, когда он сталкивается с my-app в родительском HTML.
Запомните селектор my-app! Нам будет нужна эта информация, когда мы будем писать наш index.html.

Свойство template содержит шаблон компонента. Шаблон — это разновидность HTML, которая объясняет Angular, как рендерить отображение. Наш шаблон — это единственная строка HTML, объявляющая: «My First Angular App».

Теперь нам нужно как-то объяснить Angular, что этот компонент необходимо загрузить.

Запустим его

Добавьте новый файл, boot.ts, в папку app/, и скопируйте в него следующий код:
// app/boot.ts
import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'

bootstrap(AppComponent);

Нам требуются две вещи для того, чтобы запустить приложение:
  1. Браузерная функция Angular bootstrap.
  2. Корневой компонент приложения, который мы только что написали.

Мы импортируем и то, и другое. Потом мы вызываем bootstrap и передаём в неё тип корневого компонента AppComponent.
Изучить, почему мы импортируем bootstrap из angular2/platform/browser и почему мы создаём отдельный файл boot.ts, можно в приложении ниже.

Мы попросили Angular запустить приложение в браузере с нашим компонентом в качестве корневого. Однако, где же Angular его запустит?

Добавим страницу index.html


Angular отображает наше приложение в специфическом месте на нашей странице index.html. Пришло время создать этот файл.

Мы не будем класть index.html в папку app/. Мы расположим его на один уровень выше, в корневой папке проекта.
cd ..

Теперь создайте файл index.html и скопируйте в него следующее:
<!-- index.html -->
<html>

  <head>
    <title>Angular 2 QuickStart</title>

    <!-- 1. Загрузите библиотеки -->
    <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>

    <!-- 2. Настройте SystemJS -->
    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>

  </head>

  <!-- 3. Отобразите приложение -->
  <body>
    <my-app>Loading...</my-app>
  </body>

</html>

Здесь есть 3 секции HTML, которые необходимо отметить:
  1. Мы загружаем библиотеки JavaScript, которые нам требуются. angular2-polyfills.js и Rx.js требуются для работы Angular 2.
  2. Мы настраиваем нечто, что называется System, и просим его импортировать файл boot, который мы только что написали.
  3. Мы добавляем тэг <my-app> в <body>. Это то самое место, где обитает наше приложение!

Что-то должно найти и загрузить модули нашего приложения. Мы используем для этого SystemJS. Есть много вариантов, и нельзя сказать, что SystemJS — лучший выбор, но мы его любим, и он работает.

Специфика настройки SystemJS выходит за пределы данного туториала. Мы кратко опишем часть конфигурации в приложении ниже.

Когда Angular вызывает функцию bootstrap в boot.js, он читает метаданные AppComponent, находит селектор my-app, обнаруживает тэг с именем my-app и загружает наше приложение в этот тэг.

Скомпилируем и запустим!


Откройте окно терминала и введите следующую команду
npm start

Эта команда запускает два параллельных процесса node.
  1. Компилятор TypeScript в режиме наблюдения.
  2. Статический сервер lite-server, который загружает index.html в браузере и обновляет браузер каждый раз, когда код приложения изменяется.

В течение нескольких мгновений вкладка браузера должна открыться и отобразить:
My First Angular 2 App

Поздравляем! Вы в деле!
Если вы видите вместо этого Loading..., прочитайте приложение «Поддержка ES6 браузерами».

Внесём несколько изменений

Попробуйте изменить сообщение на «My SECOND Angular 2 app».

Компилятор TypeScript и lite-server наблюдают за вашими действиями. Они должны засечь изменение, перекомпилировать TypeScript в JavaScript, обновить вкладку браузера и отобразить обновлённое сообщение.

Это изящный способ разработки приложений!

Мы закрываем окно терминала когда мы всё сделали для того, чтобы прервать одновременно компилятор и сервер.

Финальная структура


Финальная структура нашей папки проекта должна выглядеть так:
angular2-quickstart
├── node_modules
├── app
│   ├── app.component.ts
│   └── boot.ts
├── index.html
├── package.json
└── tsconfig.json

И вот наши файлы:
app/app.component.ts
import {Component} from 'angular2/core';
@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }


app/boot.ts
import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);


index.html
<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <!-- 1. Загрузите библиотеки -->
    <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>
    <!-- 2. Настройте SystemJS -->
    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>
  </head>
  <!-- 3. Отобразите приложение -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>


package.json
{
    "name": "angular2-quickstart",
    "version": "1.0.0",
    "scripts": {
        "tsc": "tsc",
        "tsc:w": "tsc -w",
        "lite": "lite-server",
        "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
    },
    "license": "ISC",
    "dependencies": {
        "angular2": "2.0.0-beta.0",
        "systemjs": "0.19.6",
        "es6-promise": "^3.0.2",
        "es6-shim": "^0.33.3",
        "reflect-metadata": "0.1.2",
        "rxjs": "5.0.0-beta.0",
        "zone.js": "0.5.10"
    },
    "devDependencies": {
        "concurrently": "^1.0.0",
        "lite-server": "^1.3.1",
        "typescript": "^1.7.3"
    }
}


tsconfig.json
{
    "compileroptions": {
        "target": "es5",
        "module": "system",
        "moduleresolution": "node",
        "sourcemap": true,
        "emitdecoratormetadata": true,
        "experimentaldecorators": true,
        "removecomments": false,
        "noimplicitany": false
    },
    "exclude": [
        "node_modules"
    ]
}



Заключение


Наше первое приложение делает не слишком много. Это, по сути, «Hello World» на Angular 2.

Для первого раза мы сделали всё максимально просто: написали небольшой компонент Angular, добавили немного библиотек JavaScript в index.html и запустили статический файловый сервер. В целом, это всё, что мы ожидали от «Hello World»-приложения.

У нас более серьёзные амбиции

Хорошая новость в том, что вся возня с установкой нас не касается. Возможно, мы чуть-чуть коснёмся package.json для обновления библиотек. Мы откроем index.html только если нам нужно будет добавить библиотеку или файл css-стилей.

Мы готовы к следующему шагу, и теперь наша задача — сконструировать приложение, которое демонстрирует, насколько великолепные вещи можно сделать с помощью Angular 2.

Присоединяйтесь к нам в туториале «Геройский тур»!

Приложения


Остаток данной главы посвящён набору приложений, более подробно излагающих кое-какие моменты, которые мы кратко затронули выше.

Здесь нет никакого критически важного материала. Читайте дальше, если вам интересны детали.

 Приложение: Поддержка ES6 браузерами

Angular 2 полагается на некоторые возможности стандарта ES2015, большая часть из которых уже включена в современные браузеры. Однако некоторым браузерам (таким, как IE11), требуются полифиллы (shim) для поддержки этой функциональности. Попробуйте загрузить следующие полифиллы перед другими скриптами в index.html:
<script src="node_modules/es6-shim/es6-shim.js"></script>

 Приложение: package.json

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

Мы определили пакеты, которые нам необходимы в файле npm package.json.

Команда Angular предлагает использовать пакеты, указанные в секциях dependencies и devDependencies в этом файле:
// package.json (dependencies)
{
    "dependencies": {
        "angular2": "2.0.0-beta.0",
        "systemjs": "0.19.6",
        "es6-promise": "^3.0.2",
        "es6-shim": "^0.33.3",
        "reflect-metadata": "0.1.2",
        "rxjs": "5.0.0-beta.0",
        "zone.js": "0.5.10"
    },
    "devDependencies": {
        "concurrently": "^1.0.0",
        "lite-server": "^1.3.1",
        "typescript": "^1.7.3"
    }
}

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


В package.json может присутствовать необязательная секция scripts, в которой мы можем определить полезные команды для выполнения разработки и построения. Мы включаем несколько таких скриптов в предлагаемом нами package.json:
// package.json (scripts)
{
    "scripts": {
        "tsc": "tsc",
        "tsc:w": "tsc -w",
        "lite": "lite-server",
        "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
    }
}

Мы уже видели, как можно запустить компилятор и сервер одновременно с помощью этой команды:
npm start

Мы исполняем скрипты npm в следующем формате: npm run + название-скрипта. Вот описание того, что делают скрипты:
  • npm run tsc — запуск компилятора TypeScript на один проход
  • npm run tsc:w — запуск компилятора TypeScript в режиме наблюдения; процесс продолжает работу, перекомпилируя проект в тот момент, когда засекает изменения, внесённые в файлы TypeScript.
  • npm run lite — запускает lite-server, легковесный статический файловый сервер, написанный и поддерживаемый Джоном Папа с великолепной поддержкой приложений Angular, которые используют маршрутизацию.

 Приложение: Предупреждения и ошибки npm

Всё хорошо, когда любые консольные сообщения, начинающиеся с npm ERR! отсутствуют в конце работы npm install. Могут быть несколько сообщений npm WARN в течение работы команды — и это превосходный результат.

Мы часто наблюдаем сообщение npm WARN после серии gyp ERR! Игнорируйте его. Пакет может попытаться перекомпилировать себя с помощью node-gyp. Если эта попытка заканчивается неудачей, пакет восстанавливается (обычно на предыдущую версию), и всё работает.

Всё хорошо до тех пор, пока нет ни одного сообщения npm ERR! в самом конце npm install.

 Приложение: Конфигурация TypeScript

Мы добавили конфигурационный файл (tsconfig.json) в наш проект, чтобы объяснить компилятору, как нужно генерировать файлы JavaScript. Подробнее про tsconfig.json вы можете узнать из официальной TypeScript wiki.

Опции и флаги, которые мы добавили в файл, являются наиболее важными.

Хотелось бы немного подискутировать насчёт флага noImplicitAny. Разработчики TypeScript расходятся во мнении относительно того, должен он быть установлен как true или false. Здесь нет точного ответа, и мы всегда можем изменить флаг позже. Но наш выбор может серьёзно повлиять на крупные проекты, так что он достоин дискуссии.

Когда noImplicitAny установлен в позицию false, компилятор, если он не может вывести тип переменной в зависимости от того, как переменная используется, скрыто устанавливает тип переменной в any. Это и значит «скрытый (implicit) any».

Когда noImplicitAny установлен в позицию true, и компилятор TypeScript не может вывести тип, он всё ещё генерирует файл JavaScript, но также и отчитывается об ошибке.

В этом QuickStart и во многих других примерах этого Developer Guide мы устанавливаем noImplicitAny в позицию false.

Разработчики, которые предпочитают более строгую типизацию, должны устанавливать noImplicitAny в позицию true. Мы всё ещё можем установить тип переменной в позицию any, если это кажется наилучшим выбором, но мы должны сделать это явно после того, как немного поразмыслим над необходимостью этого шага.

Если мы устанавливаем noImplicitAny в true, мы можем также получить скрытые ошибки индексации. Если нам кажется, что это больше раздражает, чем помогает, мы можем выключить их с помощью следующего флага.
"suppressImplicitAnyIndexErrors":true

 Приложение: Конфигурация SystemJS

QuickStart использует SystemJS для загрузки приложения и библиотечных модулей. Однако не забывайте, что у него есть рабочие альтернативы, такие как высоко оцениваемый сообществом webpack. SystemJS — это неплохой выбор, но мы хотим дать ясное понимание, что это лишь выбор, а не предпочтение.

Все загрузчики модулей требуют конфигурирования, и любое конфигурирование загрузчика становится тем сложнее, чем более разнообразнее становится файловая структура — вплоть до того, что мы начинаем задумываться об объединении файлов для повышения производительности.

Мы рекомендуем вам хорошо разобраться в загрузчике, который вы выберете.
Узнать больше о конфигурации SystemJS можно здесь.

Приняв во внимание эти предостережения, что мы можем сделать?
<!-- index.html (Конфигурация SystemJS) -->
<script>
System.config({
    packages: {        
        app: {
            format: 'register',
            defaultExtension: 'js'
        }
    }
});
System.import('app/boot')
    .then(null, console.error.bind(console));
</script>

Узел packages указывает SystemJS, что делать, если он видит запрос на модуль из папки app/.

Наш QuickStart создаёт такие запросы каждый раз, когда в любом TypeScript-файле приложения обнаруживается подобный оператор импорта:
// boot.ts (часть)
import {AppComponent} from './app.component'

Обратите внимание, что наименование модуля (после from) не содержит расширения файла. Конфигурация packages задаёт SystemJS расширение по-умолчанию как 'js', то есть файл JavaScript.

Это разумно, потому что мы компилируем TypeScript в JavaScript прежде, чем запускать приложение.
В демо-примере на plunker мы компилируем в JavaScript прямо в браузере на лету. Это неплохо для демо, но это не может стать нашим выбором для разработки или релиза.

Мы рекомендуем компилировать в JavaScript в течение фазы построения перед тем, как запускать приложение, по нескольким причинам:
  • Мы можем видеть ошибки и предупреждения времени компиляции, которые скрыты от нас в браузере.
  • Прекомпиляция упрощает процесс загрузки модулей, да и намного проще найти проблему, когда компиляция является отдельным внешним процессом.
  • Прекомпиляция даёт большую производительность, потому что браузеру нет нужды тратить время на компиляцию.
  • Наша разработка движется быстрее, потому что мы всего лишь перекомпилируем изменившиеся файлы. Разница станет заметна, когда наше приложение будет содержать множество файлов.
  • Прекомпиляция подходит беспрерывному процессу разработки — построению, тестам, деплою.

Вызов System.import заставляет SystemJS импортировать файл boot (boot.js… после компиляции boot.ts, помните?) boot — это файл, где мы просим Angular запустить приложение. Мы также отлавливаем и логируем ошибки запуска в консоль.

Все прочие модули загружаются с помощью запроса, который создаётся оператором импорта или самим Angular.

 Приложение: boot.ts

Загрузка платформоспецифична

Мы импортируем функцию bootstrap из angular2/platform/browser, не из angular2/core. Этому есть причина.

Мы можем назвать «ядром» только те возможности, которые одинаковы для всех целевых платформ. Действительно, многие приложения Angular могут быть запущены только в браузере, и мы будем вызывать функцию bootstrap из этой библиотеки наибольшее количество времени. Вполне «core»-фича — если мы пишем исключительно для браузера.

Но ведь вполне возможно загружать компонент в ином окружении. Мы можем загрузить его на мобильном устройстве с помощью Apache Cordova. Мы можем захотеть отрендерить начальную страницу нашего приложения на сервере для увеличения производительности или содействия SEO-продвижению.

Эти платформы требуют других вариантов bootstrap-функции, которые мы будем загружать из другой библиотеки

Зачем создавать отдельный файл boot.ts?

Файл boot.ts небольшой. Это всего лишь QuickStart. Мы вполне можем вписать эти несколько строк в файл app.component и избавить себя от излишней сложности.

Но мы так не делаем по причинам, которые, как мы верим, являются весомыми:
  1. Сделать всё правильно — это просто.
  2. Удобство тестирования.
  3. Удобство переиспользования.
  4. Разделение обязанностей.
  5. Изучение импорта и экспорта.

Это просто

Да, это дополнительный шаг и дополнительный файл. Насколько это сложно в целом?

Мы увидим, что отдельный файл boot.ts предпочтительней для большинства приложений — даже если это не столь важно для QuickStart. Давайте вырабатывать хорошие привычки сейчас, пока цена этому невысока.

Удобство тестирования

Мы должны думать об удобстве тестирования с самого начала, даже если мы знаем, что никогда не будем тестировать QuickStart.

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

Перемещение bootstrap-функции в boot.ts убирает ложную ошибку и оставляет нас с чистым файлом компонента.

Переиспользование

Мы рефакторим, переименовываем и перемещаем файлы в течение эволюции нашего приложения. Мы не сможем сделать ничего из этого, пока файл вызывает bootstrap. Мы не можем переместить его. Мы не можем переиспользовать компонент в другом приложении. Мы не можем отрендерить компонент на сервере для увеличения производительности.

Разделение обязанностей

Задача компонента — представлять отображение и управлять им.

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

Импорт/Экспорт

Когда мы писали отдельный файл boot.ts, то получили важный навык для работы с Angular: как экспортировать что-то из одного модуля и импортировать в другой. Мы будем делать много подобного, когда будем более тесно работать с Angular.
Поделиться публикацией
Комментарии 36
    +8
    т.е. это чтобы теперь что-то ойкнуть на страничке яваскриптом надо настраивать окружение и прописывать версии и лицензии? quik start!
      0
      Видимо это тренд, я недавно пробовал собрать «Hello world» на aurelia.io, я был в шоке когда увидел что файлы для сборки весят более 400Мб.
        –2
        Тут вопрос в том, что вы получаете на фронте язык со строгой типизацией. И более менее сносным ООП. А не «прекрасный» JS который, особенно если вы в основном занимаетесь back-end разработкой, похож на воплощение хаоса и нелогичности.
        И да. Настройка среды будет определенным гемороем, но если вы сравните приложение с большим количеством форм со сложными контролами(которые еще и с API тащат какие-то данные) на ангуляре и просто на JQuery,(или упаси господи на чистом JS) то думаю вопросы в целесообразности отпадут.
          0
          И более менее сносным ООП

          ОО должна быть не сносной а правильной, а еще больше функциональной чистоты. И тогда все хорошо.
      +12
      На быстрый старт не слишком похоже
        0
        Спасибо за перевод.
        Я с первым Angular знаком не был, но думаю, после такого вполне можно попробовать начать что-то писать на втором.
          +1
          А я вот встал на распутье перед туториалом. Более менее приличный и объёмный, есть пока только под TypeScript, но я что-то не уверен что хочу начинать именно с этого языка. Вот и сижу третий день, перебираю — VanillaJs / TypeScript / DART
            0
            Ну с виду он не показался мне каким-то неудобным, после JS. Типизация и плюшки. Мне казалось, что это даже будет преимуществом второй версии, что оно на TypeScript.
              0
              Посмотрите на React.
                0
                Я тогда вообще с катушек съеду ))
                  +1
                  Вы так говорите, будто это что-то плохое.
                    0
                    Да нет, просто глаза разбегаются )
                      +1
                      Если серьезно, я бы учил ванильный ES6 и далее. Все эти надстройки над js со временем отпадут либо будут интегрированы в стандарт. Например, пару лет назад хипстеры наяривали на coffeescript, и где он теперь?
                        0
                        Вот да, оно все-равно в ваниллу интерпритируется. Я сел ковырять JS версию, попробую ориентироваться на туториал TS, но писать на JS.
                    +1
                    Рекомендую к просмотру: Ember = Angular = React

                    TL;DW

                    Идеи всех этих эмберов, реактов и ангуляров идут в общем-то в одном направлении. Независимые UI компоненты, отказ от двустороннего биндинга, односторонний потока данных… То есть зная хорошо React и Redux у вас нет проблем те же подходы использовать в AngularJS или Ember. Да, чуть тонкостей будет но со временем различий будет все меньше и меньше.

                    Лучше концентрироваьтся на схожих идеях, а не холиварить о том кто круче.
                      0
                      Если эти фреймворки сложны и система построения проекта зашкаливает, то попробуйте Google Polymer — это надстройка над новой системой в HTML — Web Components. Это всего лишь библиотека, позволяющая строить компоненты легко и прозрачно. У меня заняло несколько минут понять простоту системы, пару часов для написания простейшего проекта и неделю для достаточно сложного проекта и разбора истемы в деталях. Просто открыть документацию и прочиитать её (она относительно короткая) будет достаточно для написания систем практически любой сложности. Не требуется знаний новейших скриптов, поскольку используется уровень функции и объекта, а не класса. Система загрузки зависимостей встроена в HTML. Существует аппликация Vulkanizer, позволяющая упаковать весь проект в один файл
                    0
                    Я бы вам посоветовал Dart, ибо гугл решил своё первое Angular 2 приложение выпустить именно на этом языке. Пруф
                      0
                      Ну вот интересно кстати. Вроде ангулар и дарт в недрах гугл родились. А продвигают в первую очередь почему-то тайпскрипт версию (во всяком случае у меня сложилось такое впечатление)
                        0
                        TypeScript это почти ES6, плюс скомпиленный TS в JS выглядит читаемо и библиотеки написанные на TS бесшовно работают с JS. А после обновления 1.13 в Dart появилась возможность с минимальными усилиями писать фасады для JS либ. Буквально одна строка на одну функцию. А вот в обратную сторону всё сложнее, поэтому и пишут библиотеки на TS.
                          –1
                          Аотому что команды разные. Гугл использует Dart для написания своих внутренних сервисов. И им нет ризона переписывать слой бизнес логики просто так, потому что они решили обновить фреймворк.
                          0
                          А я бы советовал то на чем вам придется писать. Например я тыкаю Angular2 с Babel просто. И мне нравится.
                      0
                      А я для себя вчера открыл vuejs.org на вид куда понятнее чем Ангулар. К сожалению он сложноват для начинающих разработчиков. А вот vue js выглядит куда лучше.
                        0
                        Кому интересно, рабочий код туторила:

                        https://github.com/aholbreich/angular2

                        и продолжение из Developers Guide
                        https://github.com/aholbreich/ng_hero
                          +6
                          Как за 5 минут вывести на экрана строчку текста:
                          1. Установите NodeJS
                          2. Установите NPM
                          3. Настройте package.json
                          4. Выучите TypeScript
                          5. Настройте tsconfig.json
                          6. Познакомьтесь с SystemJS
                          7. Настройте SystemJS
                          8. Подключите 5 библиотек
                          9. Подключите полифиллы для ES6

                          10. Забудьте это все и пишите на React Angular 1
                            0
                            Все же, наверное, стоило в Caps Lock жирным написать, что это туториал для БЕТЫ. В бете еще не все вылизано, потому требуется понимание, как все функционирует. К слову, это же понимание требуется при написании сколько-нибудь серьезного приложения.

                            В районе релиза это все будет выглядеть как-то так:
                            npm install -g angular-cli
                            ng new PROJECT_NAME
                            cd PROJECT_NAME
                            ng serve
                            ng generate component my-new-component
                            

                            Для тех, кто хочет просто поиграться по-быстрому: plnkr.co/edit => New => AngularJS 2.0.x (ES6/ES5/TS — выбирайте сами)
                              0
                              Все же, наверное, стоило в Caps Lock жирным написать, что это туториал для БЕТЫ.

                              Спасибо за замечание, исправил.
                              0
                              вот буквально на выходных начал смотреть что такое angular 2 (с первым не сталкивался),

                              • впечатлил конечно "хеллой волд" и список телодвижений для его явления миру, но нам, работающим с java ee и не такое приходилось делать ради одной строки :)
                              • Оно когда выйдет из беты в что то релизное? те формально мы не можем на нем создавать продукты, так как релиза то все нет
                              • npm реально подружить с проксей?
                                ну просто у меня есть ноутбук с виндой находящийся в домене с проксей с авторизацией, какие я только танцы не использовал (у меня богатый опыт по дружбе java приложений и auth proxy) — не работает
                                убунту ноут с прямым доступом в интернет — все работает.
                                0
                                1) потому все юзают seed проекты наподобии того, что предлагают ребята из AngularClass. Ну и есть еще десятки вариантов. Никто не пилит каждый раз все с нуля.

                                2) серидина 2016-ого года, то есть где-нибудь летом. Но это приблизительная дата релиза. В принципе выход beta уже говорит о том, что больших изменений в API уже не будет. И в принципе пилить продукты на нем более чем можно, вопрос в рисках. Сейчас вот вышел Angular 1.5, который является эдаким промежуточным звеном между ng1 и ng2, который форсит компонентный подход и т.д.

                                3) https://docs.npmjs.com/misc/config#proxy
                                  0
                                  Посмотрел AngularClass — это готовый проект по сути, те получается аналог того же maven archetype.

                                  Прошел базовый урок TOUR OF HEROES, интересненько. завтра из ангуларовского сервиса попробую сходить на какой нибудь rest сервис за данными и там же авторизацию глянуть, чтобы в целом оценить как работает.

                                  вопрос такой, читая доку на сайте ангулара по диагонали, не увидел.
                                  А как мне сбилдить пакет, который я могу на сервак залить для публикации сайта в интернете?
                                    0
                                    А как мне сбилдить пакет, который я могу на сервак залить для публикации сайта в интернете?

                                    Это уже вне специфики ангуляра. Вам в помощь webpack-ки, system.js-ы всякие надо или другие бандлеры модулей. с webpack проще.
                                    0
                                    И впорос туда же, из WebStorm/Idea как это дебажить?
                                      0
                                      гуглите "typescript webstorm debug" и т.д. Я думаю даже в официальном хелпе вэбшторма будет информация.
                                  0
                                  в папке app нельзя создавать подпапки, что бы вынести туда тематические components+service с шаблонами.
                                  у меня не получилось, решил все проблемы с путями, перестало ругаться на 404, но сайт все равно не стартует
                                    0
                                    А теперь сформулируйте проблему более… понятно. Вы не разобрались как с модулями работать или что? Какие 404-ые ошибки? Что пишет консоль?
                                      0
                                      (сорри, писал утром)
                                      Задача следующая, переписываю базовый пример angular2-tour-of-heroes на свой проектик, добавляю сущность parking, получаем следующую структуру

                                      angular2-bike
                                       app
                                        Parking.ts 
                                        parking.component.css
                                        parking.component.html
                                        parking.component.ts
                                        parking.service.ts
                                        mock-parking.ts

                                      все отлично работает, А теперь хочу добавить папку, а то слишком уж много файлов лежит в app

                                      angular2-bike
                                       app
                                        parking
                                          Parking.ts 
                                          parking.component.css
                                          parking.component.html
                                          parking.component.ts
                                          parking.service.ts
                                          mock-parking.ts

                                      на утреннюю голову не получилось, но по сейчас пересмотрел все пути импортов и все заработало.

                                      По итогу получается интересный вывод, что эти две строки идентичны (абсолютный путь и относительный путь)

                                      import {ParkingService} from "app/parking/parking.service";
                                      import {ParkingService} from "./parking.service";

                                      что достаточно не очевидно все таки, ожидал что абсолютный путь будет "/"
                                    0
                                    что достаточно не очевидно все таки, ожидал что абсолютный путь будет "/"

                                    это не совсем "абсолютный" путь, это путь относительно модуля app. А ваше приложение это и есть модуль app. Вот и вся наука.

                                    То есть к ангуляру или typescript это не имеет никакого отношения, все упирается только в работу с es2015 модулями. Разберитесь с ними.

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

                                    Самое читаемое