Настройка среды Angular 2 TypeScript

В этой главе для создания приложений Angular используется TypeScript, что также является официальной рекомендацией. Примеры в этом руководстве также написаны на TypeScript.

TypeScript — это бесплатный язык программирования с открытым исходным кодом, разработанный Microsoft. Это надмножество JavaScript, расширяющее синтаксис JavaScript.

Если вы не знаете TypeScript, можете обратиться к следующим ресурсам:

Прежде чем начать, вам нужно убедиться, что у вас установлен npm. Если вы не установили npm или не понимаете npm, можете ознакомиться с нашим руководством:Введение в использование NPM。

Поскольку доступ к официальному реестру npm в Китае слишком медленный, здесь я использовал зеркало npm от Taobao. Способ установки следующий:

$ npm install -g cnpm --registry=https://registry.npmmirror.com

После выполнения мы можем использовать команду cnpm для установки модулей:

$ cnpm install

Шаг 1: Создание и настройка проекта

Создайте каталог

$ mkdir angular-quickstart
$ cd angular-quickstart

Создайте файлы конфигурации

Для проекта Angular требуются следующие файлы конфигурации:

package.jsonУказывает пакеты зависимостей npm, необходимые для этого проекта.
tsconfig.jsonОпределяет, как компилятор TypeScript генерирует код JavaScript из исходных файлов проекта.
typings.jsonПредоставляет дополнительные файлы определений для библиотек, которые компилятор TypeScript не может распознать.
systemjs.config.jsПредоставляет загрузчику модулей информацию о том, где найти модули приложения, и регистрирует все необходимые пакеты зависимостей. Он также включает пакеты, необходимые для последующих примеров в этом документе.

Создайте следующие файлы в angular-quickstart, как показано в коде ниже:

Файл package.json:

{ "name": "angular-quickstart", "version": "1.0.0", "scripts": { "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ", "lite": "lite-server", "postinstall": "typings install", "tsc": "tsc", "tsc:w": "tsc -w", "typings": "typings" }, "license": "ISC", "dependencies": { "@angular/common": "2.0.0", "@angular/compiler": "2.0.0", "@angular/core": "2.0.0", "@angular/forms": "2.0.0", "@angular/http": "2.0.0", "@angular/platform-browser": "2.0.0", "@angular/platform-browser-dynamic": "2.0.0", "@angular/router": "3.0.0", "@angular/upgrade": "2.0.0", "core-js": "^2.4.1", "reflect-metadata": "^0.1.3", "rxjs": "5.0.0-beta.12", "systemjs": "0.19.27", "zone.js": "^0.6.23", "angular2-in-memory-web-api": "0.0.20", "bootstrap": "^3.3.6" }, "devDependencies": { "concurrently": "^2.2.0", "lite-server": "^2.2.2", "typescript": "^2.3.4", "typings":"^1.3.2" } }

Файл tsconfig.json:

{ "compilerOptions": { "target": "es5", "module": "commonjs", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false } }

Файл typings.json:

{ "globalDependencies": { "core-js": "registry:dt/core-js#0.0.0+20160725163759", "jasmine": "registry:dt/jasmine#2.2.0+20160621224255", "node": "registry:dt/node#6.0.0+20160909174046" } }

Файл systemjs.config.js:

