Руководство по angular

Последнее обновление: 23.03.2023

  1. Глава 1. Введение в Angular

    1. Что такое Angular. Первый проект

    2. Построение проекта

    3. Первое приложение

  2. Глава 2. Основы Angular

    1. Компоненты

    2. Модули

    3. Загрузка приложения

    4. Стили и шаблоны компонента

    5. Привязка данных

    6. Работа с компонентами

    7. Взаимодействие между компонентами

    8. Привязка к событиям дочернего компонента

    9. Жизненный цикл компонента

    10. Шаблонные переменные, ViewChild, ContentChild

    11. Взаимодействие между модулями

  3. Глава 3. Директивы

    1. ngClass и ngStyle

    2. Создание атрибутивных директив

    3. Взаимодействие с пользователем, HostListener и HostBinding

    4. Получение параметров в директивах

    5. Структурные директивы ngIf, ngFor, ngSwitch

    6. Создание структурных директив

  4. Глава 4. Сервисы и dependency injection

    1. Сервисы

    2. Внедрение сервиса в другой сервис

    3. Опциональные сервисы

    4. Один сервис для всех компонентов

    5. Иерархия сервисов

  5. Глава 5. Работа с формами

    1. Модуль FormsModule и директива NgModel

    2. Получение и изменение модели

    3. Состояние модели и валидация

    4. Директива NgForm

    5. Reactive Forms

  6. Глава 6. HTTP и взаимодействие с сервером

    1. HttpClient и отправка запросов

    2. Объект Observable и библиотека RxJS

    3. Обработка ошибок

    4. Отправка данных в запросе

    5. POST-запросы

  7. Глава 7. Маршрутизация

    1. Определение маршрутов

    2. Создание ссылок

    3. Параметры маршрута

    4. Параметры строки запроса

    5. Программная навигация

    6. Дочерние маршруты

    7. Guards

  8. Глава 8. Pipes

    1. Работа с pipes

    2. Создание своих pipes

    3. Pure и Impure Pipes

    4. AsyncPipe

  9. Глава 9. Дополнительные статьи

    1. Webpack

    2. Grid и CRUD-операции

  • Глава 1. Введение в Angular
    • Что такое Angular. Первый проект
    • Построение проекта
    • Первое приложение
  • Глава 2. Основы Angular
    • Компоненты
    • Модули
    • Загрузка приложения
    • Стили и шаблоны компонента
    • Привязка данных
    • Работа с компонентами
    • Взаимодействие между компонентами
    • Привязка к событиям дочернего компонента
    • Жизненный цикл компонента
    • Шаблонные переменные, ViewChild, ContentChild
    • Взаимодействие между модулями
  • Глава 3. Директивы
    • ngClass и ngStyle
    • Создание атрибутивных директив
    • Взаимодействие с пользователем, HostListener и HostBinding
    • Получение параметров в директивах
    • Структурные директивы ngIf, ngFor, ngSwitch
    • Создание структурных директив
  • Глава 4. Сервисы и dependency injection
    • Сервисы
    • Внедрение сервиса в другой сервис
    • Опциональные сервисы
    • Один сервис для всех компонентов
    • Иерархия сервисов
  • Глава 5. Работа с формами
    • Модуль FormsModule и директива NgModel
    • Получение и изменение модели
    • Состояние модели и валидация
    • Директива NgForm
    • Reactive Forms
  • Глава 6. HTTP и взаимодействие с сервером
    • HttpClient и отправка запросов
    • Объект Observable и библиотека RxJS
    • Обработка ошибок
    • Отправка данных в запросе
    • POST-запросы
  • Глава 7. Маршрутизация
    • Определение маршрутов
    • Создание ссылок
    • Параметры маршрута
    • Параметры строки запроса
    • Программная навигация
    • Дочерние маршруты
    • Guards
  • Глава 8. Pipes
    • Работа с pipes
    • Создание своих pipes
    • Pure и Impure Pipes
    • AsyncPipe
  • Глава 9. Дополнительные статьи
    • Webpack
    • Grid и CRUD-операции

YooMoney:

410011174743222

Перевод на карту

Номер карты:

4048415020898850

Источник

Время на прочтение
7 мин

Количество просмотров 268K

Содержание

1 Введение в AngularJS
2 Engineering concepts in JavaScript frameworks
3 Modules
4 Understanding $scope
5 Controllers
6 Services and Factories
7 Templating with the Angular core
8 Directives (Core)
9 Directives (Custom)
10 Filters (Core)
11 Filters (Custom)
12 Dynamic routing with $routeProvider
13 Form Validation
14 Server communication with $http and $resource

1 Введение в AngularJS

Angular – MVW-фреймворк для разработки качественных клиентских веб-приложений на JavaScript. Он создан и поддерживается в Google и предлагает взглянуть на будущее веба, на то, какие новые возможности и стандарты он готовит для нас.

MVW означает Model-View-Whatever (модель – вид – что угодно), то есть гибкость в выборе шаблонов проектирования при разработке приложений. Мы можем выбрать модели MVC (Model-View-Controller) или MVVM (Model-View-ViewModel).

Этот обучающий материал задумывался как отправная точка для изучения AngularJS, его концепций и API, чтобы помочь вам создавать великолепные веб-приложения современным способом.

AngularJS позиционирует себя как фреймворк, улучшающий HTML. Он собрал концепции из разных языков программирования, как JavaScript, так и серверных, и делает из HTML также нечто динамическое. Мы получаем подход, основанный на данных, к разработке приложений. Нет нужды обновлять Модель, DOM или делать какие-то другие затратные по времени операции, например, исправлять ошибки браузеров. Мы концентрируемся на данных, данные же заботятся об HTML, а мы просто занимаемся программированием приложения.

Инженерные концепции в фрейморках JavaScript

Позиция AngularJS по работе с данными и другими инженерными концепциями отличается от таких фреймворков, как Backbone.js and Ember.js. Мы довольствуемся уже известным нам HTML, а Angular самостоятельно его улучшает. Angular обновляет DOM при любых изменениях Модели, которая живёт себе в чистых Объектах JavaScript с целью связи с данными. Когда обновляется Модель, Angular обновляет Объекты, которые содержат актуальную информацию о состоянии приложения.

2.1 MVC и MVVM

Если вы привыкли делать статичные сайты, вам знаком процесс создания HTML вручную, кусочек за кусочком, когда вы вписываете в страницу нужные данные и повторяете сходные части HTML снова и снова. Это могут быть столбцы решётки, структура для навигации, список ссылок или картинок, и т.п. Когда меняется одна маленькая деталь, приходится обновлять весь шаблон, и все последующие его использования. Также приходится копировать одинаковые куски кода для каждого элемента навигации.

Держитесь за кресло – в Angular существует разделение обязанностей и динамический HTML. А это значит, что наши данные живут в Модели, наш HTML живёт в виде маленького шаблона, который будет преобразован в Вид, а Контроллер мы используем для соединения двух этих понятий, обеспечивая поддержку изменений Модели и Вида. То есть, навигация может выводиться динамически, создаваясь из одного элемента списка, и автоматически повторяться для каждого пункта из Модели. Это упрощённая концепция, позже мы ещё поговорим о шаблонах.

Разница между MVC и MVVM в том, что MVVM специально предназначен для разработки интерфейсов. Вид состоит из слоя презентации, ВидМодель содержит логику презентации, а Модель содержит бизнес-логику и данные. MVVM была разработана для облегчения двусторонней связи данных, на чём и процветают фреймворки типа AngularJS. Мы сосредоточимся на пути MVVM, так как в последние годы Angular склоняется именно туда.

2.2 Двусторонняя связь данных

Двусторонняя связь данных – очень простая концепция, предоставляющая синхронизацию между слоями Модели и Вида. Изменения Модели передаются в Вид, а изменения Вида автоматически отражаются в Модели. Таким образом, Модель становится актуальным источником данных о состоянии приложения.

Angular использует простые Объекты JavaScript для синхронизации Модели и Вида, в результате чего обновлять любой из них легко и приятно. Angular преобразовывает данные в JSON и лучше всего общается методом REST. При помощи такого подхода проще строить фронтенд-приложения, потому что всё состояние приложения хранится в браузере, а не передаётся с сервера по кусочкам, и нет опасения, что состояние будет испорчено или потеряно.

Связываем мы эти значения через выражения Angular, которые доступны в виде управляющих шаблонов. Также мы можем связывать Модели через атрибут под названием ng-model. Angular использует свои атрибуты для разных API, которые обращаются к ядру Angular.

2.3 Инъекция зависимостей (Dependency Injection, DI)

