Oleh Hrebeniuk

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

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

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <title>Hello World</title>
5
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
6
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
7
    <script src="https://code.angularjs.org/2.0.0-beta.6/angular2-polyfills.js"></script>
8
    <script src="https://code.angularjs.org/tools/system.js"></script>
9
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
10
    <script src="https://code.angularjs.org/2.0.0-beta.6/Rx.js"></script>
11
    <script src="https://code.angularjs.org/2.0.0-beta.6/angular2.dev.js"></script>
12
    <script>
13
      System.config({
14
        transpiler: 'typescript',
15
        typescriptOptions: { emitDecoratorMetadata: true },
16
        packages: {'app': {defaultExtension: 'ts'}},
17
        map: { 'app': './angular2/src/app' }
18
      });
19
      System.import('app/hello_world_main')
20
            .then(null, console.error.bind(console));
21
    </script>
22
  </head>
23
<body>
24
   <my-app>Loading...</my-app>
25
</body>
26
</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

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

4
bootstrap(MyHelloWorldClass);

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

hello_world_app.component.ts

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

3
@Component({
4
   selector: 'my-app'
5
})
6

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

11
export class MyHelloWorldClass {
12

13
}

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

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

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

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

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

Angular 2 - Hello World