Настройка окружения JavaScript для Angular 2

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

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

Структура файловых каталогов, используемая в этой главе, приведена ниже:

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

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

$ mkdir angular-quickstart
$ cd angular-quickstart

Загрузите необходимые библиотеки

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

Создайте файл package.json, код выглядит следующим образом:

Файл package.json:

{ "name": "angular2-quickstart", "version": "1.0.0", "scripts": { "start": "npm run lite", "lite": "lite-server" }, "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", "zone.js": "^0.6.23", "angular2-in-memory-web-api": "0.0.20", "bootstrap": "^3.3.6" }, "devDependencies": { "concurrently": "^2.0.0", "lite-server": "^2.2.0" } }

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

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

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

$ cnpm install

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

Создание компонентов Angular

Компоненты — это основа и ядро приложений Angular. Компонент инкапсулирует определённую функцию, а компоненты работают вместе, чтобы собрать полноценное приложение.

Вообще говоря, компонент — это класс JavaScript, используемый для управления шаблоном представления.

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

$ mkdir app
$ cd app

И добавляем файл компонента app.component.js со следующим содержимым:

Файл app.component.js:

(function(app) { app.AppComponent = ng.core.Component({ selector: 'my-app', template: '<h1>My Angular Application</h1>' }) .Class({ constructor: function() {} }); })(window.app || (window.app = {}));

Далее давайте проанализируем приведённый выше код:

Мы создаём визуальный компонент с именем AppComponent, цепочкой вызывая методы Component и Class в глобальном пространстве имён ng.core ядра Angular.

Метод Component принимает объект конфигурации, содержащий два свойства. Метод Class — это то место, где мы добавляем свойства и методы к компоненту, которые привязаны к соответствующим представлениям и поведениям.

Модули

Приложения Angular являются модульными. В ES5 нет встроенной системы модулей, поэтому можно использовать стороннюю систему модулей. Затем мы создаём независимое пространство имён app для приложения, а код файла можно обернуть в IIFE (Immediately Invoked Function Expression):

(function(app) {
})(window.app || (window.app = {}));

Мы передаём глобальный объект пространства имён app в IIFE, и если он не существует, инициализируем его пустым объектом.

Большинство файлов приложения экспортируют код, добавляя что-либо в пространство имён app. Мы экспортировали AppComponent в файле app.component.js.

app.AppComponent =

Объект определения класса

В этом примере класс AppComponent имеет только пустой конструктор:

.Class({
    constructor: function() {}
});

Когда мы хотим создать полноценное приложение, мы можем расширить этот объект свойствами и логикой приложения.

Объект определения компонента

ng.core.Component() сообщает Angular, что объект определения класса является компонентом Angular. Объект конфигурации, переданный в ng.core.Component(), имеет два поля: selector и template.

ng.core.Component({ selector: 'my-app', template: '<h1>My Angular Application</h1>' })

selector определяет простой CSS-селектор my-app для host HTML-элемента. Когда Angular встречает элемент my-app в host HTML, он создаёт и отображает экземпляр AppComponent.

Свойство template содержит шаблон компонента.

Добавление NgModule

Приложения Angular состоят из модулей Angular, которые содержат компоненты и всё остальное, необходимое приложению Angular.

Затем создайте файл app/app.module.js со следующим содержимым:

Файл app.module.js:

(function(app) { app.AppModule = ng.core.NgModule({ imports: [ ng.platformBrowser.BrowserModule ], declarations: [ app.AppComponent ], bootstrap: [ app.AppComponent ] }) .Класс({ constructor: function() {} }); })(window.app || (window.app = {}));

Запустите приложение

Добавьте файл app/main.js:

Файл app/main.js:

Нам нужны две вещи, чтобы запустить приложение:

Функция platformBrowserDynamic().bootstrapModule в Angular.
Корневой модуль приложения AppModule, упомянутый выше.

Далее создайте index.html со следующим кодом:

Файл index.html:

<html> <head> <meta charset="utf-8"> <title>Angular 2 Пример - example.com</title> <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/rxjs/bundles/Rx.js"></script> <script src="node_modules/@angular/core/bundles/core.umd.js"></script> <script src="node_modules/@angular/common/bundles/common.umd.js"></script> <script src="node_modules/@angular/compiler/bundles/compiler.umd.js"></script> <script src="node_modules/@angular/platform-browser/bundles/platform-browser.umd.js"></script> <script src="node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>  <script src='app/app.component.js'></script> <script src='app/app.module.js'></script> <script src='app/main.js'></script> </head>  <body> <my-app>Загрузка...</my-app> </body> </html>

Анализ index.html

1. Загрузите необходимые библиотеки JavaScript;
2. Загрузите наши собственные файлы JavaScript, обратите внимание на порядок;
3. Мы добавляем тег <my-app> внутри тега <body>.

Процесс выполнения таков: когда Angular вызывает функцию bootstrapModule в main.js, она читает метаданные AppModule, находит AppComponent среди bootstrap-компонентов, находит селектор my-app, находит элемент с именем my-app и затем загружает содержимое между этими тегами.

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

Код файла styles.css:

файл styles.css:

h1 { color: #369; font-family: Arial, Helvetica, sans-serif; font-size: 250%; } body { margin: 2em; }

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

$ npm start

Посетите http://localhost:3000/, браузер отображает:

Таким образом, наше первое приложение Angular 2 завершено. Исходный код, использованный в этой статье, можно скачать следующим способом, исключая node_modules.

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

Другие расширения