Описание
В предыдущей статье мы рассмотрели как устанавливать окружение для Angular 2. В єтой части создадим классическое приложение под названием «Hello, Wolrd».

В коде ниже описано как вывести на екран простой текст с помощью Angular 2:

  • Код включает в себя следующее:
    Вы можете настраивать index.html используя typescript. SystemJS транслирует код TypeScript на JS перед запуском приложения с помощью опции transpiler.
  • Если не транслировать код на JavaScript, перез запуском приложения вы можете увидеть предупреждения компилятора и ошибки.
  • TypeScript генерирует метаданные для каждого отдельно взятого класса когда опция emitDecoratorMetadata включена. Если не установить эту опцию будет генерироваться большой объем неиспользуемых метаданных, которые влияют на размер файла и время выполнения скрипта.
  • Angular 2 использует пакеты из app в которой файлы имеют расширение .ts
  • Следующим будет загружатся главный (main) компонет. Если компонент не найден в консоль будет выведена ошибка.
  • Когда Angular вызывает bootstrap функцию в main.ts и читает метаданные компонента, находит ‘app’ селектор и расположение тега, а после запускает приложение.

Для запуска кода понадобиться TypeScript файл который находится в app директории.

hello_world_main.ts

Теперь создадим компонент на TypeScript:

hello_world_app.component.ts

  • Декоратор @Component использует конфигурацию объекта что бы создать компонент.
  • Селектор создает инстанс компонента где находит <my-app> тег
  • @View создержит шаблон по которому собиратеся представление
  • export определяет доступность компонента вне файла.

Давайте выполним следующие шаги, что бы увидеть, как приведенный выше код работат:

  • Сохраните HTML код как index.html который мы создали в главе Окружение.
  • Откройте терминал и запустите

Или используйте другой путь:

  • Сохраните HTML код как angular2_hello_world.html в корне вашего сервера
  • Откройте файл на вашем хосте с браузера. (http://localhost/angular_hello_world.html)
Angular 2 — Hello World

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