JavaRush /Курсы /Модуль 2: Fullstack /Введение в Angular и TypeScript

Введение в Angular и TypeScript

Модуль 2: Fullstack

8 уровень , 5 лекция

Открыта

6.1 Знакомство c Angular

Angular — это популярный фреймворк для разработки веб-приложений, созданный и поддерживаемый компанией Google. Он использует TypeScript как основной язык программирования, что позволяет разрабатывать крупные и масштабируемые приложения с улучшенной типизацией и проверкой на этапе компиляции. Сейчас мы с вами рассмотрим основы Angular и TypeScript, а также процесс настройки нового проекта.

Основы Angular

Angular — это платформа для разработки клиентских приложений на веб-технологиях. Angular предоставляет:

Компоненты: основные строительные блоки Angular-приложений, которые описывают части пользовательского интерфейса.
Модули: логическая организация кода приложения, объединяющая связанные компоненты, директивы и сервисы.
Директивы: инструменты для манипуляции DOM элементами.
Сервисы: логика и данные, которые можно использовать в различных компонентах приложения.
Dependency Injection (DI): внедрение зависимостей для упрощения тестирования и повторного использования кода.
Роутинг: навигация между различными частями приложения.

Почему использовать TypeScript с Angular?

TypeScript добавляет к Angular следующие преимущества:

Статическая типизация: улучшает качество кода и помогает избежать ошибок.
Современный JavaScript: поддержка новейших возможностей ECMAScript.
Инструменты разработки: поддержка IDE и редакторов с мощными функциями автодополнения и рефакторинга.
Четкая структура: обеспечивает лучшую организацию кода и поддерживаемость.

6.2 Установка и настройка Angular CLI

Angular CLI — это инструмент командной строки, который упрощает создание, сборку и обслуживание Angular-приложений. Для начала работы с Angular установите Angular CLI.

Установка Angular CLI:

Terminal

    
      npm install -g @angular/cli

Создание нового проекта:

Terminal

    
      ng new my-angular-app

При создании нового проекта CLI спросит о настройках, таких как использование маршрутизации и предпочтительные стили CSS (например, SCSS, SASS, LESS).

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

Terminal

    
      cd my-angular-app

    
      ng serve

Откройте браузер и перейдите по адресу http://localhost:4200, чтобы увидеть ваше новое Angular-приложение.

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

После создания проекта структура папок будет выглядеть следующим образом:

Text

    
      my-angular-app/
      ├── e2e/                 # Тесты End-to-End
      ├── node_modules/        # Зависимости npm
      ├── src/                 # Исходный код приложения
      │   ├── app/             # Корневой модуль и компоненты приложения
      │   ├── assets/          # Статические ресурсы
      │   ├── environments/    # Конфигурации окружения
      │   ├── index.html       # Главный HTML файл
      │   ├── main.ts          # Основной файл TypeScript
      │   ├── polyfills.ts     # Полифиллы
      │   ├── styles.css       # Глобальные стили
      │   └── test.ts          # Конфигурация тестов
      ├── angular.json         # Конфигурация Angular CLI
      ├── package.json         # Метаданные проекта и зависимости
      ├── tsconfig.json        # Конфигурация TypeScript
      └── tslint.json          # Конфигурация TSLint

6.3 Основные файлы конфигурации

angular.json

Файл angular.json содержит конфигурацию Angular CLI, включая настройки для сборки, сервера разработки и тестирования.

Пример angular.json:

JSON

    
      {
        "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
        "projects": {
          "my-angular-app": {
            "root": "",
            "sourceRoot": "src",
            "projectType": "application",
            ...
          }
        },
        ...
      }

Объяснения:

$schema: Указывает на схему конфигурации, которая используется для валидации файла angular.json.
projects: Объект, содержащий информацию о проектах в приложении Angular.
my-angular-app: Имя проекта. Может быть любым.
- root: Корневая директория проекта. Обычно оставляется пустым, если проект находится в корне.
- sourceRoot: Директория, где находятся исходные файлы приложения. Обычно это src.
- projectType: Тип проекта, который может быть application или library. Указывает, является ли проект приложением или библиотекой.

