Angular. Установка CLI, компоненты, хардкод авторизация для чайников

Добрый день, мои маленькие любители джавы. Сегодня мы пошагово напишем мини приложение с использованием Angular. По сути на выходе мы получим всего три страницы. Целью является разбор некоторых базовых возможностей Angular, для того чтобы любой “чайник”, такой как я, смог понять принцип работы Angular и сумел создать свое собственное SPA с блэк-джеком и вьюхами.

Что внутри?

Установка Angular CLI. Создание и запуск Angular – приложения
Создание компонентов Login, Welcome и Error
*ngIf, [(ngModel)] , (click)
Routing
Хардкод авторизация

Установка Angular CLI. Создание и запуск Angular – приложения

CLI – Command Line Interface, проще говоря, это возможность использовать Angular с помощью консоли.

Прежде чем перейти к установке Angular, необходимо установить NodeJs – среда выполнения для JavaScript. Для этого необходимо выполнить следующие шаги:

Перейти на сайт https://nodejs.org/en/download/ и скачать LTS-версию для своей операционной системы. Затем установить как обычное приложение.
Открываем консоль и вводим следующую команду:
npm install -g @angular/cli
Начнется загрузка и установка компонентов Angular CLI. Это может занять несколько минут. После выполнения консоль будет выглядеть примерно так:
Теперь создадим папку для нашего проекта. Для этого вводим команды:
mkdir angularApp cd angularApp
вы должны оказаться в только что созданной папке angularApp:
Теперь вводим команду
ng new igor-ivanovich-app
Отвечаем на вопрос про роутинг Y, а при выборе формата стилей нажимаем Enter (будет выбран CSS). Команда ng new создаст проект с названием igor-ivanovich-app.
Теперь запустим наше приложение в режиме разработки. Для этого перейдем в папку igor-ivanovich-app с помощью команды:
cd igor-ivanovich-app
и выполним команду
ng serve – запускает приложение локально в режиме разработки.
Открываем браузер и переходим на страницу http://localhost:4200/, если все сделано правильно, то вы увидите следующее:
Отлично! Мы установили Angular CLI, создали и запустили наше приложение.

Создание компонентов Login, Welcome и Error

Компонент в Angular, это часть web-страницы, или страница целиком. В нем содержится html-код, css и TypeScript. Мысленно вы можете поделить на компоненты даже эту веб-страницу. Например, вы читаете текст в компоненте Content, внизу страницы компонент Footer, вверху Navigation.

Создадим компоненты для нашего приложения. Для этого воспользуемся командой
ng generate component login или коротко ng g c login
login – название нашего компонента.

Команды нужно выполнять строго в папке igor-ivanovich-app. При этом во второй консоли. У вас должна продолжить работу консоль с запущенной командой ng serve.

В консоли вы увидите следующее:
Было создано четыре файла и обновлен один. Обновление файла app.module.ts нам пока как чайникам неинтересно, посмотрим на расширения созданных файлов.

.html – html-код компонента
.css – стили компонента
.ts – TypeScript-файл компонента. В нем описывается логика его работы
.spec.ts – файл для unit-тестирования компонента

По-аналогии создадим оставшиеся компоненты. Введем команды:
ng generate component welcome ng generate component error

Теперь экспортируем наше приложение с помощью Intellij IDEA: File -> New->Project From Existing Source ( если она у вас не установлена, то посмотрите видео как установить Intellij IDEA) и посмотрим на структуру получившегося приложения:

Обратим лишь внимание на то, что компоненты лежат в своих папках. Это облегчит нам их редактирование.

*ngIf, [(ngModel)] , (click)

Плавно перейдем к реализации хардкорной авторизации. Начнем редактировать наши компоненты. Перейдем в файл login.component.html и введем следующее:

<small *ngIf="isInvalid">Invalid Credentials</small>

<div>
  Username: <input type="text" [(ngModel)]="username">
  Password: <input type="password" [(ngModel)]="password">
  <button (click)="handleLogin()">Login</button>
</div>

<small *ngIf="isInvalid">Invalid Credentials</small>

<div>

Username: <input type="text" [(ngModel)]="username">

Password: <input type="password" [(ngModel)]="password">

<button (click)="handleLogin()">Login</button>

</div>

Помимо обычных HTML-тегов в коде есть три функции Angular:

