15 янв 2016 в 11:30

Angular 2: Включить

Ожидает приглашения

Шаг 1

Самый простой и быстрый способ сделать, или попробовать что-то сделать на Angular 2 – это Plunker! plnkr.co/edit/?p=preview. Регистрируемся или авторизуемся с помощью github.com (вообще, можно и без регистрации поиграться, но сохранить не получится), и создаем новый Plunk для Angular 2 (TS).

После выполнения вышеуказанных действий, Вы, можно сказать, уже сделали своё первое приложение на Angular 2, которое просто говорит «Hello Angular2».

Если Вы хотите работать на локальном сервере (не компьютере, а именно СЕРВЕРЕ), а не на Plunker'e, и не хотите каждый раз устанавливать модули node.js, прошу под кат!

1) Создаём папку (назовите как-угодно) Angular.

2) В только что созданной Вами папке создаём 2 файла: index.html и config.js.

3) В config.js вставляем следующий код:

  System.config({
    //указываем, что для компиляции используем ТайпСкрипт
    transpiler: 'typescript',

    //Настройки компиляции ТайпСкрипт'а
    typescriptOptions: {
      emitDecoratorMetadata: true
    },

    //map говорит системе где искать загружаемые файлы
    map: {
      app: "./app"
    },

    //packages определяет пакеты приложения
      packages: {
        app: {
          main: './boot.ts',
          defaultExtension: 'ts'
        }
      }
  });

4) В index.html вставляем следующий код:

<!DOCTYPE html>
<html>
	<head>
		<title>Angular2</title>
		<!--Все файлы ниже,  необходимы для работы Angular 2-->
		<script src="https://code.angularjs.org/2.0.0-beta.0/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="config.js"></script>
		<script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
		<script src="https://code.angularjs.org/2.0.0-beta.0/angular2.min.js"></script>
		<script src="https://code.angularjs.org/2.0.0-beta.0/http.min.js"></script>
		<script>
			System.import('app')
		  	.catch(console.error.bind(console));
		</script>
	</head>

	<!--В body мы указываем 2 тэга (селектора) 'my-app', которые будут содержать в себе наше приложение-->
	<body>
		<my-app>
			загрузка...
		</my-app>
	</body>
</html>

5) Создаём папку 'app' (в официальной документации создают папку с таким именем. Некоторым удобно называть 'src', как в Plunker'е).

6) В папке 'app' создаём 2 файла: boot.ts и app.ts

7) В файле boot.ts мы подключаем (импортируем) bootstrap и наше приложение (то самое, которое мы будем создавать. Этот файл «БУТ», по сути, является как «ботинком» для нашего приложения, потому что мы будем выводить наше приложение через этот самый только что подключенный bootstrap). Делаем мы это с помощью следующего кода:

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

bootstrap(App, [ ])
  .catch(err => console.error(err));

8) И, наконец, в файле app.ts мы создаём наше первое приложение на Angular 2, с помощью ниже приведённого кода:

//подключаем ядро
import {Component} from 'angular2/core'
//создаём компонент (модуль) нашего приложения
@Component({
  selector: 'my-app',
  providers: [],
  //определяем, как будет выглядеть наш компонент (обратите внимание на кавычки! это не " ' ". С помощью них, мы можем построчно переносить наш код)
  template: `
    Привет,  {{name}}!
  `,
  directives: []
})
//и делаем наш компонент доступным для нашего приложения
export class App {
  constructor() {
    this.name = 'Angular2'
  }
}

Запускаем сервер, переходим по адресу созданного нами приложения и…

Результат: Привет, Angular2!

Кажется, что чересчур много всего мы тут натворили, но нет, все это необходимо для того, чтобы, грубо говоря, нажать кнопку «Включить» у Angular 2.

Сохраните это в отдельную папку и каждый раз, когда будете создавать новое приложение на Angular 2, копируйте ее, вместе с её содержимым и дальше меняйте название и изменяйте файлы (конечно, если речь не идёт о крупном проэкте). Это сохранит Вам время, а ещё больше сохранит нервы.

При подготовке данного материала использовал:

Хабы:

Angular