tsconfig.json

Файл tsconfig.json содержит настройки компилятора TypeScript.

Пример tsconfig.json:

JSON

    
      {
        "compileOnSave": false,
        "compilerOptions": {
          "outDir": "./dist/out-tsc",
          "sourceMap": true,
          "declaration": false,
          "downlevelIteration": true,
          "experimentalDecorators": true,
          "module": "esnext",
          "moduleResolution": "node",
          "importHelpers": true,
          "target": "es2015",
          "typeRoots": ["node_modules/@types"],
          "lib": ["es2018", "dom"]
        },
        "angularCompilerOptions": {
          "fullTemplateTypeCheck": true,
          "strictInjectionParameters": true
        }
      }

Объяснения:

compileOnSave: Указывает, следует ли автоматически компилировать файлы при сохранении. Значение false означает, что компиляция не будет выполняться автоматически.
compilerOptions: Объект, содержащий параметры компилятора TypeScript.
outDir: Директория, куда будут помещены скомпилированные файлы. В данном случае — ./dist/out-tsc.
sourceMap: Указывает, нужно ли генерировать карты исходников для отладки. Значение true включает эту функцию.
declaration: Указывает, следует ли генерировать файлы декларации (.d.ts). Значение false означает, что они не будут созданы.
downlevelIteration: Включает поддержку итерации для более старых версий ECMAScript.
experimentalDecorators: Позволяет использовать экспериментальные декораторы в коде. Значение true активирует эту возможность.
module: Указывает формат модуля, который будет использоваться. Значение esnext указывает на использование современного формата ES.
moduleResolution: Определяет стратегию разрешения модулей. Значение node соответствует Node.js.
importHelpers: Указывает, следует ли использовать вспомогательные функции из пакета tslib для оптимизации. Значение true включает эту функцию.
target: Определяет версию ECMAScript, на которую будет скомпилирован код. В данном случае — es2015.
typeRoots: Указывает на директории, где компилятор будет искать типы. В данном случае это node_modules/@types.
lib: Определяет библиотеки, которые будут доступны в проекте. В данном случае указаны es2018 и dom.
angularCompilerOptions: Опции компилятора Angular.
fullTemplateTypeCheck: Включает полную проверку типов в шаблонах. Значение true активирует эту проверку.
strictInjectionParameters: Включает строгую проверку параметров инъекции зависимостей. Значение true делает эту проверку обязательной.

package.json

Файл package.json содержит список зависимостей и метаданные проекта.

Пример package.json:

JSON

    
      {
        "name": "my-angular-app",
        "version": "0.0.0",
        "scripts": {
          "ng": "ng",
          "start": "ng serve",
          "build": "ng build",
          "test": "ng test",
          "lint": "ng lint",
          "e2e": "ng e2e"
        },
        "dependencies": {
          "@angular/animations": "~11.0.1",
          "@angular/common": "~11.0.1",
          "@angular/compiler": "~11.0.1",
          "@angular/core": "~11.0.1",
          "@angular/forms": "~11.0.1",
          "@angular/platform-browser": "~11.0.1",
          "@angular/platform-browser-dynamic": "~11.0.1",
          "@angular/router": "~11.0.1",
          "rxjs": "~6.6.0",
          "tslib": "^2.0.0",
          "zone.js": "~0.10.2"
        },
        "devDependencies": {
          "@angular-devkit/build-angular": "~0.1100.1",
          "@angular/cli": "~11.0.1",
          "@angular/compiler-cli": "~11.0.1",
          "@types/jasmine": "~3.6.0",
          "@types/node": "^12.11.1",
          "jasmine-core": "~3.6.0",
          "karma": "~5.0.0",
          "karma-chrome-launcher": "~3.1.0",
          "karma-coverage-istanbul-reporter": "~3.0.2",
          "karma-jasmine": "~4.0.0",
          "karma-jasmine-html-reporter": "^1.5.0",
          "typescript": "~4.0.2"
        }
      }

