1. Начало работы c Angular
  2. Создание компонента Angular
  3. Создание модуля приложения
  4. Запуск приложения
  5. Определение конфигурации
  6. Создание главной страницы
  7. Ссылки

Что такое Angular. Начало работы с фреймворком

Angular представляет фреймворк от компании Google для создания клиентских приложений. Прежде всего он нацелен на разработку SPA-решений (Single Page Application), то есть одностраничных приложений. В этом плане Angular является наследником другого фреймворка AngularJS. В то же время Angular это не новая версия AngularJS, а принципиально новый фреймворк.

Angular предоставляет такую функциональность, как двустороннее связывание, позволяющее динамически изменять данные в одном месте интерфейса при изменении данных модели в другом, шаблоны, маршрутизация и так далее.

Одной из ключевых особенностей Angular является то, что он использует в качестве языка программирования TypeScript.

Но мы не ограничены языком TypeScript. При желании можем писать приложения на Angular с помощью таких языков как Dart или JavaScript. Однако TypeScript все таки является основным языком для Angular.

Последняя версия Angular - Angular 7 вышла в октябре 2018 года. Официальный репозиторий фреймворка на гитхабе: https://github.com/angular/angular. Там вы можете найти сами исходные файлы, а также некоторую дополнительную информацию.

Начало работы c Angular

Для работы с Angular необходимо установить сервер Node.js и пакетный менеджер npm, если они отсутствуют на рабочей машине. Для установки можно использовать программу установки node.js. Вместе с сервером она также установит и npm. При этом особого какого-то знания для работы с NodeJS и npm не требуется.

После установки необходимых инструментов создадим простейшее приложение. Для этого определим на жестком диске папку приложения. Путь она будет называться helloapp. В этой папке создадим новый файл package.json со следующим содержимым:

{
  "name": "helloapp",
  "version": "1.0.0",
  "description": "First Angular 7 Project",
  "author": "Eugene Popov <metanit.com>",
  "scripts": {
    "dev": "webpack-dev-server --hot --open",
    "build": "webpack"
  },
  "dependencies": {
    "@angular/common": "~7.0.0",
    "@angular/compiler": "~7.0.0",
    "@angular/core": "~7.0.0",
    "@angular/forms": "~7.0.0",
    "@angular/platform-browser": "~7.0.0",
    "@angular/platform-browser-dynamic": "~7.0.0",
    "@angular/router": "~7.0.0",
    "core-js": "^2.5.7",
    "rxjs": "^6.3.3",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@types/node": "^10.12.0",
    "typescript": "^3.0.0",
    "webpack": "^4.21.0",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.9",
    "angular2-template-loader": "^0.6.2",
    "awesome-typescript-loader": "^5.2.1",
    "uglifyjs-webpack-plugin": "^2.0.0"
  }
}

Данный файл устанавливает пакеты и зависимости, которые будут использоваться проектом. В секции dependencies в основном определяются пакеты angular, которые необходимы приложению для работы. В секции devDependencies прописаны только те пакеты, которые будут использоваться для разработки. В частности, это пакеты для работы с языком typescript (так как мы будем писать код приложения на языке TypeScript), а также пакеты, необходимые для сборки приложения в один файл с помощью сборщика webpack.

Затем откроем командную строку (терминал) и перейдем в ней к папке проекта с помощью команды cd:

C:\WINDOWS\system32>cd C:\angular2\helloapp

И затем выполним команду npm install, которая установит все необходимые модули:

C:\angular2\helloapp>npm install

После выполнения этой команды в папке проекта должна появиться подпапка node_modules, которая содержит все используемые зависимости и пакеты.

Затем создадим в папке проекта подпапку, которую назовем src – она будет содержать все исходные файлы. И далее в папке src создадим подкаталог app.

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

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

import { Component } from '@angular/core'

@Component({
  selector: 'my-app',
  template: `
    <label>Введите имя:</label>
    <input [(ngModel)]="name" placeholder="name" />
    <h1>Добро пожаловать !</h1>
  `
})
export class AppComponent {
  name = ''
}

В начале файла определяется директива import, которая импортирует функциональность модуля @angular/core, предоставляя доступ к функции декоратора @Component.

Далее собственно идет функция-декоратор @Component, которая ассоциирует метаданные с классом компонента AppComponent. В этой функции, во-первых, определяется параметр selector или селектор css для HTML-элемента, который будет представлять компонент. Во-вторых, здесь определяется параметр template или шаблон, который указывает, как надо визуализировать компонент. В этом шаблоне задана двусторонняя привязка с помощью выражений [(ngModel)]="name" и `` к некоторой модели name.

И в конце экспортируется класс компонента AppComponent, в котором как раз определяется модель name – в данном случае это пустая строка.

Создание модуля приложения

Приложение Angular состоит из модулей. Модульная структура позволяет легко подгружать и задействовать только те модули, которые непосредственно необходимы. И каждое приложение имеет как минимум один корневой модуль. Поэтому создадим в папке src/app новый файл, который назовем app.module.ts со следующим содержимым:

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

Этот модуль, который в данном случае называется AppModule, будет входной точкой в приложение.

С помощью директив import здесь импортируется ряд нужных нам модулей. Прежде всего, это модуль NgModule. Для работы с браузером также требуется модуль BrowserModule. Так как наш компонент использует элемент input или элемент формы, то также подключаем модуль FormsModule. И далее импортируется созданный ранее компонент.

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

