Команда ангуляра объявила о выходе 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/[email protected]/traceur-runtime.js"></script>
<script src="https://jspm.io/[email protected]"></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, с которым уже можно эксперементировать.