DI – шаблон разработки программ, который определяет, как компоненты связываются со своими зависимостями. Инъекция — это передача зависимости к зависимому Объекту, и эти зависимости часто называют Сервисами.

В AngularJS мы хитрым образом используем аргументы функции для объявления нужных зависимостей, а Angular передаёт их нам. Если мы забудем передать зависимость, но сошлёмся на неё там, где она нужна нам, Сервис будет не определен и в результате произойдёт ошибка компиляции внутри Angular. Но не волнуйтесь, angular выбрасывает свои ошибки и они очень просты в отладке.

2.4 Приложения на одну страницу (Single Page Application, SPA), управление состоянием и Ajax (HTTP)

В приложении на одну страницу (SPA) либо весь необходимый код (HTML, CSS and JavaScript) вызывается за одну загрузку страницы, либо нужные ресурсы подключаются динамически и добавляются к странице по необходимости, обычно в ответ на действия пользователя. Страница не перезагружается во время работы, не передаёт управление другой странице, хотя современные технологии из HTML5 позволяют одному приложению работать на нескольких логических страницах. Взаимодействие с SPA часто происходит при помощи фонового общения с сервером.

В более старых приложениях, когда состояние программы хранилось на сервере, случались различия между тем, что видит пользователь и тем, что хранилось на сервере. Также ощущалась нехватка состояния приложения в модели, так как все данные хранились в шаблонах HTML и динамичными не являлись. Сервер подготавливал статичный темплейт, пользователь вводил туда информацию и браузер отправлял её обратно, после чего происходила перезагрузка страницы и бэкенд обновлял состояние. Любое несохранённое состояние терялось, и браузеру нужно было скачивать все данные после обновления страниц заново.

Времена изменились, браузер хранит состояние приложение, сложная логика и фреймворки приобрели популярность. AngularJS хранит состояние в браузере и передаёт изменения при необходимости через Ajax (HTTP) с использованием методом GET, POST, PUT и DELETE. Красота в том, что сервер может быть независим от фротенда, а фронтенд – от сервера. Те же самые сервера могут работать с мобильными приложениями с совершенно другим фронтендом. Это даёт нам гибкость, так как на бэкенде мы работаем с JSON-данными любым удобным нам способом на любом серверном ЯП.

2.5 Структура приложения

У Angular есть разные API, но структура приложения обычно одна и та же, поэтому почти все приложения строятся сходным образом и разработчики могут включаться в проект без усилий. Также это даёт предсказуемые API и процессы отладки, что уменьшает время разработки и быстрое прототипирование. Angular построен вокруг возможности тестирования («testability»), чтобы быть наиболее простым как в разработке, так и в тестировании.

Давайте изучать.

3 Модули

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

3.1 Сеттеры (setters).

У приложения есть один модуль app.

angular.module('app', []);

Вторым аргументом идёт [] – обычно этот массив содержит зависимости модуля, которые нам нужно подключить. Модули могут зависеть от других модулей, которые в свою очередь тоже могут иметь зависимости. В нашем случае массив пустой.

3.2 Геттеры (Getters)

Для создания Controllers, Directives, Services и других возможностей нам надо сослаться на существующий модуль. В синтаксисе есть незаметное различие – мы не используем второй аргумент.

angular.module('app');

3.3 Работа модулей

Модули могут храниться и вызываться и через переменную. Вот пример хранения модуля в переменной.

var app = angular.module('app', []);

Теперь мы можем использовать переменную app для построения приложения.

3.4 HTML бутстрап

Для описания того, где приложение находится в DOM, а обычно это элемент <html>, нам надо связать атрибут ng-app с модулем. Так мы сообщаем Angular, куда подгрузить наше приложение.

<html ng-app="app">
  <head></head>
  <body></body>
</html>

Если мы грузим файлы с JavaScript асинхронно, нам надо подгрузить приложение вручную через angular.bootstrap(document.documentElement, [‘app’]);.

4 Разбираемся со $scope

Одно из основных понятий в программировании – область видимости. В Angular область видимости – это один из главных объектов, который делает возможным циклы двусторонней связи данных и сохраняет состояние приложения. $scope – довольно хитрый объект, который не только имеет доступ к данным и значениям, но и предоставляет эти данные в DOM, когда Angular рендерит наше приложение.

Представьте, что $scope – это автоматический мост между JavaScript и DOM, хранящий синхронизированные данные. Это позволяет проще работать с шаблонами, когда мы используем при этом синтакс HTML, а Angular рендерит соответствующие значения $scope. Это создаёт связь между JavaScript и DOM. В общем, $scope играет роль ViewModel.

$scope используется только внутри Контроллеров. Там мы привязываем данные Контроллера к Виду. Вот пример того, как мы объявляем данные в Контроллере:

$scope.someValue = 'Hello';

Чтобы это отобразилось в DOM, мы должны присоединить Контроллер к HTML и сообщить Angular, куда вставлять значение.

<div ng-controller="AppCtrl">
  {{ someValue }}
</div>

Перед вами концепция области видимости Angular, подчиняющаяся некоторым правилам JavaScript в плане лексических областей видимости. Снаружи элемента, к которому присоединён Контроллер, данные находятся вне области видимости – так же, как переменная вышла бы за область видимости, если б мы сослались на неё снаружи её области видимости.

Мы можем привязать любые типы JavaScript $scope. Таким образом мы берём данные от сервиса, общающегося с сервером, и передаём их во View, слой презентации.

Чем больше мы создадим Контроллеров и связей с данными, тем больше появляется областей видимости. Разобраться в их иерархии ничего не стоит – здесь нам поможет переменная $rootScope

Часть 2

Источник

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

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

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

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

Официальный репозиторий фреймворка на гитхабе: 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 9 Project",
  "author": "Eugene Popov <metanit.com>",
  "scripts": {
    "dev": "webpack-dev-server --hot --open",
    "build": "webpack"
  },
  "dependencies": {
    "@angular/common": "~9.0.0",
    "@angular/compiler": "~9.0.0",
    "@angular/core": "~9.0.0",
    "@angular/forms": "~9.0.0",
    "@angular/platform-browser": "~9.0.0",
    "@angular/platform-browser-dynamic": "~9.0.0",
    "@angular/router": "~9.0.0",
    "rxjs": "^6.5.4",
    "zone.js": "^0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.900.1",
    "@angular/cli": "~9.0.1",
    "@angular/compiler-cli": "~9.0.0",
    "@types/node": "^12.11.1",
    "typescript": "~3.7.5"
  }
}

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

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

C:WINDOWSsystem32>cd C:angular2helloapp

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