*ngIf – принимает в себя булево значение. Если значение true – то блок, где находится *ngIf будет показан, и скрыт в случае false. Мы передаем переменную isInvalid, которую создадим ниже, и показываем блок в случае неудачной авторизации.
[(ngModel)] – используется для двунаправленного байндинга. Т.е. изменение поля input приведут к изменению переменной username или password и наоборот. Если по умному, то изменение в модели приведут к изменению вью, а изменения вью приведут к изменению модели. Так же в Angular есть однонаправленный байндинг, который называется интерполяцией и записывается как {{username}}. В этом случае изменения в input не приведут к изменению username.
(click) – принимает в себя функцию, которая должна сработать в случае выполнения действия пользователем. В данном случае – при нажатии кнопки будет вызвана функция handleLogin().

Теперь откроем файл login.component.ts и напишем следующий код:

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

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  username: string = "";
  password: string = "";
  isInvalid: boolean = false;

  constructor() {
  }

  ngOnInit() {
  }

  handleLogin() {
    if (this.username === "Igor" && this.password === "Niva") {
      this.isInvalid = false;
    } else {
      this.isInvalid = true;
    }
    console.log(this.username)
  }
}

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

@Component({

selector: 'app-login',

templateUrl: './login.component.html',

styleUrls: ['./login.component.css']

})

