Angular 2 Developer Preview

Команда ангуляра объявила о выходе Angular 2 Developer Preview и я решил его пощупать. Для того чтобы поиграться с новым ангуляром нам понадобятся node.js и какой-нибудь текстовый редактор с поддержкой синтаксиса TypeScript.

В качестве редактора я использую atom. У него есть хороший плагин который поддерживает подсветку синтаксиса, валидацию, автодополнение и компиляцию в js при сохранении файла.

Как вы уже знаете (или сейчас узнаете :) angular2 написан на языке TypeScript, который в свою очередь сделан в Microsoft. TypeScript - это надмножество ES6 (или ES2015 если угодно) с поддержкой типизации на этапе компиляции и еще ряда других фичей. Компилировать TS код можно в ES5 или в ES6.

Чтобы установить TypeScript выполните команду

npm install -g typescript  

После этого у вас в консоле будет доступна команда tsc - это собственно и есть компилятор для TypeScript. Убедитесь что у вас установлена версия не ниже 1.5, иначе в нем не будет некоторых возможностей нужных для angular 2.

Само приложение можно писать как на TypeScript, так и на JavaScript любой версии. Но судя под примерам в документации на TypeScript писать будет сильно проще чем на чистом JS. К тому же лично мне хочется попробывать типизированный язык для фронтенда;)

Я сейчас не буду подробно останавливаться на описании TypeScript, об этом прекрасно написано в документации на официальном сайте. Скажу лишь, что для того чтобы можно было использовать библиотеки написанные на JS для них нужно использовать так называемые TypeScript Definitions. И есть даже целый опенсорсный проект в котором народ пишет такие дефинишены для популярных проектов. Их можно искать и скачивать на сайте http://definitelytyped.org/tsd/, а можно поставить консольную утилиту которая этот процесс упростит:

npm install -g tsd  

С помощью этой утилиты мы скачаем дефинишины для angular2:

tsd query angular2 --action install  

Остался последний шаг чтобы можно было начать писать приложение - настроить TypeScript-компилятор. По дефолту он сохраняет скопилированный файл в той же папке где и исходный, с тем же именем, но с расширением js. Я же предпочитаю отделять мух от котлет - отдельно хранить исходные ts файлы и отдельно скомпилированные файлы. Вот пример простейшей структуры приложения:

└── web
    ├── index.html
    ├── js
    │   ├── main.js
    └── src
        ├── main.ts
        ├── tsconfig.json
        └── typings
            └── angular2
                └── angular2.d.ts

Файл tsconfig.json в папке ts хранит настройки компиляции для вашего проекта. Такой файл поддерживается компилятором начиная с версии 1.5. У меня он сгенерировался автоматически и я его немного поправил:

{
    "version": "1.5.0-alpha",
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "declaration": false,
        "noImplicitAny": false,
        "removeComments": true,
        "noLib": false,
        "preserveConstEnums": true,
        "suppressImplicitAnyIndexErrors": true,
        "emitDecoratorMetadata": true,
        "outDir": "../js"
    },
    "filesGlob": [
        "./**/*.ts",
        "!./node_modules/**/*.ts"
    ],
    "files": [
        "./main.ts"
    ]
}

Теперь можно начать писать приложение:) В index.html напишем следующий код:

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">
    <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
    <script src="https://jspm.io/system@0.16.js"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.23/angular2.dev.js"></script>
</head>  
<body>  
    <my-app></my-app>

    <script>
        System.config({
            baseURL: './js/'
        });
        System.import('main');
    </script>
</body>  
</html>  

Как видите для простоты все внешние зависимости подключаются с внешних серверов. При этом мы все равно имеем автокомплит для ангуляра так как дефинишины для него мы установили локально. Для загрузки модулей используется SystemJS. Я раньше им не пользовался, но во всех официальных доках по второму ангуляру используется именно он. Я изменил только базовый урл для загрузки модулей, так как по дефолту он грузит из той же папки где находится index.html.

Затем импортируется модуль main, вот его содержимое:

/// <reference path="typings/angular2/angular2.d.ts" />
import {Component, View, bootstrap} from 'angular2/angular2';

@Component({
    selector: 'my-app'
})
@View({
    template: `
        <h1>My ng2 application</h1>
    `
})
class AppComponent {  
}

bootstrap(AppComponent);  

В итоге мы получили небольшое, но рабочее приложения на Angular 2, с которым уже можно эксперементировать.