C:angular2helloapp>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>Добро пожаловать {{ name }}!</h1>
  `,
})
export class AppComponent {
  name = ''
}

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

Далее собственно идет функция-декоратор @Component, которая ассоциирует метаданные с классом компонента AppComponent. В этой функции, во-первых, определяется параметр selector или селектор css для HTML-элемента, который будет представлять компонент. Во-вторых, здесь определяется параметр template или шаблон, который указывает, как надо визуализировать компонент. В этом шаблоне задана двусторонняя привязка с помощью выражений [(ngModel)]="name" и {{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 'zone.js/dist/zone' // zone используется angular

Данный файл определяет полифилы — инструменты, которые необходимы для поддержки приложения на Angular старыми браузерами.

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

Далее определим в папке src главную страницу index.html приложения:

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

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

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

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

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },
    "files": [
        "src/main.ts",
        "src/polyfills.ts"
    ],
    "include": [
        "src/**/*.d.ts"
    ]
}

Данный файл определяет настройки для компилятора TypeScript. Опция «compilerOptions» устанавливает параметры компиляции. А опция «files» определяет компилируемые файлы. В нашем случае это файл приложения — main.ts, который подтягивает все остальные файлы приложения, и файл полифилов polyfills.ts.

Angular.json¶

Для компиляции приложения мы будем использовать Angular CLI, поэтому нам надо описать поведение CLI с помощью файла angular.json. Итак, добавим в корневую папку проекта новый файл angular.json и определим в нем следующее содержимое:

{
  "version": 1,
  "projects": {
    "helloapp": {
      "projectType": "application",
      "root": "",
      "sourceRoot": "src",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/helloapp",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.json",
            "aot": true
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "helloapp:build"
          }
        }
      }
    }},
  "defaultProject": "helloapp"
}

Вкратце пройдемся по структуре файле. Вначале определяется параметр version. Он определяет версию конфигурации проекта.

Далее идет секция projects, которая определяет настройки для каждого проекта. В нашем случае у нас только один проект, который называется по названию каталога проекта — helloapp.

Проект определяет следующие опции:

  • projectType: тип проекта. Значение «application» указывает, что проект будет представлять приложение, которое можно будет запускать в браузере
  • root: указывает на папку файлов проекта относительно рабочей среды. Пустое значение соответствует корневой папке проекта, так как в данном случае рабочая среда и каталог проекта совпадают
  • sourceRoot: определяет корневую папку файлов с исходным кодом. В нашем случае это папка src, где собственно определены все файлы приложения
  • architect: задает настройки для построения проекта. В файле package.json определены команды build и serve, и для каждой из этих команд в секции architect заданы свои настройки.

Для каждой команды задается параметр builder, который определяет инструмент для построения проекта. Так, для команды «build» задано значение «@angular-devkit/build-angular:browser» — данный билдер для построения использует сборщик пакетов webpack. А для команды «serve» задано значение «@angular-devkit/build-angular:dev-server» — данный билдер запускает веб-сервер и развертывает на нем скомпилированное приложение.

Параметр options задает параметры построения файлов. Для команды «build» здесь определены следующие опции:

  • outputPath: путь, по которому будет публиковаться скомпилированное приложение
  • index: путь к главной странице приложения
  • main: путь к главному файлу приложения, где собственно запускается приложение Angular
  • polyfills: путь к файлу полифилов
  • tsConfig: путь к файлу конфигурации TypeScript
  • aot: указывает, будет ли использоваться компиляция AOT (Ahead-Of-Head) (предварительная компиляция перед выполнением). В данном случае значение true означает, что она используется

Для команды «serve» указана только одна опцияя — browserTarget, которая содержит ссылку на конфигурацию для команды build — «helloapp:build«. То есть по сути эта команда использует ту же конфигурацию, что и команда build.

Последняя опция defaultProject указывает на проект по умолчанию. В данном случае это наш единственный проект.

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

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

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

Запуск проекта¶

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

C:WINDOWSsystem32>cd C:angularhelloapp
C:angularhelloapp>ng serve --open

Angluar CLI и Angluar 9

Консольный вывод проинформирует нас, какие файлы какого размера созданы. Кроме того, мы сможем увидеть адрес, по которому запущен тестовый веб-сервер — по умолчанию это «http://localhost:4200/«. Если мы передаем команде флаг --open, как в случае выше, то Angular CLI автоматически открывае браузер с запущенным приложением. И мы можем обратиться к приложению:

Начало работы с Angular 9

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

Важно отметить, что пока приложение запущено, мы можем поменять код, и Angular CLI почти моментально перекомпилирует и перезапустит приложение.

Источник

angular

animations

  1. @angular/animations
  2. animate
  3. animateChild
  4. AnimateChildOptions
  5. AnimateTimings
  6. animation
  7. AnimationAnimateChildMetadata
  8. AnimationAnimateMetadata
  9. AnimationAnimateRefMetadata
  10. AnimationBuilder
  11. AnimationEvent
  12. AnimationFactory
  13. AnimationGroupMetadata
  14. AnimationKeyframesSequenceMetadata
  15. AnimationMetadata
  16. AnimationMetadataType
  17. AnimationOptions
  18. AnimationPlayer
  19. AnimationQueryMetadata
  20. AnimationQueryOptions
  21. AnimationReferenceMetadata
  22. AnimationSequenceMetadata
  23. AnimationStaggerMetadata
  24. AnimationStateMetadata
  25. AnimationStyleMetadata
  26. AnimationTransitionMetadata
  27. AnimationTriggerMetadata
  28. AUTO_STYLE
  29. @angular/animations/browser
  30. AnimationDriver
  31. @angular/animations/browser/testing
  32. MockAnimationDriver
  33. MockAnimationPlayer
  34. group
  35. keyframes
  36. NoopAnimationPlayer
  37. query
  38. sequence
  39. stagger
  40. state
  41. style
  42. transition
  43. trigger
  44. useAnimation

common

  1. @angular/common
  2. APP_BASE_HREF
  3. AsyncPipe
  4. CommonModule
  5. CurrencyPipe
  6. DATE_PIPE_DEFAULT_TIMEZONE
  7. DatePipe
  8. DecimalPipe
  9. DOCUMENT
  10. formatCurrency
  11. formatDate
  12. formatNumber
  13. formatPercent
  14. FormatWidth
  15. FormStyle
  16. getCurrencySymbol
  17. getLocaleCurrencyCode
  18. getLocaleCurrencyName
  19. getLocaleCurrencySymbol
  20. getLocaleDateFormat
  21. getLocaleDateTimeFormat
  22. getLocaleDayNames
  23. getLocaleDayPeriods
  24. getLocaleDirection
  25. getLocaleEraNames
  26. getLocaleExtraDayPeriodRules
  27. getLocaleExtraDayPeriods
  28. getLocaleFirstDayOfWeek
  29. getLocaleId
  30. getLocaleMonthNames
  31. getLocaleNumberFormat
  32. getLocaleNumberSymbol
  33. getLocalePluralCase
  34. getLocaleTimeFormat
  35. getLocaleWeekEndRange
  36. getNumberOfCurrencyDigits
  37. HashLocationStrategy
  38. @angular/common/http
  39. HTTP_INTERCEPTORS
  40. HttpBackend
  41. HttpClient
  42. HttpClientJsonpModule
  43. HttpClientModule
  44. HttpClientXsrfModule
  45. HttpContext
  46. HttpContextToken
  47. HttpDownloadProgressEvent
  48. HttpErrorResponse
  49. HttpEvent
  50. HttpEventType
  51. HttpHandler
  52. HttpHeaderResponse
  53. HttpHeaders
  54. HttpInterceptor
  55. HttpParameterCodec
  56. HttpParams
  57. HttpParamsOptions
  58. HttpProgressEvent
  59. HttpRequest
  60. HttpResponse
  61. HttpResponseBase
  62. HttpSentEvent
  63. HttpStatusCode
  64. HttpUploadProgressEvent
  65. HttpUrlEncodingCodec
  66. HttpUserEvent
  67. HttpXhrBackend
  68. HttpXsrfTokenExtractor
  69. JsonpClientBackend
  70. JsonpInterceptor
  71. @angular/common/http/testing
  72. HttpClientTestingModule
  73. HttpTestingController
  74. RequestMatch
  75. TestRequest
  76. XhrFactory
  77. I18nPluralPipe
  78. I18nSelectPipe
  79. IMAGE_LOADER
  80. ImageLoader
  81. ImageLoaderConfig
  82. isPlatformBrowser
  83. isPlatformServer
  84. isPlatformWorkerApp
  85. isPlatformWorkerUi
  86. JsonPipe
  87. KeyValue
  88. KeyValuePipe
  89. Location
  90. LOCATION_INITIALIZED
  91. LocationChangeEvent
  92. LocationChangeListener
  93. LocationStrategy
  94. LowerCasePipe
  95. NgClass
  96. NgComponentOutlet
  97. NgForOf
  98. NgForOfContext
  99. NgIf
  100. NgIfContext
  101. NgLocaleLocalization
  102. NgLocalization
  103. NgOptimizedImage
  104. NgPlural
  105. NgPluralCase
  106. NgStyle
  107. NgSwitch
  108. NgSwitchCase
  109. NgSwitchDefault
  110. NgTemplateOutlet
  111. NumberFormatStyle
  112. NumberSymbol
  113. PathLocationStrategy
  114. PercentPipe
  115. PlatformLocation
  116. Plural
  117. PopStateEvent
  118. PRECONNECT_CHECK_BLOCKLIST
  119. provideCloudflareLoader
  120. provideCloudinaryLoader
  121. provideImageKitLoader
  122. provideImgixLoader
  123. registerLocaleData
  124. SlicePipe
  125. @angular/common/testing
  126. MOCK_PLATFORM_LOCATION_CONFIG
  127. MockLocationStrategy
  128. MockPlatformLocation
  129. MockPlatformLocationConfig
  130. SpyLocation
  131. Time
  132. TitleCasePipe
  133. TranslationWidth
  134. @angular/common/upgrade
  135. $locationShim
  136. $locationShimProvider
  137. AngularJSUrlCodec
  138. LOCATION_UPGRADE_CONFIGURATION
  139. LocationUpgradeConfig
  140. LocationUpgradeModule
  141. UrlCodec
  142. UpperCasePipe
  143. ViewportScroller
  144. WeekDay
  145. XhrFactory

core

  1. @angular/core
  2. AbstractType
  3. AfterContentChecked
  4. AfterContentInit
  5. AfterViewChecked
  6. AfterViewInit
  7. ANALYZE_FOR_ENTRY_COMPONENTS
  8. ANIMATION_MODULE_TYPE
  9. APP_BOOTSTRAP_LISTENER
  10. APP_ID
  11. APP_INITIALIZER
  12. ApplicationInitStatus
  13. ApplicationModule
  14. ApplicationRef
  15. asNativeElements
  16. assertPlatform
  17. Attribute
  18. BootstrapOptions
  19. ChangeDetectionStrategy
  20. ChangeDetectorRef
  21. ClassProvider
  22. ClassSansProvider
  23. Compiler
  24. COMPILER_OPTIONS
  25. CompilerFactory
  26. CompilerOptions
  27. Component
  28. ComponentFactory
  29. ComponentFactoryResolver
  30. ComponentMirror
  31. ComponentRef
  32. ConstructorProvider
  33. ConstructorSansProvider
  34. ContentChild
  35. ContentChildren
  36. createComponent
  37. createEnvironmentInjector
  38. createNgModule
  39. createNgModuleRef
  40. createPlatform
  41. createPlatformFactory
  42. CUSTOM_ELEMENTS_SCHEMA
  43. DebugElement
  44. DebugEventListener
  45. DebugNode
  46. DEFAULT_CURRENCY_CODE
  47. DefaultIterableDiffer
  48. defineInjectable
  49. destroyPlatform
  50. Directive
  51. DoBootstrap
  52. DoCheck
  53. ElementRef
  54. EmbeddedViewRef
  55. enableProdMode
  56. ENVIRONMENT_INITIALIZER
  57. EnvironmentInjector
  58. ErrorHandler
  59. EventEmitter
  60. ExistingProvider
  61. ExistingSansProvider
  62. FactoryProvider
  63. FactorySansProvider
  64. forwardRef
  65. ForwardRefFn
  66. getDebugNode
  67. getModuleFactory
  68. getNgModuleById
  69. getPlatform
  70. GetTestability
  71. @angular/core/global
  72. ComponentDebugMetadata
  73. DirectiveDebugMetadata
  74. Listener
  75. ng.applyChanges
  76. ng.getComponent
  77. ng.getContext
  78. ng.getDirectiveMetadata
  79. ng.getDirectives
  80. ng.getHostElement
  81. ng.getInjector
  82. ng.getListeners
  83. ng.getOwningComponent
  84. ng.getRootComponents
  85. Host
  86. HostBinding
  87. HostListener
  88. ImportedNgModuleProviders
  89. importProvidersFrom
  90. ImportProvidersSource
  91. Inject
  92. Injectable
  93. InjectableProvider
  94. InjectableType
  95. InjectFlags
  96. InjectionToken
  97. InjectOptions
  98. Injector
  99. InjectorType
  100. Input
  101. isDevMode
  102. IterableChangeRecord
  103. IterableChanges
  104. IterableDiffer
  105. IterableDifferFactory
  106. IterableDiffers
  107. KeyValueChangeRecord
  108. KeyValueChanges
  109. KeyValueDiffer
  110. KeyValueDifferFactory
  111. KeyValueDiffers
  112. LOCALE_ID
  113. MissingTranslationStrategy
  114. ModuleWithComponentFactories
  115. ModuleWithProviders
  116. <ng-container>
  117. <ng-content>
  118. <ng-template>
  119. NgIterable
  120. NgModule
  121. NgModuleFactory
  122. NgModuleRef
  123. NgProbeToken
  124. NgZone
  125. NO_ERRORS_SCHEMA
  126. OnChanges
  127. OnDestroy
  128. OnInit
  129. Optional
  130. Output
  131. PACKAGE_ROOT_URL
  132. Pipe
  133. PipeTransform
  134. PLATFORM_ID
  135. PLATFORM_INITIALIZER
  136. platformCore
  137. PlatformRef
  138. Predicate
  139. Provider
  140. ProviderToken
  141. Query
  142. QueryList
  143. reflectComponentType
  144. ReflectiveInjector
  145. ReflectiveKey
  146. Renderer2
  147. RendererFactory2
  148. RendererStyleFlags2
  149. RendererType2
  150. ResolvedReflectiveFactory
  151. ResolvedReflectiveProvider
  152. resolveForwardRef
  153. Sanitizer
  154. SchemaMetadata
  155. SecurityContext
  156. Self
  157. setTestabilityGetter
  158. SimpleChange
  159. SimpleChanges
  160. SkipSelf
  161. StaticClassProvider
  162. StaticClassSansProvider
  163. StaticProvider
  164. TemplateRef
  165. Testability
  166. TestabilityRegistry
  167. @angular/core/testing
  168. async
  169. ComponentFixture
  170. ComponentFixtureAutoDetect
  171. ComponentFixtureNoNgZone
  172. discardPeriodicTasks
  173. fakeAsync
  174. flush
  175. flushMicrotasks
  176. getTestBed
  177. inject
  178. InjectSetupWrapper
  179. MetadataOverride
  180. ModuleTeardownOptions
  181. resetFakeAsyncZone
  182. TestBed
  183. TestBedStatic
  184. TestComponentRenderer
  185. TestEnvironmentOptions
  186. TestModuleMetadata
  187. tick
  188. waitForAsync
  189. withModule
  190. TrackByFunction
  191. TRANSLATIONS
  192. TRANSLATIONS_FORMAT
  193. Type
  194. TypeDecorator
  195. TypeProvider
  196. ValueProvider
  197. ValueSansProvider
  198. Version
  199. ViewChild
  200. ViewChildren
  201. ViewContainerRef
  202. ViewEncapsulation
  203. ViewRef

elements

  1. @angular/elements
  2. createCustomElement
  3. NgElement
  4. NgElementConfig
  5. NgElementConstructor
  6. NgElementStrategy
  7. NgElementStrategyEvent
  8. NgElementStrategyFactory
  9. WithProperties

forms

  1. @angular/forms
  2. AbstractControl
  3. AbstractControlDirective
  4. AbstractControlOptions
  5. AbstractFormGroupDirective
  6. AsyncValidator
  7. AsyncValidatorFn
  8. CheckboxControlValueAccessor
  9. CheckboxRequiredValidator
  10. COMPOSITION_BUFFER_MODE
  11. ControlConfig
  12. ControlContainer
  13. ControlValueAccessor
  14. DefaultValueAccessor
  15. EmailValidator
  16. Form
  17. FormArray
  18. FormArrayName
  19. FormBuilder
  20. FormControl
  21. FormControlDirective
  22. FormControlName
  23. FormControlOptions
  24. FormControlState
  25. FormControlStatus
  26. FormGroup
  27. FormGroupDirective
  28. FormGroupName
  29. FormRecord
  30. FormsModule
  31. MaxLengthValidator
  32. MaxValidator
  33. MinLengthValidator
  34. MinValidator
  35. NG_ASYNC_VALIDATORS
  36. NG_VALIDATORS
  37. NG_VALUE_ACCESSOR
  38. NgControl
  39. NgControlStatus
  40. NgControlStatusGroup
  41. NgForm
  42. NgModel
  43. NgModelGroup
  44. NgSelectOption
  45. NonNullableFormBuilder
  46. NumberValueAccessor
  47. PatternValidator
  48. RadioControlValueAccessor
  49. RangeValueAccessor
  50. ReactiveFormsModule
  51. RequiredValidator
  52. SelectControlValueAccessor
  53. SelectMultipleControlValueAccessor
  54. UntypedFormArray
  55. UntypedFormBuilder
  56. UntypedFormControl
  57. UntypedFormGroup
  58. ValidationErrors
  59. Validator
  60. ValidatorFn
  61. Validators

localize

  1. @angular/localize
  2. clearTranslations
  3. @angular/localize/init
  4. $localize
  5. loadTranslations
  6. MessageId
  7. TargetMessage

platform-browser

  1. @angular/platform-browser
  2. @angular/platform-browser/animations
  3. ANIMATION_MODULE_TYPE
  4. BrowserAnimationsModule
  5. BrowserAnimationsModuleConfig
  6. NoopAnimationsModule
  7. provideAnimations
  8. provideNoopAnimations
  9. ApplicationConfig
  10. bootstrapApplication
  11. BrowserModule
  12. BrowserTransferStateModule
  13. By
  14. createApplication
  15. disableDebugTools
  16. DomSanitizer
  17. enableDebugTools
  18. EVENT_MANAGER_PLUGINS
  19. EventManager
  20. HAMMER_GESTURE_CONFIG
  21. HAMMER_LOADER
  22. HammerGestureConfig
  23. HammerLoader
  24. HammerModule
  25. makeStateKey
  26. Meta
  27. MetaDefinition
  28. platformBrowser
  29. provideProtractorTestingSupport
  30. SafeHtml
  31. SafeResourceUrl
  32. SafeScript
  33. SafeStyle
  34. SafeUrl
  35. SafeValue
  36. StateKey
  37. @angular/platform-browser/testing
  38. BrowserTestingModule
  39. platformBrowserTesting
  40. Title
  41. TransferState

platform-server

  1. @angular/platform-server
  2. BEFORE_APP_SERIALIZED
  3. @angular/platform-server/init
  4. INITIAL_CONFIG
  5. PlatformConfig
  6. platformDynamicServer
  7. platformServer
  8. PlatformState
  9. renderApplication
  10. renderModule
  11. renderModuleFactory
  12. ServerModule
  13. ServerTransferStateModule
  14. @angular/platform-server/testing
  15. platformServerTesting
  16. ServerTestingModule

router

  1. @angular/router
  2. ActivatedRoute
  3. ActivatedRouteSnapshot
  4. ActivationEnd
  5. ActivationStart
  6. BaseRouteReuseStrategy
  7. CanActivate
  8. CanActivateChild
  9. CanActivateChildFn
  10. CanActivateFn
  11. CanDeactivate
  12. CanDeactivateFn
  13. CanLoad
  14. CanLoadFn
  15. CanMatch
  16. CanMatchFn
  17. ChildActivationEnd
  18. ChildActivationStart
  19. ChildrenOutletContexts
  20. convertToParamMap
  21. createUrlTreeFromSnapshot
  22. Data
  23. DebugTracingFeature
  24. DefaultTitleStrategy
  25. defaultUrlMatcher
  26. DefaultUrlSerializer
  27. DetachedRouteHandle
  28. DisabledInitialNavigationFeature
  29. EnabledBlockingInitialNavigationFeature
  30. Event
  31. EventType
  32. ExtraOptions
  33. GuardsCheckEnd
  34. GuardsCheckStart
  35. InitialNavigation
  36. InitialNavigationFeature
  37. InMemoryScrollingFeature
  38. InMemoryScrollingOptions
  39. IsActiveMatchOptions
  40. LoadChildren
  41. LoadChildrenCallback
  42. Navigation
  43. NavigationBehaviorOptions
  44. NavigationCancel
  45. NavigationCancellationCode
  46. NavigationEnd
  47. NavigationError
  48. NavigationExtras
  49. NavigationStart
  50. NoPreloading
  51. OutletContext
  52. ParamMap
  53. Params
  54. PreloadAllModules
  55. PreloadingFeature
  56. PreloadingStrategy
  57. PRIMARY_OUTLET
  58. provideRouter
  59. provideRoutes
  60. QueryParamsHandling
  61. Resolve
  62. ResolveData
  63. ResolveEnd
  64. ResolveFn
  65. ResolveStart
  66. Route
  67. RouteConfigLoadEnd
  68. RouteConfigLoadStart
  69. Router
  70. ROUTER_CONFIGURATION
  71. ROUTER_INITIALIZER
  72. RouterConfigOptions
  73. RouterConfigurationFeature
  74. RouteReuseStrategy
  75. RouterEvent
  76. RouterFeature
  77. RouterFeatures
  78. RouterLink
  79. RouterLinkActive
  80. RouterLinkWithHref
  81. RouterModule
  82. RouterOutlet
  83. RouterOutletContract
  84. RouterPreloader
  85. RouterState
  86. RouterStateSnapshot
  87. ROUTES
  88. RoutesRecognized
  89. RunGuardsAndResolvers
  90. Scroll
  91. @angular/router/testing
  92. RouterTestingModule
  93. setupTestingRouter
  94. setupTestingRouterInternal
  95. TitleStrategy
  96. @angular/router/upgrade
  97. RouterUpgradeInitializer
  98. setUpLocationSync
  99. UrlCreationOptions
  100. UrlHandlingStrategy
  101. UrlMatcher
  102. UrlMatchResult
  103. UrlSegment
  104. UrlSegmentGroup
  105. UrlSerializer
  106. UrlTree
  107. withDebugTracing
  108. withDisabledInitialNavigation
  109. withEnabledBlockingInitialNavigation
  110. withInMemoryScrolling
  111. withPreloading
  112. withRouterConfig

service-worker

  1. @angular/service-worker
  2. NoNewVersionDetectedEvent
  3. ServiceWorkerModule
  4. SwPush
  5. SwRegistrationOptions
  6. SwUpdate
  7. UnrecoverableStateEvent
  8. UpdateActivatedEvent
  9. UpdateAvailableEvent
  10. VersionDetectedEvent
  11. VersionEvent
  12. VersionInstallationFailedEvent
  13. VersionReadyEvent

upgrade

  1. @angular/upgrade
  2. @angular/upgrade/static
  3. downgradeComponent
  4. downgradeInjectable
  5. downgradeModule
  6. getAngularJSGlobal
  7. getAngularLib
  8. setAngularJSGlobal
  9. setAngularLib
  10. @angular/upgrade/static/testing
  11. createAngularJSTestingModule
  12. createAngularTestingModule
  13. UpgradeComponent
  14. UpgradeModule
  15. UpgradeAdapter
  16. UpgradeAdapterRef

Guide

  1. Доступность под углом
  2. УгловойJS к угловым концепциям:Быстрая ссылка
  3. Опции углового компилятора
  4. Формат пакета Angular
  5. Введение в угловые анимации
  6. Сборник «Впереди времени» (AOT)
  7. Ошибки метаданных AOT
  8. App shell
  9. Введение в угловые понятия
  10. Введение в компоненты и шаблоны
  11. Введение в модули
  12. Следующие шаги:инструменты и методики
  13. Attribute binding
  14. Attribute directives
  15. Understanding binding
  16. Binding syntax
  17. Запуск вашего приложения с помощью корневого модуля
  18. Browser support
  19. Строительство и обслуживание Угловые приложения
  20. Built-in directives
  21. Обнаружение изменений в Angular и оптимизация во время выполнения
  22. Пропуск поддеревьев компонентов
  23. Slow computations
  24. Решение проблемы загрязнения зоны
  25. Cheat Sheet
  26. Привязка к классу и стилю
  27. Угловые строители КЛИ
  28. Наблюдаемые данные по сравнению с другими методами
  29. Сложные анимационные последовательности
  30. Component interaction
  31. Обзор угловых компонентов
  32. Component styles
  33. Content projection
  34. Руководство для вкладчиков документации
  35. Создание инжектируемой услуги
  36. Creating libraries
  37. Понимание инъекции зависимостей
  38. Инъекция зависимостей в действии
  39. Инъекция зависимостей в угловой
  40. Настройка поставщиков зависимостей
  41. Deployment
  42. Устаревшие API и функции
  43. Руководства для разработчиков Angular
  44. DevTools Overview
  45. Разрешение сообщений линтера документации
  46. Руководство по стилю угловой документации
  47. Динамический компонентный погрузчик
  48. Строительные динамические формы
  49. Обзор угловых элементов
  50. Entry components
  51. Event binding
  52. Как работает привязка событий
  53. Example applications
  54. Feature modules
  55. Рабочее пространство и файловая структура проекта
  56. Валидирующий ввод формы
  57. Построение формы,основанной на шаблонах
  58. Введение в формы в Угловой
  59. Frequently-used modules
  60. Glossary
  61. Hierarchical injectors
  62. Взаимодействие со службами бэкэнда с помощью HTTP
  63. Добавить пакет локализации
  64. Развертывание нескольких локалей
  65. Формат данных на основе локали
  66. Обратитесь к местам по ID
  67. Объединить переводы в приложение
  68. Общие задачи интернационализации
  69. Подготовка компонента к переводу
  70. Работа с файлами перевода
  71. Пример приложения Angular Internationalization
  72. Импорт глобальных вариантов данных локали
  73. Управление отмеченным текстом с помощью пользовательских идентификаторов
  74. Установите локаль времени выполнения вручную
  75. Необязательные практики интернационализации
  76. Angular Internationalization
  77. Начало работы с NgOptimizedImage
  78. Настройка NgOptimizedImage
  79. Обмен данными между дочерними и родительскими директивами и компонентами
  80. Отображение значений с интерполяцией
  81. Служба английского языка
  82. Функциональные модули с лёгкостью загрузки
  83. Обзор угловых библиотек
  84. Lifecycle hooks
  85. Оптимизация размера клиентского приложения с легкими жетонами для инъекций
  86. Localized documentation
  87. Руководство по локализации документации Angular
  88. Руководство по созданию NgМодулей
  89. NgModule API
  90. NgModule FAQ
  91. Модули JavaScript против NgModules
  92. NgModules
  93. Зависимости рабочего пространства npm
  94. Использование наблюдаемых для передачи значений
  95. Наблюдаемые под углом
  96. Использование трубы в шаблоне
  97. Understanding Pipes
  98. Трансформация данных с параметрами и цепочечными трубами
  99. Практически наблюдаемое использование
  100. Предпросмотр статических страниц
  101. Property binding
  102. Обязательные для исполнения лучшие практики
  103. Обеспечение зависимостей в модулях
  104. Reactive forms
  105. Угловое версионирование и выпуски
  106. Reusable animations
  107. Reviewing documentation
  108. Angular Roadmap
  109. Анимации перехода к следующему маршруту
  110. Общие задачи маршрутизации
  111. Router reference
  112. Использование угловых маршрутов в одностраничном приложении
  113. Учебник маршрутизатора:тур героев
  114. Angular Routing
  115. Учебное пособие:Создание пользовательских соответствий маршрутов
  116. Библиотека RxJS
  117. Генерация кода с использованием схем
  118. Authoring schematics
  119. Схемы для библиотек
  120. Security
  121. Связь работника службы
  122. Конфигурация работника сервисной службы
  123. Обслуживающий персонал на производстве
  124. Начало работы с сервисными работниками
  125. Введение работника сервисной службы под углом
  126. Уведомления работников службы
  127. Настройка локальной среды и рабочего пространства
  128. Sharing modules
  129. Singleton services
  130. Начало работы с автономными компонентами
  131. Strict mode
  132. Structural directives
  133. Руководство по стилю углового кодирования
  134. SVG в качестве шаблонов
  135. Understanding templates
  136. Понимание переменных шаблонов
  137. Template statements
  138. Template syntax
  139. Проверка типа шаблона
  140. Debugging tests
  141. Testing
  142. Директивы по тестированию атрибутов
  143. Узнайте, сколько кода вы тестируете
  144. Основы тестирования компонентов
  145. Сценарии тестирования компонентов
  146. Testing Pipes
  147. Testing services
  148. Тестирование API утилиты
  149. Анимационные переходы и триггеры
  150. Two-way binding
  151. Typed Forms
  152. TypeScript configuration
  153. Understanding Angular
  154. Рендеринг на стороне сервера (SSR)с угловым универсалом
  155. Update Angular
  156. Поддержка ваших угловых проектов в актуальном состоянии
  157. Обновление тем через пользовательский интерфейс GitHub
  158. Обновление ключевых слов для поиска
  159. Модернизация с AngularJS на Angular
  160. Модернизация для повышения производительности
  161. Настройка для обновления с AngularJS
  162. Использование библиотек Angular,опубликованных на npm
  163. View encapsulation
  164. Обработка фона с использованием веб-работников
  165. Что такое Angular?
  166. Угловая конфигурация рабочего пространства

Miscellaneous

  1. Обзор CLI и справочник команд
  2. ng add
  3. ng analytics
  4. ng build
  5. ng cache
  6. ng completion
  7. ng config
  8. ng deploy
  9. ng doc
  10. ng e2e
  11. ng extract-i18n
  12. ng generate
  13. ng lint
  14. ng new
  15. ng run
  16. ng serve
  17. ng test
  18. ng update
  19. Сбор и просмотр аналитики использования
  20. ng version
  21. Errors List
  22. NG0100:Выражение изменилось после проверки
  23. NG0200:Циклическая зависимость в DI обнаружена при инстанцировании провайдера
  24. NG0201:Провайдер для {token}не найден!
  25. NG0203:`inject()` должен быть вызван из контекста инъекции,такого как конструктор,фабричная функция,инициализатор поля или функция,используемая с `EnvironmentInjector#runInContext`.
  26. NG0300:Несколько компонентов совпадают с одним и тем же именем tagname
  27. NG0301:Экспорт не найден!
  28. NG0302:Труба не найдена!
  29. NG1001:Аргумент декоратора не является литералом объекта
  30. NG1003:Асинхронный валидатор должен возвращать Promise или Observable
  31. NG2003:Нет подходящего маркера инъекции для параметра
  32. NG2009:Селектор компонентов не соответствует требованиям теневого DOM
  33. NG2200:Невозможно найти отличие для объекта в ngFor
  34. NG3003:Для компиляции этого компонента необходимо будет создать циклы импорта
  35. NG6100:Установка NgModule.id в module.id является распространенным антипаттерном
  36. NG6999:Неверные метаданные @NgModule()
  37. NG8001:Неизвестный элемент или компонент HTML
  38. NG8002:Неизвестный атрибут или вход
  39. NG8003:Не найдена директива с экспортом
  40. Extended Diagnostics
  41. NG8101:Неверный банан в коробке
  42. NG8102: Nullish coalescing not nullable
  43. Начало работы с Angular
  44. Managing data
  45. Развертывание приложения
  46. Использование форм для ввода данных пользователем
  47. Adding navigation