6.4 Создание первого компонента

Angular CLI предоставляет команду для создания новых компонентов, сервисов, директив и других сущностей.

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

Terminal

    
      ng generate component hello-world

Эта команда создаст новый компонент hello-world и обновит соответствующие файлы проекта.

Редактирование компонента:

Отредактируйте файлы, чтобы они стали похожи на файлы ниже —

src/app/hello-world/hello-world.component.ts:

TypeScript

    
      import { Component, OnInit } from '@angular/core';

      // Декоратор компонента с метаданными
      @Component({
        selector: 'app-hello-world', // CSS-селектор для использования компонента
        templateUrl: './hello-world.component.html', // Путь к шаблону компонента
        styleUrls: ['./hello-world.component.css'] // Путь к стилям компонента
      })

      // Класс компонента HelloWorld, реализующий интерфейс OnInit
      export class HelloWorldComponent implements OnInit {
        message: string; // Сообщение, которое будет отображаться

        // Конструктор компонента
        constructor() {
          this.message = 'Hello, Angular and TypeScript!'; // Инициализация сообщения
        }

        // Метод ngOnInit, вызывается после создания компонента
        ngOnInit(): void {}
      }

src/app/hello-world/hello-world.component.html:

HTML

    
      <h1>{{ message }}</h1>

Использование компонента:

Добавьте компонент в шаблон корневого модуля.

src/app/app.component.html:

HTML

    
      <app-hello-world></app-hello-world>

6.5 Настройка роутинга

Роутинг позволяет навигировать между различными компонентами в приложении.

Создание модуля роутинга:

Terminal

    
      ng generate module app-routing --flat --module=app

Настройка роутинга:

src/app/app-routing.module.ts:

TypeScript

    
      import { NgModule } from '@angular/core';
      import { RouterModule, Routes } from '@angular/router';
      import { HelloWorldComponent } from './hello-world/hello-world.component';

      // Определение маршрутов приложения
      const routes: Routes = [
        { path: 'hello', component: HelloWorldComponent }, // Маршрут для компонента HelloWorld
        { path: '', redirectTo: '/hello', pathMatch: 'full' } // Перенаправление с корневого маршрута на /hello
      ];

      @NgModule({
        imports: [RouterModule.forRoot(routes)], // Импортирование RouterModule с определенными маршрутами
        exports: [RouterModule] // Экспортирование RouterModule для использования в других частях приложения
      })

      export class AppRoutingModule {}

Обновление корневого модуля:

src/app/app.module.ts:

TypeScript

    
      import { NgModule } from '@angular/core';
      import { BrowserModule } from '@angular/platform-browser';
      import { AppRoutingModule } from './app-routing.module';
      import { AppComponent } from './app.component';
      import { HelloWorldComponent } from './hello-world/hello-world.component';

      // Основной модуль приложения
      @NgModule({
        declarations: [ // Объявление компонентов, которые будут использоваться в этом модуле
          AppComponent, // Корневой компонент приложения
          HelloWorldComponent // Компонент HelloWorld
        ],

        imports: [ // Импорт других модулей
          BrowserModule, // Модуль для работы с браузером
          AppRoutingModule // Модуль маршрутизации
        ],

        providers: [], // Список сервисов, доступных в этом модуле
        bootstrap: [AppComponent] // Корневой компонент для инициализации приложения
      })

      export class AppModule {}

Обновление корневого шаблона:

src/app/app.component.html:

HTML

    
      <nav>
        <a routerLink="/hello">Hello World</a>
      </nav>
      <router-outlet></router-outlet>

Предыдущая Предыдущая лекция

Следующая Следующая лекция

Комментарии

ЧТОБЫ ПОСМОТРЕТЬ ВСЕ КОММЕНТАРИИ ИЛИ ОСТАВИТЬ КОММЕНТАРИЙ,
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