/** * Системная конфигурация для примеров Angular * Настройте по мере необходимости для нужд вашего приложения. */ (function (global) { System.config({ paths: { // пути служат псевдонимами 'npm:': 'node_modules/' }, // map сообщает загрузчику System, где искать нужные модули map: { // наше приложение находится в папке app app: 'app', // пакеты Angular '@angular/core': 'npm:@angular/core/bundles/core.umd.js', '@angular/common': 'npm:@angular/common/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'npm:@angular/http/bundles/http.umd.js', '@angular/router': 'npm:@angular/router/bundles/router.umd.js', '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', // другие библиотеки 'rxjs': 'npm:rxjs', 'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api', }, // packages сообщает загрузчику System, как загружать, когда отсутствует имя файла и/или расширение packages: { app: { main: './main.js', defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' }, 'angular2-in-memory-web-api': { main: './index.js', defaultExtension: 'js' } } }); })(this);

Далее мы используем команду cnpm для установки пакетов зависимостей:

$ cnpm install

После успешного выполнения в каталоге angular-quickstart будет создан каталог node_modules, который содержит модули, необходимые для этого примера. Мы можем посмотреть структуру каталогов проекта:

Шаг 2: Создание приложения

Мы используем NgModules, чтобы организовать приложения Angular в функциональные блоки кода, связанные с возможностями.

Сам Angular разделен на отдельные модули Angular, поэтому в нашем приложении нам нужно импортировать только те части Angular, которые нам нужны.

Каждому приложению Angular нужен по крайней мере одинкорневой модуль, который в примере — AppModule.

Далее мы создаем каталог app в каталоге angular-quickstart:

$ mkdir app
$ cd app

Затем создайте файл app.module.ts в каталоге app, как показано в коде ниже:

app.module.ts файл:

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; @NgModule({ imports: [ BrowserModule ] }) export class AppModule { }

Поскольку QuickStart — это веб-приложение, работающее в браузере, корневому модулю необходимо импортировать BrowserModule из @angular/platform-b и добавить его в массив imports.

Создание компонента и добавление его в приложение

Каждое Angular-приложение имеет как минимум одинкорневой компонент, в примере это AppComponent. Код файла app.component.ts выглядит следующим образом:

app.component.ts файл:

import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: '<h1>Моё первое Angular-приложение</h1>' }) export class AppComponent { }

Пояснение к коду:

Приведённый выше код изangular2/coreимпортирует пакетComponent.
@Component— этодекораторAngular 2, он связывает метаданные с классом компонента AppComponent.
my-app— это CSS-селектор, который можно использовать в HTML-тегах как компонент.
@viewсодержитtemplate, указывая Angular, как отображать представление компонента.
exportуказывает, что компонент можно использовать вне файла.

Далее мы снова открываем файл app.module.ts, импортируем новый AppComponent и добавляем его в поля declarations и bootstrap декоратора NgModule:

app.module.ts файл:

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }

Шаг 4: Запуск приложения

Далее нам нужно указать Angular, как запустить приложение.

Создайте файл main.ts в каталоге angular-quickstart/app со следующим кодом:

файл main.ts:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; const platform = platformBrowserDynamic(); platform.bootstrapModule(AppModule);

Приведённый выше код инициализирует платформу, позволяя вашему коду выполняться, затем запускает ваш AppModule на этой платформе.

Определите страницу-хост приложения

Создайте файл index.html в каталоге angular-quickstart со следующим кодом:

Файл index.html:

<html> <head> <title>Angular 2: пример — учебное руководство (example.com)</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css">   <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.js"></script> <script src="node_modules/reflect-metadata/Reflect.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script>  <script src="systemjs.config.js"></script> <script> System.import('app').catch(function(err){ console.error(err); }); </script> </head>  <body> <my-app>Загрузка...</my-app> </body> </html>

Здесь стоит отметить следующее:

Библиотеки JavaScript:core-js— это полифилл-библиотека для старых браузеров,zone.jsиreflect-metadataбиблиотека требуется Angular, а библиотека SystemJS используется для загрузки модулей.
Файл конфигурации SystemJS и скрипт могут импортировать и запускать модуль приложения, который мы только что написали в главном файле.
Тег <my-app> — это место, где загружается приложение.

Добавьте немного стилей

Мы можем задать нужные стили в файле styles.css в каталоге angular-quickstart:

файл styles.css:

/* Основные стили */ h1 { color: #369; font-family: Arial, Helvetica, sans-serif; font-size: 250%; } h2, h3 { color: #444; font-family: Arial, Helvetica, sans-serif; font-weight: lighter; } body { margin: 2em; }

Шаг 6: Скомпилируйте и запустите приложение

Откройте окно терминала и введите следующую команду:

npm start

Откройте http://localhost:3000/, и браузер отобразит следующий результат:

На этом этапе создано наше первое приложение Angular 2. Итоговая структура каталогов:

Исходный код, использованный в этой статье, можно скачать следующим способом; он не включает каталоги node_modules и typings.

Скачать исходный код