Tutorial

  1. Приложение и учебник Tour of Heroes
  2. 0.Создайте новый проект
  3. 1.Редактор героев
  4. 2.Отображение списка выбора
  5. 3.Создайте компонент функции
  6. 4.Добавить услуги
  7. 5.Добавьте навигацию с помощью маршрутизации
  8. 6.Получение данных с сервера

Источник

Angular is unequivocally one of the most widely-used and popular JavaScript web application frameworks. Apart from the fact that Angular is loaded with powerful features, another big reason for its widespread popularity is that it is developed and maintained by Google.

Before proceeding further, one important thing that you should be clear about is that we are talking about the Angular framework, which represents the Angular version2 and above. The first-ever version of Angular is known as AngularJS and is quite different from Angular.

It simply indicates that you are interested in learning Angular for you to be reading this guide. If you want to make a career in web development and that too with JavaScript as your main programming language, then you are on the right path.

However, before you start learning Angular, you must understand that this JS framework has a steep learning curve. Also, while Angular works completely fine with JavaScript, the programming language preferred for Angular web development is TypeScript, a JS version developed by Microsoft.

To put it simply, all the JavaScript programs are also TypeScript programs, but the opposite is not true. It’s similar to saying that every square is a rectangle, but every rectangle is not a square. Here, the square is a JavaScript program, and the rectangle is a TypeScript program.

