Angular 2 – Hello World

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.6/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.6/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.6/angular2.dev.js"></script>
    <script>
      System.config({
        transpiler: 'typescript',
        typescriptOptions: { emitDecoratorMetadata: true },
        packages: {'app': {defaultExtension: 'ts'}},
        map: { 'app': './angular2/src/app' }
      });
      System.import('app/hello_world_main')
            .then(null, console.error.bind(console));
    </script>
  </head>
<body>
   <my-app>Loading...</my-app>
</body>
</html>
  • Код включает в себя следующее:
    Вы можете настраивать 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

import {bootstrap} from "angular2/platform/browser"
import {MyHelloWorldClass} from "./hello_world_app.component"

bootstrap(MyHelloWorldClass);

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

hello_world_app.component.ts

import {Component, View} from "angular2/core";

@Component({
   selector: 'my-app'
})

@View({
  template: '<h2>Hello World !!</h2>'
})

export class MyHelloWorldClass {

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

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

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

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

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.