export class LoginComponent implements OnInit {

username: string = "";

password: string = "";

isInvalid: boolean = false;

constructor() {

}

ngOnInit() {

}

handleLogin() {

if (this.username === "Igor" && this.password === "Niva") {

this.isInvalid = false;

} else {

this.isInvalid = true;

}

console.log(this.username)

}

Тут мы видим описание переменных, их html, а так же функцию handleLogin(). Разберем структуру класса.

import. Чтобы использовать сторонние компоненты их нужно импортировать с помощью этого слова
@Component. Эта аннотация указывает на то, что в данном файле описан именно компонент. Принимает в себя объект, в котором selector – тег компонента, templateUrl и styleUrls – ссылки на файлы компонента с HTML и CSS соответственно.
export. Указывает на то, что класс может быть экспортирован, т.е. использоваться в import у других компонентов.

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

1.Откроем файл app.component.html, удалим все и вставим следующий код:

<app-login></app-login>

<router-outlet></router-outlet>

<app-login></app-login>

<router-outlet></router-outlet>

2. Откроем файл app.module.ts и добивим в секцию imports FormsModule, а так же добавим его в import. Файл будет выглядеть так:

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
import {LoginComponent} from './login/login.component';
import {WelcomeComponent} from './welcome/welcome.component';
import {ErrorComponent} from './error/error.component';
import {FormsModule} from "@angular/forms";

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    WelcomeComponent,
    ErrorComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

import {BrowserModule} from '@angular/platform-browser';

import {NgModule} from '@angular/core';

import {AppRoutingModule} from './app-routing.module';

import {AppComponent} from './app.component';

import {LoginComponent} from './login/login.component';

import {WelcomeComponent} from './welcome/welcome.component';

import {ErrorComponent} from './error/error.component';

import {FormsModule} from "@angular/forms";

@NgModule({

declarations: [

AppComponent,

LoginComponent,

WelcomeComponent,

ErrorComponent

imports: [

BrowserModule,

AppRoutingModule,

FormsModule,

providers: [],

bootstrap: [AppComponent]

})

export class AppModule {

}

3. Откроем браузер и увидим нашу форму для авторизации. Введите любой логин и пароль, нажмите Login и появится блок сверху. Если вы введете логин Igor и пароль Niva, то блок пропадет. Будет считаться, что авторизация пройдена успешно. В консоли вы сможете увидеть, как работает двунаправленный байндинг.

Теперь заполним остальные компоненты. Откроем error.component.html и просто напишем там:

Page not found!

1	Page not found!

Routing

Routing – это навигация между компонентами. Мы просто описываем путь в адресной строке, который открывает выбранный компонент. Для этого перейдем в файл app-routing.module и в константу routes добавим навигацию по созданным компонентам. Файл будет выглядеть так:

import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {LoginComponent} from "./login/login.component";
import {WelcomeComponent} from "./welcome/welcome.component";
import {ErrorComponent} from "./error/error.component";


const routes: Routes = [
  {path: 'login', component: LoginComponent},
  {path: 'welcome/:name', component: WelcomeComponent},
  {path: '**', component: ErrorComponent},
];

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

import {NgModule} from '@angular/core';

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

import {LoginComponent} from "./login/login.component";

import {WelcomeComponent} from "./welcome/welcome.component";

import {ErrorComponent} from "./error/error.component";

const routes: Routes = [

{path: 'login', component: LoginComponent},

{path: 'welcome/:name', component: WelcomeComponent},

{path: '**', component: ErrorComponent},

];

@NgModule({

imports: [RouterModule.forRoot(routes)],

exports: [RouterModule]

})

export class AppRoutingModule {

}

Мы добавили три объекта в массив routes. Обратим внимание на welcome/:name. :name – это параметр запроса, который мы будем использовать ниже. ** – в случае если ни одно совпадение пути не найдено, будет загружен компонент Error.

Удалим <app-login></app-login> из файла app.component.html и запустим страницу. Вы увидите компонент ошибки. Чтобы вновь открыть форму авторизации, нужно перейди по адресу компонента: http://localhost:4200/login . Чтобы посмотреть компонент welcome нужно перейти на welcome + любое значение параметра name. Например, http://localhost:4200/welcome/renat .

Хардкод авторизация

Завершим реализацию авторизации. Свяжем компоненты между собой. Теперь в случае удачной авторизации мы будем переходить на компонент welcome, передавая в параметр логин, и выводить в сообщение приветствие, адресованное пользователю. Для этого сделаем следующее:

1.Откроем файл login.components.ts, осуществим Dependency Injection (как это сделано в Spring читай тут). Вставим как параметр в конструктор private router: Router и доработаем функцию handleLogin(), чтобы при удачной авторизации переходить на страницу welcome, передавая логин:
this.router.navigate(['welcome', this.username]). Полностью файл будет выглядеть так:

import {Component, OnInit} from '@angular/core';
import {Router, Routes} from "@angular/router";

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  username: string = "";
  password: string = "";
  isInvalid: boolean = false;

  constructor(private router: Router) {
  }

  ngOnInit() {
  }

  handleLogin() {
    if (this.username === "Igor" && this.password === "Niva") {
      this.isInvalid = false;
      this.router.navigate(['welcome', this.username]);
    } else {
      this.isInvalid = true;
    }
    console.log(this.username)
  }
}

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

import {Router, Routes} from "@angular/router";

@Component({

selector: 'app-login',

templateUrl: './login.component.html',

styleUrls: ['./login.component.css']

})

export class LoginComponent implements OnInit {

username: string = "";

password: string = "";

isInvalid: boolean = false;

constructor(private router: Router) {

}

ngOnInit() {

}

handleLogin() {

if (this.username === "Igor" && this.password === "Niva") {

this.isInvalid = false;

this.router.navigate(['welcome', this.username]);

} else {

this.isInvalid = true;

}

console.log(this.username)

}

2.Откроем файл welcome.components.ts и с помощью DI добавим в конструктор параметр
private router: ActivatedRoute
В ngOnInit() добавим строку
this.username = this.router.snapshot.params['name']; Полностью код файлы получится следующий:

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

@Component({
  selector: 'app-welcome',
  templateUrl: './welcome.component.html',
  styleUrls: ['./welcome.component.css']
})
export class WelcomeComponent implements OnInit {
  username: string = "user";

  constructor(private router: ActivatedRoute) {
  }

  ngOnInit() {
    this.username = this.router.snapshot.params['name'];
  }

}

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

import {ActivatedRoute} from "@angular/router";

@Component({

selector: 'app-welcome',

templateUrl: './welcome.component.html',

styleUrls: ['./welcome.component.css']

})

export class WelcomeComponent implements OnInit {

username: string = "user";

constructor(private router: ActivatedRoute) {

}

ngOnInit() {

this.username = this.router.snapshot.params['name'];

}

Теперь откройте браузер и введите правильный логин и пароль. В результате вы перейдете на страницу welcome и увидите приветствие Welcome, dear Igor!

Полный код проекта на GitHub.

DEV SOFT LIFE FREE.

Angular. Установка CLI, компоненты, хардкод авторизация для чайников

Установка Angular CLI. Создание и запуск Angular – приложения

Создание компонентов Login, Welcome и Error

*ngIf, [(ngModel)] , (click)

Routing

Хардкод авторизация

Николай Грибанов

7 ошибок джуна

Аннотации в Java. Пишем свою ORM с блэк-джеком и вьюхами

Похожие статьи:

Архитектура JDBC

Docker. Создание контейнера с базой данных Oracle

PL/SQL. Начало. Обзор основных возможностей

Оставить комментарий: Отменить

Angular. Установка CLI, компоненты, хардкод авторизация для чайников

Установка Angular CLI. Создание и запуск Angular – приложения

Создание компонентов Login, Welcome и Error

*ngIf, [(ngModel)] , (click)

Routing

Хардкод авторизация

Николай Грибанов

Post Navigation

7 ошибок джуна

Аннотации в Java. Пишем свою ORM с блэк-джеком и вьюхами

Похожие статьи:

Архитектура JDBC

Docker. Создание контейнера с базой данных Oracle

PL/SQL. Начало. Обзор основных возможностей

Оставить комментарий: Отменить