In all, if you want to master Angular, you will need serious determination and perseverance, especially if you are an aspiring web developer.

Whether you are looking for some good reasons to learn Angular or want guidance on how you can start learning Angular, you have landed just at the right place. This detailed blog covers all the essential aspects that one should know for learning Angular effectively. So, without wasting any more time, let’s get started.

Why Should You Learn Angular?

A beginner who is willing to build a promising future in web development must have suggestions to learn Angular. Also, you may have wondered if it would be a good idea to learn Angular in the first place.

To be honest, there is no straightforward answer to this as it completely depends on your requirements. For instance, if you are ready to go through a challenging learning experience, and want to code and manage projects in a highly organized manner, then Angular can be your best pick.

Here are some of the key features of Angular that often become the reasons why many geeks pick this leading JS framework as their tool of choice for front-end development:

1. Ideal for Developing SPAs (Single-Page Applications)

Building responsive and high-performance single-page applications become easier with Angular. If you don’t know, a SPA is a web application that does not require loading multiple HTML pages as all the data and content are injected dynamically in a single HTML page. The content or elements are displayed or removed according to the user’s actions on the page.

Single-page applications are extremely fast, easy to develop and debug, highly reusable, and offer a better user experience. All these characteristics have made SPAs a popular choice among businesses and developers alike. Angular streamlines the process of developing SPAs, making this framework of great value for developers.