Теперь нам надо указать Angular, как запускать наше приложение. Для этого создадим в папке src (на уровень выше, чем расположены файлы app.component.ts и app.module.ts) файл main.ts со следующим содержимым:

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

Этот код инициализирует платформу, которая запускает приложение, и затем использует эту платформу для загрузки модуля AppModule.

Также в папке src определим еще один файл, который назовем polyfills.ts со следующим кодом:

import 'core-js/es6'
import 'core-js/es7/reflect' // для поддержки Reflect Api
import 'zone.js/dist/zone' // zone используется angular

Данный файл определяет полифилы – инструменты, которые необходимы для поддержки приложения на Angular старыми браузерами. В частности, первая большая группа полифилов предназвачена для работы в IE9-11. Однако если мы не планируем поддерживать этот браузер, то данную группу импорта пакетов можно не включать. Но в любом случае файл должен содержать импорт zone: import 'zone.js/dist/zone'.

Определение конфигурации

Поскольку для определения кода приложения применяется язык TypeScript, поэтому также создадим в корневой папке проекта новый файл tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "typeRoots": [
      "node_modules/@types/"
    ]
  },
  "exclude": [
      "node_modules"
  ]
}

Данный файл определяет настройки для компилятора TypeScript. Опция compilerOptions устанавливает параметры компиляции. А опция exclude исключает из компиляции папку node_modules, которая содержит все загруженные пакеты.

Если мы используем TypeScript для работы с Angular, то эти два файла фактически будут присутствовать в каждом проекте. И их можно переносить из проекта в проект с минимальными изменениями. Например, в файле package.json можно будет задать какие-то другие версии пакетов, если предыдущие версии устарели. Можно будет изменить название проекта, версию. Можно подправить настройки TypeScript, но в целом общая организация будет той же.

Поскольку наше приложение будет разбито на несколько отдельных файлов, то для их сборки будем использовать популярняй сборщик webpack. Поэтому также определим в корневой папке проекта еще один файл webpack.config.js:

var path = require('path')
var webpack = require('webpack')
var UglifyJSPlugin = require('uglifyjs-webpack-plugin') // плагин минимизации
module.exports = {
  entry: {
    polyfills: './src/polyfills.ts',
    app: './src/main.ts'
  },
  output: {
    path: path.resolve(__dirname, './public'), // путь к каталогу выходных файлов - папка public
    publicPath: '/public/',
    filename: '[name].js' // название создаваемого файла
  },
  resolve: {
    extensions: ['.ts', '.js']
  },
  module: {
    rules: [
      //загрузчик для ts
      {
        test: /\.ts$/, // определяем тип файлов
        use: [
          {
            loader: 'awesome-typescript-loader',
            options: { configFileName: path.resolve(__dirname, 'tsconfig.json') }
          },
          'angular2-template-loader'
        ]
      }
    ]
  },
  plugins: [
    new webpack.ContextReplacementPlugin(
      /angular(\\|\/)core/,
      path.resolve(__dirname, 'src'), // каталог с исходными файлами
      {} // карта маршрутов
    ),
    new UglifyJSPlugin()
  ]
}

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

В данном случае я не буду подробно разбирать конфигурацию webpack, так как она более подробно разбирается в соответствующей теме. Отмечу только основные моменты. В секции entry определяются входные файлы для компиляции и имена сборок. В данном случае для файла src/polyfills.ts будет создаваться сборка polyfills, а из файла src/main.ts (который в свою очередь подтягивает другие файлы приложения) будет комилироваться сборка app.

В секции output определяется, что сборки будут находиться в каталоге public, и для них будут созданы файлы с названиями сборок. Плейсхолдер [name] будет передать название сборки, то есть polyfills или app.

В секции resolve указываются расширения, которые будут применяться к модулям в файлах typescript.

Секция module.rules определяет загрузчики файлов typescript, которые будут использоваться для сборки проекта. По умолчанию Webpack понимает только файлы javascript, поэтому для файлов ts необходимы специальные инструменты – загрузчики. Здесь для загрузки файлов typescript применяются загрузчики awesome-typescript-loader и angular2-template-loader.

Последняя часть файла – секция plugins определяет плагины – вспомогательные инструменты, которые применяются при сборке. В частности, плагин webpack.ContextReplacementPlugin позволяет управлять путями к файлам вне зависимости используем мы Windows или Linux. Плагин UglifyJsPlugin минифицирует код сборок.

Создание главной страницы

В конце определим главную страницу index.html в корневой папке проекта:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hello Angular 7</title>
  </head>
  <body>
    <my-app>Загрузка...</my-app>
    <script src="public/polyfills.js"></script>
    <script src="public/app.js"></script>
  </body>
</html>

А в элементе body определен элемент <my-app>, в который собственно и будет загружаться приложение.

Далее подгружаются скомпилированные и собранные с помощью TypeScript и Webpack сборки – polyfills.js и app.js.

В итоге у нас получится следующая структура проекта:

Структура проекта

И теперь, когда все готово, мы можем собрать проект и запустить приложение. Для этого в командной строке (терминале) перейдем к папке проекта с помощью команды cd и затем выполним команду npm run dev:

C:\WINDOWS\system32>cd C:\angular2\helloapp
C:\angular2\helloapp>npm run dev

После этого в веб-браузере будет запущено приложение, и мы сможем протестировать его работу:

Скриншот приложения

Введем в текстовое поле какое-нибудь имя, и оно тут же отобразится в заголовке.

Ссылки

| Назад | В начало | Вперед | | ———: | ————: | ———-: |

@:markdown