AngularProjectPlus

1. Angular 4: преимущества

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

2. Новый инструмент командной строки Angular CLI

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

3. Создание среды разработки Angular

# Установить Angular CLI глобально (можно использовать ng -v для проверки установленной версии)
npm install -g @angular/cli

4. Создание проекта

ng new angularProjectPlus

Если добавить параметр --routing после создания проекта, в каталоге app появится дополнительный файл конфигурации маршрутизации app-routing.module.ts. Одновременно файл app.module.ts автоматически импортирует сгенерированный файл конфигурации маршрутизации, а файл app.component.html импортирует <router-outlet></router-outlet> (обратите внимание, что этот параметр не использовался при создании этого проекта; мы сделаем это вручную позже для обучения).

5. Запуск сервера разработки

cd angularProjectPlus
ng serve --open

Команда ng serve запускает сервер разработки, отслеживает изменения файлов и автоматически перестраивает приложение при изменении этих файлов. Параметр --open (или -o) автоматически открывает браузер и переходит на http://localhost:4200/. Приложение приветствует вас сообщением: Welcome to app!

6. Процесс запуска Angular

Через файл angular-cli.json в корневом каталоге можно обнаружить, что файл запуска находится в папке src в файле main.ts, а файл входа — в index.html.

7. Начало работы

7.1 Подготовка к разработке: интеграция сторонних библиотек, jQuery и Bootstrap

npm install jquery --save
npm install @types/jquery --save-dev
npm install bootstrap --save
npm install @types/bootstrap --save-dev

После установки пакетов @types/jquery и @types/bootstrap необходимо изменить файл .angular-cli.json, чтобы TypeScript мог распознавать jQuery и Bootstrap. Для этого нужно изменить "scripts": [] на следующее:

"scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"
]

Также необходимо изменить "styles": ["styles.css"] на:

 "styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css"
 ],

После завершения установки необходимо изменить tsconfig.app.json в папке src, добавив jQuery в массив types.

7.2 Генерация компонентов проекта

ng g component navbar
ng g component footer
ng g component carousel
ng g component product
ng g component stars
ng g component search
ng g component home
ng g component product-detail

Эти команды генерируют восемь компонентов для страницы. Каждый компонент имеет соответствующую HTML-страницу компонента, которую можно добавить в файл app.component.html:

<app-navbar></app-navbar>
<div class="container">
  <div class="row">
    <div class="col-md-3">
      <app-search></app-search>
    </div>
    <div class="col-md-9">
      <div class="row carousel-container">
        <app-carousel></app-carousel>
      </div>
      <div class="row">
        <app-product></app-product>
      </div>
    </div>
  </div>
</div>
<app-footer></app-footer>

Компоненты, которые являются динамическими и требуют цикла данных, используют тег цикла Angular *ngFor. Передача значений между родительскими и дочерними компонентами осуществляется через Angular @Input(). На этом работа с компонентами страниц на основе Angular завершается.

7.3 Использование Angular Router (если проект был создан с параметром --routing, будет сгенерирован следующий файл. Этот проект был написан вручную, и достаточно изменить файл app.module.ts)

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

В массиве const routes: Routes = [] можно настроить собственный маршрут. Файл app.module.ts также необходимо изменить:

import {RouterModule, Routes} from "@angular/router";
const routeConfig: Routes = [
  {path: '', component: HomeComponent},
  {path: 'product/:id', component: ProductDetailComponent}
];
imports: [
   RouterModule.forRoot(routeConfig)
],

Говоря о маршрутах, стоит упомянуть проблему передачи параметров между страницами. К счастью, Angular позволяет настраивать параметры маршрута:

<a [routerLink]="['/product', product.id]">{{product.title}}</a>

На странице сведений можно получить идентификатор и отобразить его следующим образом:

export class ProductDetailComponent implements OnInit {
  public productId : number;
  
  constructor(private routerInfo: ActivatedRoute) {}
  ngOnInit() {
      //----получаем id и присваиваем его productId
      this.productId=this.routerInfo.snapshot.params["id"]
      //----------------------------
  }

}

HTML-компонент страницы:

Товар ID равен {{productId}}