2. Better Management With Components

Angular helps you to streamline the process of web development and also allows sound management of all the application code through components. A component is considered to be the basic building block of an Angular application. Every component has 3 main elements that are:

  1. An HTML Template: defines the structure of the component that is to be rendered within the app,
  2. A CSS Stylesheet:decides the look and feel of the component, and
  3. A TypeScript File: This contains the code that defines the behavior of the component.

Usually, a component is created for each application to make it easier to keep the whole application well-organized and easy to manage.

3. Quick Production with the Angular CLI

Creating the basic structure of an Angular application and even adding new components and services could have been quite difficult and time-consuming without the Angular CLI.

With the Angular command-line interface, creating a new project with all the basic dependencies, files and directories are just a command away. To create a new project, you simply need to use the ng new command followed by the project’s name.

Also, you can easily add new components and services to your project by simply executing single-line commands in the Angular CLI. Also, you can build your Angular app, run it on a local server, and do more by using various Angular CLI commands. All this leads to quicker app production and ensures more focus on writing code rather than setting up project files.

4. Animation Support

With Angular, one can build modern apps with a myriad of functionalities. However, there’s one more thing that you can add to your apps without any significant challenge, and that is animation. Angular comes with native support for complex animations that allow you to enhance your apps’ overall appearance and user experience.

The animation API offered by the JS web framework is easy to use and offers a variety of functions. So, you can introduce animations in the various sections of your app that tend to gain users’ attention and prompt them to engage with the app in a better way.

5. Cross-Platform Framework

Being a cross-platform framework is one of the most notable reasons for developers to shower Angular with love. It not only lets you create innovative and progressive web applications but also native mobile apps as well as desktop apps.

By gaining the knowledge and experience working with Angular, you can create applications for almost all the major platforms, be it Android, iOS, Windows, macOS, or Linux. Surely, you have to take assistance from various other technologies, but Angular will play a pivotal role in developing apps for these platforms right from scratch.

This feature gives you the flexibility to expand your horizons when it comes to app development. Also, all this concludes that Angular is one of the most power-packed and versatile JS frameworks out there.

6. Type Checking Minimizes Coding Errors

As mentioned earlier, the programming language used by Angular is TypeScript. As you know, Angular completely supports JavaScript code as well as all other libraries like jQuery. The intention of using TypeScript is to curtail code error to the minimum possible.

TypeScript is a strongly typed language that allows you to declare the type of variables and data structures. This allows the detection of errors before the code enters execution. The type of declared variables and data structures are validated in runtime so that no conflicts occur later during code execution.

In all, TypeScript allows faster development and, at the same time, reduces the chances of errors in code that come in handy, especially when creating large and complex applications.

So, these are some of the most common reasons that make Angular a viable choice for developing top-notch applications. Now, if you have decided to learn the popular JS framework, it’s time to move forward and see how you can actually embark on the journey to become an Angular developer.

Prerequisites for Learning Angular

Angular is widely used for web development, and there are certain requirements that you must meet to learn Angular. By checking off all the prerequisites, you can make sure that you proceed in the right direction and learn the popular web framework in the best possible way. The prerequisites for learning Angular are as follows:

  • Sound knowledge of HTML, CSS, and JavaScript.
  • The basic idea of the MVC (Model-View-Controller) architecture.
  • Basic knowledge of Node.js and npm (Node Package Manager).
  • Experience working with the command line.
  • Exposure to TypeScript.

The first prerequisite mentioned above, i.e., knowledge of HTML, CSS, and JavaScript, is essential for learning Angular. The other prerequisites can be easily satisfied, and you can learn the basics of MVC, Node.js, npm, and command-line pretty quickly. Also, if you know JavaScript quite well, picking up the fundamentals of TypeScript won’t be an issue.

Nonetheless, as soon as you meet all the requirements stated above, take a step ahead and choose an IDE to work with Angular.

IDE

As you might already know, the need for a source code editor for writing code and an IDE (Integrated Development Environment) comes with it. Also, IDE combines various tools and features, including a debugger, compiler, version control, code completion and refactoring, and syntax highlighting that makes it a complete package for developing, testing, and deploying apps.

You can undoubtedly use a dedicated source-code editor like Visual Studio Code or Atom to write Angular code. Still, eventually, you may need to switch to an IDE to ensure faster and efficient development. So, it would be a little better to start your journey with some IDE; else, you can go with a source-code editor too.

Below are 3 of the most popular IDEs to use for Angular development:

1. Angular IDE

Anyone looking for a dedicated IDE for Angular can consider using Angular IDE. It is one of the most powerful IDEs out there for developing Angular applications of any scale.

The best thing about this IDE is that it is utterly suitable for beginners who want to build small projects to test their skills to expert professionals required to develop and maintain enterprise-grade web applications. Also, you need to note that this is a paid IDE, and its pricing starts at $5 per user per month.

Key Features

  • Comes integrated with Angular CLI, which allows you to generate components and services for your app quickly.
  • The Angular control panel makes it possible to work and manage a complete project from one single place.
  • Auto-completion and real-time validation of code.
  • Supports TypeScript debugging.
  • Offers a free 45-day trial.

2. WebStorm

This is probably one of the most popular and widely used paid IDEs for web development and supports Angular. WebStorm is a product of the world-renowned IT company JetBrains. While WebStorm is a dedicated JavaScript IDE, many professionals worldwide use it for developing Angular applications.

One needs to integrate the Angular and AngularJS plugin to start developing apps using the integrated development environment. Nonetheless, WebStorm has a very intuitive user interface, allowing beginners to use it with complete ease.

Key Features

  • Supports HTML, CSS, and JavaScript.
  • Its smart editor comes with auto-code completion and code refactoring features.
  • You can even create, run, and debug the backend of your Angular application developed with Node.js.
  • IT allows integration with popular version control systems, including Git and Mercurial.

3. StackBlitz

StackBlitz is different from the two IDEs mentioned above because it is a cloud-based or, you can say, online IDE. As such, you do not need to install it on your system for using it to develop Angular apps. All you need is a web browser and an active internet connection for using StackBlitz to create Angular projects.

Also, it is worth noting that Visual Studio Code powers StackBlitz online IDE, so you can always expect reliable performance from it. Going for this IDE is a great choice for you if you do not want the hassle of downloading, installing, and managing an IDE for Angular on your system.

Key Features

  • Allows setting up an Angular project with only a few clicks.
  • Adding or removing dependencies is quite easy.
  • The Preview screen allows you to visualize all the changes that you made to code in real-time.
  • You can share project links with others collaboratively.
  • Offers a free version, which comes with all the features that you need as a beginner.

How to Learn Angular?

Learning Angular can become a mess if you don’t have the right set of resources. As you know, there is plenty of study material and guides available on the internet that can help you get familiar with the underlying concepts of Angular. However, you should know that not all of them are easy to understand.

You will likely need to go through many resources and follow them to see which one works best for you. Obviously, this is time-consuming, and you may lose interest in learning Angular if you do not find some learning material that you can stick to.

To ensure that you start learning with the right set of resources, check out the list of best Angular tutorials available out there. The biggest advantage of these tutorials is that they are laid out in a well-planned manner, which is especially helpful for beginners to ingest the concepts in Angular. Here are the best tutorials that you can consider for learning Angular effectively:

Top 5 Angular Tutorials

1. Angular — The Complete Guide (2023 Edition) — Udemy

Udemy is probably the best online learning platform that you can rely on for learning several skills, and the same stands true when it comes to Angular development. This tutorial available on Udemy is exclusively crafted for beginners who want to develop a deep understanding of the Angular framework.

Created by Maximilian Schwarzmüller, this Angular tutorial has an average rating of 4.6 stars out of 5, and the total number of students enrolled for it stands at an impressive count of 495K. Also, it is a 34+ hours long tutorial that combines several video lessons, tests, and PDF resources. Along with the basics, you will learn how to debug Angular code, make HTTP requests, add animations, and much more with this tutorial.

2. The Complete Angular Course: Beginner to Advanced — Udemy

This is yet another valuable Angular tutorial that you will find on the Udemy platform. This tutorial is created by Mosh Hamedani, who is a professional software engineer. Whether you want to learn the basics of Angular or want to move a step further and master the advanced concepts, this tutorial can help you with both.

The total length of this tutorial is more than 29 hours, and it has been divided into 25 sections. Various topics covered by this tutorial include TypeScript and Angular fundamentals, directives, reactive forms, routing and navigation, animation, unit testing, and integration testing. Also, it will guide you through creating multiple projects so that you can implement Angular concepts and observe how they are useful in real-world situations.

3. Angular Fundamentals — Pluralsight

To master Angular, it is extremely important to grasp its basics, and this tutorial can help you with that. Being one of the top-rated Angular tutorials on Pluralsight, you can rely on it to develop a solid understanding of various concepts of Angular. You will learn about components, services, pipes, routing and navigation, directives, unit testing, and more.

The Angular tutorial has been designed collectively by two Pluralsight authors, namely Jim Copper and Joe Earnes. The tutorial has been divided into several sections to ease the learning, and the overall run time is more than 9 hours. Also, each section contains short-length video lectures that will help you learn effectively.

4. An Angular 5 Tutorial: Step by Step Guide to Your First Angular 5 App — Toptal

This is among the most popular Angular tutorials available over the web. This tutorial leverages Angular 5, which is older compared to the current version of Angular, i.e., Angular 12. However, this tutorial is good if you want to learn Angular’s basics and create a basic application to see the concepts in action.

This Angular tutorial is created by Sergey Moiseev, who is a full-stack software engineer. This tutorial will get familiar with TypeScript, Angular CLI, components, and reactive forms. Also, you will use Firebase to create the back-end and Nginx to serve the application that you’ll be developing with this tutorial.

You will be able to learn many things that’ll be helpful in your quest to become an Angular developer. However, you need to keep in mind that the whole tutorial is available as text embedded on a single web page. So, if you are someone who is not in favor of reading a lot, this tutorial might not be the best pick for you.

5. Complete Angular Tutorial For Beginners — TekTutorialsHub

This tutorial offered by TekTutorialsHub is another great option for you to learn the basics of Angular. Although there are no video lectures included, the way concepts are explained commendable and can prove to be of great help for anyone new to Angular. The tutorial comprises text and is divided into several sections to ensure a fruitful learning experience.

The tutorial covers almost everything you need to start developing functional Angular apps, from introducing Angular to explaining core concepts like components, directives, pipes, services and dependency injection, and modules. Moreover, the concepts are explained and examples to help you observe how things work on the ground level.

Free Tutorials

While many of us believe that tutorials available for free are not very effective, the reality is quite different. While there are plenty of free tutorials that promise an exceptional learning experience, there’s one particular tutorial that you should consider and is mentioned below:

1. Learn Angular Step-by-step — YouTube

This tutorial or video playlist available on YouTube will help you learn Angular efficiently. 19 videos will guide you through the basic concepts of Angular, and also you will be creating a web app with the help of Firebase and Reactive programming.

At the end of this tutorial, you will learn about DOM manipulation, components, services, and RxJs observables. Also, you will be making http requests to get data from an API and render it on your Angular app; however, you need to keep in mind that Angular 2 and Angular 4 are utilized in the tutorial, but the concepts are pretty much the same even if you consider the latest Angular version.

Official Documentation

If you want to dive deep into Angular concepts, check out the official Angular documentation. You can get a quick introduction to Angular, learn how to set up a local environment on your system for Angular development, and dig into the fundamental concepts of Angular with this documentation.

The documentation is well-managed and explains everything required to take your Angular development skills to the next level. Also, some tutorials are provided within the documentation to learn by practice and get a good head start working with the Angular code.

Angular Projects

Being an aspiring Angular developer, you must polish your skills and showcase them to grab a good job; however, merely getting familiar with the fundamentals of Angular will not do much good. So, what’s important is that you work on some projects on your own to hone your skills and add your experience developing these projects on your resume.

So, if you are ready to test your learning and need some good project ideas to work on, don’t worry; we’ve got you covered. Following are some of the most popular Angular projects that you can consider working on to gain hands-on experience:

1. Notepad Web Application

This is one of the simplest Angular projects that are quite popular among beginners. The Notepad application allows users to create, modify, and delete notes. It is completely up to you how you want to sort the notes, but it is advisable to organize them per the time they’ve been added or modified.

While working on this project, you can either use mock APIs or create a backend with Node.js and use MongoDB as your database. This is important because the notes data you’ll create need to be accessed and rendered within the app using REST APIs. This will also help you to become familiar with the backend development using Node.js and MongoDB.

2. Chat App

Chat applications are highly popular, and Angular is a preferable choice for making a fully functional chat app, but as a beginner, you need to create a simple chat app to learn how things work. Once you get a good idea of how things work, you can add more functionality to your chat app.

While creating a chat app, you need to use concepts like services, dependency injection, RxJS, observables, and more. Your chat app should allow two users to connect and send messages in real-time. Also, create a server that will establish a connection between users and deliver messages.

If you want to make this project a bit more challenging and interesting, you can add functionalities like user login and authentication, chat rooms, etc. You can use popular libraries like socket.io to enable your chat app with real-time, event-based communication.

3. Simple Blogging App

As a beginner, this is another project that you will love working with. The concept of a blogging app is straightforward; it should allow users to add, delete, modify blogs having a title and the main content. Creating a basic blogging app is quite easy, but you will be implementing many Angular concepts, which is why this project can prove advantageous for you.

While developing this app, allow users to create and log in to their accounts to add blogs. Create an admin account that will be responsible for managing users and their content. The admin should have the authority to remove the content of other users.

To create the blogging app, you have to use various fundamental concepts of Angular, including form validation, services, pipes, routing and navigation, HttpClient, etcetera. Also, you need to enable CRUD operations in your app to deal with the blog data, such as adding or modifying blog content.

4. Responsive Admin Dashboard

The next project that we have is a responsive admin dashboard that can display an array of information handy for managing an online store, a marketing tool, etc. The basic purpose of an admin dashboard is to collect the desired data and display it in such a way that the admins can use it to make informed decisions.

But before you start working on this project, understandthat this project is complicated and challenging. So, it would be better to work on this project if you have already worked on a few Angular projects.

You can build an admin dashboard for an online store that sells some sort of product. So, the information that you need to track and display within the admin panel would be the number of visitors, products sold, sources of traffic, total revenue generated, etc. Also, you can use bar charts, pie charts, etc., to display the data in a meaningful way.

Angular Certification

Once you have done all your basic learning about Angular, your next aim would be to grab a well-paying job. For that, your knowledge alone about the technology is not going to be enough. So, what you need is a valid certification that will attest to your skills and achievements.

When you apply for the Angular developer job role, your resume will be scrutinized by recruiters. They will try to figure out if you have the skills that they are looking for or not. Also, you may have the right set of knowledge as an Angular developer, but how will your resume testify that?

So, it’s advisable to enroll yourself in an Angular certification program. A certification program is very much like a course that will help you learn Angular, but it also awards you with a certificate after you complete the program successfully. In such a case, having a valid certification will be of great help.

The biggest advantage of having a certification highlighted on your resume is that it will help you stand out from the crowd. Consequently, your chances of making it to the interview round will increase many times. So, if you are ready to get certification in Angular, all you need to do is explore some of the best Angular certifications on the web and enroll yourself with the one that seems the best.

Angular Interview Questions

You might be able to make it to the interview round for your dream job as an Angular developer, but the thought of how you would prepare yourself for the interview in the best way is something that can haunt you.

As you know, Angular is a complex web framework and has a wide array of concepts that will make it difficult for beginners to figure out what they should focus on while appearing for an interview.

However, you need not worry as certain Angular interview questions are asked quite commonly, and getting to know them will come in handy for you. Here are 10 popular interview questions that might give you a good idea of how interviewers test your knowledge about Angular:

  1. What is Angular?
  2. Why was Angular introduced as a client-side framework?
  3. Define the ng-content Directive?
  4. Please explain the various features of Angular.
  5. State some advantages of Angular over other frameworks.
  6. What is the difference between Angular and AngularJS?
  7. What are Lifecycle hooks in Angular? Explain some life cycle hooks.
  8. Could we make an Angular application to render on the server-side?
  9. Demonstrate navigating between different routes in an Angular application.
  10. What is the AOT (Ahead-Of-Time) Compilation? What are its advantages?

If you want to know more questions like these, you can check out our Top Angular Interview Questions blog. Also, you will get succinct answers for each question so that you do not have to go through the trouble of finding the answers on your own.

To Wrap it Up

Angular is surely among the most difficult JS frameworks to master. However, its wide range of features allows the creation of powerful and modern web apps. Also, being backed by the tech giant Google, you can expect that this framework to be endowed with more and more outstanding features in the future.

For learning Angular, it’s important to have at least some exposure to HTML, CSS, and Javascript. Also, there are some more prerequisites for learning Angular, including basic knowledge of Node.js and npm. To start coding with Angular, you can use a source-code editor, but choosing to work with an IDE can be more beneficial for you in the long run.

To get familiar with the Angular concepts, follow one or more tutorials that are easily available online. Be consistent as well as determined to make sure that learning is smooth and fruitful. Also, it’s advisable to undertake a couple of projects once you have learned the fundamentals of Angular and are ready to write some code on your own.

You can improve the chances of getting hired by a reputable organization for the role of Angular developer by going for a certification program. A certification in Angular will attest to your skills and convince recruiters that you are ready to take up the responsibilities as an Angular developer. Also, don’t forget to go through the most common Angular interview questions, as this may come in handy for cracking an interview and getting your dream job.

Finally, I hope you are now well-equipped with all the essential knowledge and resources you need to learn and master Angular. If you are still stuck up with something and need guidance, drop your comments below.

Good luck! ?

People are also reading:

  • Angular Interview Questions
  • Difference between Angular vs React
  • Angular IDE
  • Best Angular Alternatives
  • Difference between Node JS vs Angular
  • Jquery Interview Questions and Answers
  • How do I learn Javascript Quickly?
  • Javascript Interview Questions & Answers
  • Best Javascript Books
  • Best JavaScript Frameworks
  • React Interview Questions and Answers
  • Difference between Python vs Javascript
Источник

Понравилась статья? Поделить с друзьями:
  • Масло антигрипп в сезон простуд инструкция по применению
  • Энтеросгель инструкция по применению взрослым гель при диарее
  • Мануал honda stream rn3
  • Тестер yato yt 73080 инструкция по применению
  • Чем штукатурить пеноплекс снаружи дома своими руками пошаговая инструкция