Angular 4 - Краткое руководство

Есть три основных выпуска Angular. Первая выпущенная версия - Angular1, также называемая AngularJS. За Angular1 последовал Angular2, который по сравнению с Angular1 претерпел множество изменений.

Структура Angular основана на архитектуре компонентов / сервисов. AngularJS был основан на контроллере представления модели.Angular 4 выпущенный в марте 2017 года, оказался большим прорывом и является последним выпуском команды Angular после Angular2.

Angular 4 почти такой же, как Angular 2. Он имеет обратную совместимость с Angular 2. Проекты, разработанные в Angular 2, без проблем будут работать с Angular 4.

Давайте теперь посмотрим на новые функции и изменения, внесенные в Angular 4.

Почему Angular4, а не Angular3?

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

Давайте теперь посмотрим на новые функции, добавленные в Angular 4 -

ngIf

Angular2 поддерживает только ifсостояние. Однако Angular 4 поддерживаетif elseсостояние тоже. Давайте посмотрим, как это работает, используя ng-template.

<span *ngIf="isavailable; else condition1">Condition is valid.</span>
<ng-template #condition1>Condition is invalid</ng-template>

как ключевое слово в цикле

С помощью as ключевое слово, вы можете сохранить значение, как показано ниже -

<div *ngFor="let i of months | slice:0:5 as total">
   Months: {{i}} Total: {{total.length}}
</div>

Переменная total хранит выходные данные среза с использованием as ключевое слово.

Пакет анимации

Анимация в Angular 4 доступна как отдельный пакет и должна быть импортирована из @ angular / animations. В Angular2 это было доступно с @angular/core. Он по-прежнему остается неизменным из-за его обратной совместимости.

Шаблон

Angular 4 использует <ng-template> как тег вместо <template>;последний использовался в Angular2. Причина изменения Angular 4<template> к <ng-template> из-за конфликта имен <template> тег с html <template>стандартный тег. Он полностью устарел. Это одно из основных изменений в Angular 4.

TypeScript 2.2

Angular 4 обновлен до последней версии TypeScript 2.2. Это помогает повысить скорость и улучшить проверку типов в проекте.

Дело о трубе

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

<div>
   <h2>{{ 'Angular 4 titlecase' | titlecase }}</h2>
</div>

Приведенная выше строка кода генерирует следующий вывод - Angular 4 Titlecase.

Параметры поиска HTTP

Параметры поиска в http get api упрощены. Нам не нужно звонитьURLSearchParams для того же, что и в Angular2.

Меньшие и более быстрые приложения

Приложения Angular 4 меньше и быстрее по сравнению с Angular2. Он использует TypeScript версии 2.2, последнюю версию, которая делает окончательную компиляцию небольшими по размеру.

В этой главе мы обсудим настройку среды, необходимую для Angular 4. Чтобы установить Angular 4, нам потребуется следующее:

Nodejs
Npm
Angular CLI
IDE для написания вашего кода

Nodejs должно быть больше 4, а npm должно быть больше 3.

Nodejs

Чтобы проверить, установлен ли nodejs в вашей системе, введите node –vв терминале. Это поможет вам увидеть версию nodejs, установленную в настоящее время в вашей системе.

C:\>node –v
v6.11.0

Если он ничего не печатает, установите nodejs в свою систему. Чтобы установить nodejs, перейдите на домашнюю страницуhttps://nodejs.org/en/download/ из nodejs и установите пакет на основе вашей ОС.

Домашняя страница nodejs будет выглядеть следующим образом -

В зависимости от вашей ОС установите необходимый пакет. После установки nodejs вместе с ним будет установлен npm. Чтобы проверить, установлен ли npm, введите в терминале npm –v. Он должен отображать версию файла npm.

C:\>npm –v
5.3.0

Установка Angular 4 очень проста с помощью angular CLI. Посетите домашнюю страницуhttps://cli.angular.io/ angular, чтобы получить ссылку на команду.

Тип npm install –g @angular/cli, чтобы установить angular cli в вашей системе.

Вы получите указанную выше установку в своем терминале после установки Angular CLI. Вы можете использовать любую IDE по вашему выбору, например, WebStorm, Atom, Visual Studio Code и т. Д.

Подробности настройки проекта описаны в следующей главе.

AngularJS основан на контроллере представления модели, тогда как Angular 2 основан на структуре компонентов. Angular 4 работает по той же структуре, что и Angular2, но быстрее по сравнению с Angular2.

Angular4 использует версию TypeScript 2.2, тогда как Angular 2 использует TypeScript версии 1.8. Это дает большую разницу в производительности.

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

Перейти на этот сайт https://cli.angular.io установить Angular CLI.

Чтобы начать установку, нам сначала нужно убедиться, что у нас установлены nodejs и npm с последней версией. Пакет npm устанавливается вместе с nodejs.

Перейти на сайт nodejs https://nodejs.org/en/.

Пользователям рекомендуется последняя версия Nodejs v6.11.0. Пользователи, у которых уже есть nodejs больше 4, могут пропустить описанный выше процесс. После установки nodejs вы можете проверить версию node в командной строке с помощью команды node–v, как показано ниже -

В командной строке отображается версия 6.11.0. После установки nodejs вместе с ним будет установлен npm.

Чтобы проверить версию npm, введите команду npm –vв терминале. Он отобразит версию npm, как показано ниже.

Версия npm - 3.10.10. Теперь, когда у нас установлены nodejs и npm, давайте запустим команды angular cli для установки Angular 4. Вы увидите следующие команды на веб-странице:

npm install -g @angular/cli //command to install angular 4

ng new Angular 4-app // name of the project

cd my-dream-app

ng serve

Давайте начнем с первой команды в командной строке и посмотрим, как она работает.

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

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

После завершения указанной выше команды для установки появится следующая командная строка -

Мы создали пустую папку ProjectA4и установил команду Angular CLI. Мы также использовали-gчтобы установить Angular CLI глобально. Теперь вы можете создать свой проект Angular 4 в любом каталоге или папке, и вам не нужно устанавливать проект Angular CLI, поскольку он установлен в вашей системе глобально, и вы можете использовать его из любого каталога.

Давайте теперь проверим, установлен ли Angular CLI или нет. Чтобы проверить установку, выполните в терминале следующую команду -

ng -v

Мы получаем версию @ angular / cli, которая сейчас 1.2.0. Версия запущенного узла - 6.11.0, а также сведения об ОС. Приведенная выше информация говорит нам, что мы успешно установили angular cli и теперь готовы приступить к нашему проекту.

Теперь мы установили Angular 4. Давайте теперь создадим наш первый проект в Angular 4. Чтобы создать проект в Angular 4, мы будем использовать следующую команду -

ng new projectname

Назовем проект ng new Angular 4-app.

Давайте теперь запустим указанную выше команду в командной строке.

Проект Angular 4-appсоздан успешно. Он устанавливает все необходимые пакеты, необходимые для работы нашего проекта в Angular 4. Давайте теперь переключимся на созданный проект, который находится в каталогеAngular 4-app. Измените каталог в командной строке -cd Angular 4-app.

Мы будем использовать Visual Studio Code IDE для работы с Angular 4; вы можете использовать любую IDE, например, Atom, WebStorm и т. д.

Чтобы загрузить код Visual Studio, перейдите по ссылке https://code.visualstudio.com/ и нажмите Download for Windows.

Нажмите Download for Windows для установки IDE и запустите установку, чтобы начать использовать IDE.

Редактор выглядит следующим образом -

Мы не запускали в нем ни одного проекта. Давайте теперь возьмем проект, который мы создали с помощью angular-cli.

Мы рассмотрим Angular 4-appпроект. Давайте откроем приложение Angular 4 и посмотрим, как выглядит структура папок.

Теперь, когда у нас есть файловая структура для нашего проекта, давайте скомпилируем наш проект с помощью следующей команды -

ng serve

В ng serve команда создает приложение и запускает веб-сервер.

Веб-сервер запускается на порту 4200. Введите URL-адрес http://localhost:4200/в браузере и посмотрите результат. После компиляции проекта вы получите следующий результат:

Как только вы бежите http://localhost:4200/ в браузере вы будете перенаправлены на следующий экран -

Давайте теперь внесем некоторые изменения, чтобы отобразить следующий контент -

“Welcome to Angular 4 project”

Мы внесли изменения в файлы - app.component.html и app.component.ts. Подробнее об этом мы поговорим в следующих главах.

Завершим настройку проекта. Если вы видите, что мы использовали порт 4200, это порт по умолчанию, который angular –cli использует при компиляции. Вы можете изменить порт, если хотите, используя следующую команду -

ng serve --host 0.0.0.0 –port 4205

В папке приложения Angular 4 есть следующие folder structure -

e2e- сквозная тестовая папка. В основном e2e используется для тестирования интеграции и помогает убедиться, что приложение работает нормально.
node_modules- Установлен пакет npm - node_modules. Вы можете открыть папку и увидеть доступные пакеты.
src - В этой папке мы будем работать над проектом с использованием Angular 4.

В папке приложения Angular 4 есть следующие file structure -

.angular-cli.json - Он в основном содержит название проекта, версию cli и т. Д.
.editorconfig - Это файл конфигурации для редактора.
.gitignore - Файл .gitignore должен быть зафиксирован в репозитории, чтобы правила игнорирования могли использоваться другими пользователями, которые клонируют репозиторий.
karma.conf.js- Используется для модульного тестирования с помощью транспортира. Вся необходимая для проекта информация находится в файле karma.conf.js.
package.json - Файл package.json сообщает, какие библиотеки будут установлены в node_modules при запуске npm install.

В настоящее время, если вы откроете файл в редакторе, вы добавите в него следующие модули.

"@angular/animations": "^4.0.0",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",

Если вам нужно добавить больше библиотек, вы можете добавить их здесь и запустить команду установки npm.

protractor.conf.js - Это конфигурация тестирования, необходимая для приложения.
tsconfig.json - Это в основном содержит параметры компилятора, необходимые во время компиляции.
tslint.json - Это файл конфигурации с правилами, которые необходимо учитывать при компиляции.

В src folder это основная папка, которая internally has a different file structure.

приложение

Он содержит файлы, описанные ниже. Эти файлы по умолчанию устанавливаются с помощью angular-cli.

app.module.ts- Если вы откроете файл, вы увидите, что в коде есть ссылки на разные библиотеки, которые импортируются. Angular-cli использовал эти библиотеки по умолчанию для импорта - angular / core, platform-browser. Сами названия объясняют использование библиотек.

Они импортируются и сохраняются в таких переменных, как declarations, imports, providers, и bootstrap.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})

export class AppModule { }

declarations- В объявлениях хранится ссылка на компоненты. Appcomponent - это компонент по умолчанию, который создается каждый раз при запуске нового проекта. Мы узнаем о создании новых компонентов в другом разделе.

imports- Модули будут импортированы, как показано выше. В настоящее время BrowserModule является частью импорта, который импортируется из @ angular / platform-browser.

providers- Это будет ссылка на созданные сервисы. Об этой услуге мы поговорим в следующей главе.

bootstrap - Это ссылка на созданный компонент по умолчанию, то есть AppComponent.

app.component.css- Вы можете написать свою структуру css здесь. Прямо сейчас мы добавили цвет фона к div, как показано ниже.

.divdetails{
   background-color: #ccc;
}

app.component.html - В этом файле будет доступен html-код.

<!--The content below is only a placeholder and can be replaced.-->
<div class = "divdetails">
   <div style = "text-align:center">
      <h1>
         Welcome to {{title}}!
      </h1>
      <img width = "300" src = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNv
      ZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFe
      HBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4
      xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaH
      R0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAg
      MjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2
      ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0M
      zMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdD
      AiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMj
      MwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbn
      RzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMj
      AzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMU
      w2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMj
      UsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLD
      EzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=">
   </div>
   <h2>Here are some links to help you start: </h2>
   <ul>
      <li>
         <h2>
            <a target = "_blank" href="https://angular.io/tutorial">Tour of Heroes</a>
         </h2>
      </li>
      <li>
         <h2>
            <a target = "_blank" href = "https://github.com/angular/angular-cli/wiki">
               CLI Documentation
            </a>
         </h2>
      </li>
      <li>
         <h2>
            <a target="_blank" href="http://angularjs.blogspot.ca/">Angular blog</a>
         </h2>
      </li>
   </ul>
</div>

Это HTML-код по умолчанию, доступный в настоящее время при создании проекта.

app.component.spec.ts - Это автоматически сгенерированные файлы, которые содержат модульные тесты для исходного компонента.
app.component.ts- Здесь определяется класс компонента. Вы можете выполнить обработку структуры html в файле .ts. Обработка будет включать такие действия, как подключение к базе данных, взаимодействие с другими компонентами, маршрутизация, службы и т. Д.

Структура файла следующая -

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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'app';
}

Активы

Вы можете сохранять свои изображения, файлы js в этой папке.

Окружающая обстановка

Эта папка содержит сведения о производственной среде или среде разработки. В папке находятся два файла.

environment.prod.ts
environment.ts

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

Дополнительная файловая структура папки приложения Angular 4 включает следующее:

favicon.ico

Это файл, который обычно находится в корневом каталоге веб-сайта.

index.html

Это файл, который отображается в браузере.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>HTTP Search Param</title>
      <base href = "/">
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <link href = "https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono" rel="stylesheet">
      <link href = "styles.c7c7b8bf22964ff954d3.bundle.css" rel="stylesheet">
      <meta name = "viewport" content="width=device-width, initial-scale=1">
      <link rel = "icon" type="image/x-icon" href="favicon.ico">
   </head>
   
   <body>
      <app-root></app-root>
   </body>
</html>

В теле есть <app-root></app-root>. Это селектор, который используется вapp.component.ts файл и отобразит детали из файла app.component.html.

main.ts

main.ts - это файл, с которого мы начинаем разработку нашего проекта. Все начинается с импорта необходимого нам базового модуля. Прямо сейчас, если вы видите angular / core, angular / platform-browser-dynamic, app.module и среда импортируются по умолчанию во время установки angular-cli и настройки проекта.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
   enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);

В platformBrowserDynamic().bootstrapModule(AppModule) имеет ссылку на родительский модуль AppModule. Следовательно, когда он выполняется в браузере, вызывается файл index.html. Index.html внутренне ссылается на main.ts, который вызывает родительский модуль, то есть AppModule, когда выполняется следующий код:

platformBrowserDynamic().bootstrapModule(AppModule);

Когда вызывается AppModule, он вызывает app.module.ts, который далее вызывает AppComponent на основе ускорения следующим образом:

bootstrap: [AppComponent]

В app.component.ts есть selector: app-rootкоторый используется в файле index.html. Это отобразит содержимое, представленное в app.component.html.

В браузере будет отображаться следующее -

polyfill.ts

В основном это используется для обратной совместимости.

styles.css

Это файл стиля, необходимый для проекта.

test.ts

Здесь будут обрабатываться модульные тесты для тестирования проекта.

tsconfig.app.json

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

tsconfig.spec.json

Это помогает сохранить детали для тестирования.

typings.d.ts

Он используется для управления определением TypeScript.

Окончательная структура файла выглядит следующим образом -

Основная часть разработки Angular 4 выполняется в компонентах. Компоненты - это в основном классы, которые взаимодействуют с файлом .html компонента, который отображается в браузере. Мы видели файловую структуру в одной из наших предыдущих глав. В файловой структуре есть компонент приложения, и он состоит из следующих файлов:

app.component.css
app.component.html
app.component.spec.ts
app.component.ts
app.module.ts

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

Если вы откроете app.module.ts файл, в нем есть некоторые библиотеки, которые импортируются, а также декларатив, которому назначается компонент приложения следующим образом:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})

export class AppModule { }

Объявления включают переменную AppComponent, которую мы уже импортировали. Это становится родительским компонентом.

Теперь в angular-cli есть команда для создания вашего собственного компонента. Однако компонент приложения, который создается по умолчанию, всегда остается родительским, а следующие созданные компоненты будут формировать дочерние компоненты.

Давайте теперь запустим команду для создания компонента.

ng g component new-cmp

Когда вы запустите указанную выше команду в командной строке, вы получите следующий вывод:

C:\projectA4\Angular 4-app>ng g component new-cmp
installing component
   create src\app\new-cmp\new-cmp.component.css
   create src\app\new-cmp\new-cmp.component.html
   create src\app\new-cmp\new-cmp.component.spec.ts
   create src\app\new-cmp\new-cmp.component.ts
   update src\app\app.module.ts

Теперь, если мы пойдем и проверим файловую структуру, мы получим новую папку new-cmp, созданную в папке src / app.

В папке new-cmp создаются следующие файлы -

new-cmp.component.css - создается файл css для нового компонента.
new-cmp.component.html - создается файл html.
new-cmp.component.spec.ts - может использоваться для модульного тестирования.
new-cmp.component.ts - здесь мы можем определить модуль, свойства и т. д.

Изменения добавляются в файл app.module.ts следующим образом:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
// includes the new-cmp component we created

@NgModule({
   declarations: [
      AppComponent,
      NewCmpComponent // here it is added in declarations and will behave as a child component
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent] //for bootstrap the AppComponent the main app component is given.
})

export class AppModule { }

В new-cmp.component.ts файл создается следующим образом -

import { Component, OnInit } from '@angular/core'; // here angular/core is imported .

@Component({
   // this is a declarator which starts with @ sign. The component word marked in bold needs to be the same.
   selector: 'app-new-cmp', //
   templateUrl: './new-cmp.component.html', 
   // reference to the html file created in the new component.
   styleUrls: ['./new-cmp.component.css'] // reference to the style file.
})

export class NewCmpComponent implements OnInit {
   constructor() { }
   ngOnInit() {}
}

Если вы видите указанный выше файл new-cmp.component.ts, он создает новый класс с именем NewCmpComponent, который реализует OnInit.In, который имеет конструктор и метод с именем ngOnInit (). ngOnInit вызывается по умолчанию при выполнении класса.

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

Когда мы нажимаем URL-адрес в http://localhost:4200/ браузер, он сначала выполняет файл index.html, который показан ниже -

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>Angular 4App</title>
      <base href = "/">
      <meta name="viewport" content="width = device-width, initial-scale = 1">
      <link rel = "icon" type = "image/x-icon" href = "favicon.ico">
   </head>
   
   <body>
      <app-root></app-root>
   </body>
</html>

Это обычный html-файл, и мы не видим ничего, что печатается в браузере. Взгляните на тег в разделе тела.

<app-root></app-root>

Это корневой тег, созданный Angular по умолчанию. Этот тег имеет ссылку вmain.ts файл.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
   enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

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

Давайте теперь посмотрим app.module.ts файл -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';

@NgModule({
   declarations: [
      AppComponent,
      NewCmpComponent
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})

export class AppModule { }

Здесь AppComponent - это заданное имя, т. Е. Переменная для хранения ссылки на app. Component.tsи то же самое относится к бутстрапу. Давайте теперь посмотримapp.component.ts файл.

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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
}

Угловое ядро импортируется и упоминается как Компонент, и то же самое используется в Деклараторе как -

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

В деклараторе ссылка на селектор, templateUrl и styleUrlдано. Селектор здесь не что иное, как тег, который помещен в файл index.html, который мы видели выше.

У класса AppComponent есть переменная с названием title, которая отображается в браузере.

В @Component использует templateUrl под названием app.component.html, который выглядит следующим образом:

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

В нем только html-код и название переменной в фигурных скобках. Он заменяется значением, которое присутствует вapp.component.tsфайл. Это называется привязкой. Мы обсудим концепцию привязки в следующей главе.

Теперь, когда мы создали новый компонент под названием new-cmp. То же самое входит вapp.module.ts файл, когда запускается команда для создания нового компонента.

app.module.ts имеет ссылку на созданный новый компонент.

Давайте теперь проверим новые файлы, созданные в new-cmp.

new-cmp.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.component.html',
   styleUrls: ['./new-cmp.component.css']
})

export class NewCmpComponent implements OnInit {
   constructor() { }
   ngOnInit() {}
}

Здесь мы также должны импортировать ядро. Ссылка на компонент используется в деклараторе.

У декларатора есть селектор, называемый app-new-cmp и templateUrl и styleUrl.

.Html называется new-cmp.component.html выглядит следующим образом -

<p>
   new-cmp works!
</p>

Как видно выше, у нас есть html-код, то есть тег p. Файл стилей пуст, так как в настоящее время нам не нужны стили. Но когда мы запускаем проект, мы не видим ничего, связанного с отображением нового компонента в браузере. Давайте теперь что-то добавим, и то же самое можно будет увидеть в браузере позже.

Селектор, т. Е. app-new-cmp необходимо добавить в app.component .html файл следующим образом -

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

<app-new-cmp></app-new-cmp>

Когда <app-new-cmp></app-new-cmp> добавлен тег, все, что присутствует в файле .html созданного нового компонента, будет отображаться в браузере вместе с данными родительского компонента.

Давайте посмотрим new component .html файл и new-cmp.component.ts файл.

new-cmp.component.ts

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

@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.component.html',
   styleUrls: ['./new-cmp.component.css']
})

export class NewCmpComponent implements OnInit {
   newcomponent = "Entered in new component created";
   constructor() {}
   ngOnInit() { }
}

В класс мы добавили одну переменную, названную новым компонентом, и ее значение - «Entered in new component created».

Вышеупомянутая переменная привязана к .new-cmp.component.html файл следующим образом -

<p>
   {{newcomponent}}
</p>

<p>
   new-cmp works!
</p>

Теперь, когда мы включили <app-new-cmp></app-new-cmp> селектор в app. component .html который является .html родительского компонента, содержимое, присутствующее в файле .html нового компонента (new-cmp.component.html), отображается в браузере следующим образом:

Точно так же мы можем создавать компоненты и связывать их с помощью селектора в app.component.html файл в соответствии с нашими требованиями.

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

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

Чтобы определить модуль, мы можем использовать NgModule. Когда вы создаете новый проект с помощью команды Angular –cli, модуль ngmodule по умолчанию создается в файле app.module.ts и выглядит следующим образом:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})

export class AppModule { }

NgModule необходимо импортировать следующим образом:

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

Структура модуля ngmodule показана ниже -

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})

Это начинается с @NgModule и содержит объект, у которого есть объявления, импорт, поставщики и начальная загрузка.

Декларация

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

declarations: [
   AppComponent,
   NewCmpComponent
]

импорт

Это набор модулей, необходимых для использования в приложении. Он также может использоваться компонентами в массиве объявлений. Например, прямо сейчас в @NgModule мы видим импортированный модуль браузера. Если вашему приложению нужны формы, вы можете включить модуль следующим образом:

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

Импорт в @NgModule будет как следующее -

imports: [
   BrowserModule,
   FormsModule
]

Провайдеры

Это будет включать созданные службы.

Бутстрап

Сюда входит основной компонент приложения для запуска выполнения.

Связывание данных доступно прямо из AngularJS, Angular 2 и теперь доступно и в Angular 4. Для привязки данных мы используем фигурные скобки - {{}}; этот процесс называется интерполяцией. Мы уже видели в наших предыдущих примерах, как мы объявляли значение переменной title, и то же самое печатается в браузере.

Переменная в app.component.html файл называется {{title}}, а значение заголовка инициализируется в app.component.ts файл и в app.component.html, значение отображается.

Давайте теперь создадим в браузере выпадающий список месяцев. Для этого мы создали массив месяцев вapp.component.ts следующим образом -

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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 4 Project!';
   // declared array of months.
   months = ["January", "Feburary", "March", "April", "May", 
            "June", "July", "August", "September",
            "October", "November", "December"];
}

Массив месяца, показанный выше, должен отображаться в раскрывающемся списке браузера. Для этого мы будем использовать следующую строку кода -

<!--The content below is only a placeholder and can be replaced. -->
<div style="text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

<div> Months :
   <select>
      <option *ngFor="let i of months">{{i}}</option>
   </select>
</div>

Мы создали обычный тег выбора с параметром option. В качестве опции мы использовалиfor loop. Вfor loop используется для перебора массива месяцев, который, в свою очередь, создает тег option со значением, представленным в месяцах.

Синтаксис for в Angular есть *ngFor = “let I of months” и чтобы получить значение месяцев, мы отображаем его в {{i}}.

Две фигурные скобки помогают при привязке данных. Вы объявляете переменные в своемapp.component.ts файл и то же будет заменено фигурными скобками.

Давайте посмотрим, что выводит указанный выше массив за месяц в браузере.

Переменная, установленная в app.component.ts можно связать с app.component.htmlс помощью фигурных скобок; например,{{}}.

Давайте теперь отображаем данные в браузере на основе условия. Здесь мы добавили переменную и присвоили ей значение true. Используя оператор if, мы можем скрыть / показать отображаемый контент.

пример

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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
   //array of months.
   months = ["January", "February", "March", "April",
            "May", "June", "July", "August", "September",
            "October", "November", "December"];
   isavailable = true;   //variable is set to true
}

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

<div> Months :
   <select>
      <option *ngFor = "let i of months">{{i}}</option>
   </select>
</div>
<br/>

<div>
   <span *ngIf = "isavailable">Condition is valid.</span> 
   //over here based on if condition the text condition is valid is displayed. 
   If the value of isavailable is set to false it will not display the text.
</div>

Вывод

Давайте попробуем приведенный выше пример, используя IF THEN ELSE состояние.

пример

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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
   //array of months.
   months = ["January", "February", "March", "April",
            "May", "June", "July", "August", "September",
            "October", "November", "December"];
   isavailable = false;
}

В этом случае мы сделали isavailableпеременная как ложная. Чтобы распечататьelse условие, нам нужно будет создать ng-template следующим образом -

<ng-template #condition1>Condition is invalid</ng-template>

Полный код выглядит так -

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

<div> Months :
   <select>
      <option *ngFor="let i of months">{{i}}</option>
   </select>
</div>
<br/>

<div>
   <span *ngIf="isavailable; else condition1">Condition is valid.</span>
   <ng-template #condition1>Condition is invalid</ng-template>
</div>

If используется с условием else, а используемая переменная - condition1. То же присваивается какid к ng-template, а когда для доступной переменной установлено значение false, текст Condition is invalid отображается.

На следующем снимке экрана показано отображение в браузере.

Давайте теперь воспользуемся if then else состояние.

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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
   //array of months.
   months = ["January", "February", "March", "April",
            "May", "June", "July", "August", "September",
            "October", "November", "December"];
   isavailable = true;
}

Теперь сделаем переменную isavailableкак правда. В html условие записывается следующим образом -

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
   <h1>
   Welcome to {{title}}.
   </h1>
</div>

<div> Months :
   <select>
      <option *ngFor="let i of months">{{i}}</option>
   </select>
</div>
<br/>

<div>
   <span *ngIf="isavailable; then condition1 else condition2">Condition is valid.</span>
   <ng-template #condition1>Condition is valid</ng-template>
   <ng-template #condition2>Condition is invalid</ng-template>
</div>

Если переменная истинна, то condition1, иначе condition2. Теперь два шаблона созданы с идентификатором#condition1 и #condition2.

Дисплей в браузере выглядит следующим образом -

В этой главе мы обсудим, как привязка событий работает в Angular 4. Когда пользователь взаимодействует с приложением в виде движения клавиатуры, щелчка мыши или наведения курсора мыши, он генерирует событие. Эти события необходимо обработать, чтобы выполнить какое-либо действие. Здесь на сцену выходит привязка событий.

Давайте рассмотрим пример, чтобы лучше понять это.

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

<div> Months :
   <select>
      <option *ngFor = "let i of months">{{i}}</option>
   </select>
</div>
<br/>

<div>
   <span *ngIf = "isavailable; then condition1 else condition2">
      Condition is valid.
   </span>
   <ng-template #condition1>Condition is valid</ng-template>
   <ng-template #condition2>Condition is invalid</ng-template>
</div>
<button (click)="myClickFunction($event)">
   Click Me
</button>

в app.component.html В файле мы определили кнопку и добавили к ней функцию, использующую событие щелчка.

Ниже приведен синтаксис для определения кнопки и добавления к ней функции.

(click)="myClickFunction($event)"

Функция определена в .ts файл: app.component.ts

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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
   //array of months.
   months = ["January", "Feburary", "March", "April",
      "May", "June", "July", "August", "September",
      "October", "November", "December"];
   isavailable = true;
   myClickFunction(event) { 
      //just added console.log which will display the event details in browser on click of the button.
      alert("Button is clicked");
      console.log(event);
   }
}

При нажатии на кнопку управление перейдет к функции myClickFunction и появится диалоговое окно, в котором отображается the Button is clicked как показано на следующем снимке экрана -

Давайте теперь добавим событие изменения в раскрывающийся список.

Следующая строка кода поможет вам добавить событие изменения в раскрывающийся список -

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

<div> Months :
   <select (change) = "changemonths($event)">
      <option *ngFor = "let i of months">{{i}}</option>
   </select>
</div>
<br/>

<div>
   <span *ngIf = "isavailable; then condition1 else condition2">
      Condition is valid.
   </span>
   <ng-template #condition1>Condition is valid</ng-template>
   <ng-template #condition2>Condition is invalid</ng-template>
</div>

<button (click) = "myClickFunction($event)">Click Me</button>

Функция объявлена в app.component.ts файл -

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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
   //array of months.
   months = ["January", "Feburary", "March", "April",
      "May", "June", "July", "August", "September",
      "October", "November", "December"];
   isavailable = true;
   myClickFunction(event) {
      alert("Button is clicked");
      console.log(event);
   }
   changemonths(event) {
      console.log("Changed month from the Dropdown");
      console.log(event);
   }
}

Консольное сообщение «Changed month from the Dropdown”Отображается в консоли вместе с событием.

Давайте добавим предупреждающее сообщение в app.component.ts когда значение из раскрывающегося списка изменяется, как показано ниже -

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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
   //array of months.
   months = ["January", "February", "March", "April",
         "May", "June", "July", "August", "September",
         "October", "November", "December"];
   
   isavailable = true;
   myClickFunction(event) { 
      //just added console.log which will display the event details in browser 
      on click of the button.
      alert("Button is clicked");
      console.log(event);
   }
   changemonths(event) {
      alert("Changed month from the Dropdown");
   }
}

Когда значение в раскрывающемся списке изменяется, появляется диалоговое окно и отображается следующее сообщение - «Changed month from the Dropdown».

Angular 4 использует <ng-template> как тег вместо <template>который используется в Angular2. Причина изменения Angular 4<template> к <ng-template> потому что существует конфликт имен между <template> тег и HTML <template>стандартный тег. Он полностью устарел. Это одно из основных изменений в Angular 4.

Давайте теперь использовать шаблон вместе с if else состояние и посмотреть результат.

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

<div> Months :
   <select (change) = "changemonths($event)" name = "month">
      <option *ngFor = "let i of months">{{i}}</option>
   </select>
</div>
<br/>

<div>
   <span *ngIf = "isavailable;then condition1 else condition2">Condition is valid.</span>
   <ng-template #condition1>Condition is valid from template</ng-template>
   <ng-template #condition2>Condition is invalid from template</ng-template>
</div>
<button (click) = "myClickFunction($event)">Click Me</button>

Для тега Span мы добавили if заявление с else condition и вызовет шаблон condition1, else condition2.

Шаблоны должны называться следующим образом -

<ng-template #condition1>Condition is valid from template</ng-template>
<ng-template #condition2>Condition is invalid from template</ng-template>

Если условие истинно, то вызывается шаблон condition1, иначе condition2.

app.component.ts

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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 4 Project!';
   //array of months.
   months = ["January", "February", "March", "April",
            "May", "June", "July", "August", "September",
            "October", "November", "December"];
   isavailable = false;
   myClickFunction(event) {
      this.isavailable = false;
   }
   changemonths(event) {
      alert("Changed month from the Dropdown");
      console.log(event);
   }
}

Вывод в браузере выглядит следующим образом -

Переменная isavailableложно, поэтому печатается шаблон condition2. Если вы нажмете кнопку, будет вызван соответствующий шаблон. Если вы проверите браузер, вы увидите, что вы никогда не получите тег span в dom. Следующий пример поможет вам понять то же самое.

Если вы проверите браузер, вы увидите, что у dom нет тега span. Он имеетCondition is invalid from template в дом.

Следующая строка кода в html поможет нам получить тег span в dom.

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

<div> Months :
   <select (change) = "changemonths($event)" name = "month">
      <option *ngFor = "let i of months">{{i}}</option>
   </select>
</div>
<br/>

<div>
   <span *ngIf = "isavailable; else condition2">Condition is valid.</span>
   <ng-template #condition1>Condition is valid from template</ng-template>
   <ng-template #condition2>Condition is invalid from template</ng-template>
</div>

<button (click)="myClickFunction($event)">Click Me</button>

Если мы удалим условие then, мы получим “Condition is valid”сообщение в браузере, а тег span также доступен в dom. Например, вapp.component.ts, мы сделали isavailable переменная как истина.

Directives в Angular это js класс, который объявлен как @directive. У нас есть 3 директивы в Angular. Директивы перечислены ниже -

Компонентные директивы

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

Структурные директивы

Директива структуры в основном занимается манипулированием элементами dom. Структурные директивы имеют знак * перед директивой. Например,*ngIf и *ngFor.

Директивы атрибутов

Директивы атрибутов имеют дело с изменением внешнего вида и поведения элемента dom. Вы можете создавать свои собственные директивы, как показано ниже.

Как создавать собственные директивы?

В этом разделе мы обсудим настраиваемые директивы, которые будут использоваться в компонентах. Пользовательские директивы создаются нами и не являются стандартными.

Давайте посмотрим, как создать настраиваемую директиву. Мы создадим директиву с помощью командной строки. Команда для создания директивы с использованием командной строки -

ng g directive nameofthedirective

e.g

ng g directive changeText

Вот как это отображается в командной строке

C:\projectA4\Angular 4-app>ng g directive changeText
installing directive
   create src\app\change-text.directive.spec.ts
   create src\app\change-text.directive.ts
   update src\app\app.module.ts

Вышеупомянутые файлы, т. Е. change-text.directive.spec.ts и change-text.directive.ts создать и app.module.ts файл обновлен.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';

@NgModule({
   declarations: [
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],

   imports: [
      BrowserModule
   ],

   providers: [],
   bootstrap: [AppComponent]
})

export class AppModule { }

В ChangeTextDirectiveclass включен в объявления в приведенном выше файле. Класс также импортируется из файла, приведенного ниже.

изменить текст. директива

import { Directive } from '@angular/core';
@Directive({
   selector: '[changeText]'
})

export class ChangeTextDirective {
   constructor() { }
}

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

в app.component.html view, давайте добавим следующую директиву -

<div style="text-align:center">
   <span changeText >Welcome to {{title}}.</span>
</div>

Запишем изменения в change-text.directive.ts файл следующим образом -

change-text.directive.ts

import { Directive, ElementRef} from '@angular/core';
@Directive({
   selector: '[changeText]'
})

export class ChangeTextDirective {
   constructor(Element: ElementRef) {
      console.log(Element);
      Element.nativeElement.innerText="Text is changed by changeText Directive. ";
   }
}

В приведенном выше файле есть класс с именем ChangeTextDirective и конструктор, который принимает элемент типа ElementRef, что обязательно. В элементе есть все детали, к которымChange Text применяется директива.

Мы добавили console.logэлемент. Результат этого же можно увидеть в консоли браузера. Текст элемента также изменится, как показано выше.

Теперь браузер покажет следующее.

В этой главе мы обсудим, что такое каналы в Angular 4. Каналы ранее назывались фильтрами в Angular1 и трубами в Angular 2 и 4.

| символ используется для преобразования данных. Ниже приводится синтаксис того же

{{ Welcome to Angular 4 | lowercase}}

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

Рассмотрим несколько примеров использования труб.

Здесь мы хотим вывести текст в верхнем регистре. Это можно сделать с помощью труб следующим образом -

в app.component.ts файла, мы определили переменную заголовка -

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
}

Следующая строка кода входит в app.component.html файл.

<b>{{title | uppercase}}</b><br/>
<b>{{title | lowercase}}</b>

Браузер выглядит, как показано на следующем снимке экрана -

В Angular 4 есть несколько встроенных труб. Трубы перечислены ниже -

Lowercasepipe
Uppercasepipe
Datepipe
Currencypipe
Jsonpipe
Percentpipe
Decimalpipe
Slicepipe

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

Следующая строка кода поможет нам определить необходимые переменные в app.component.ts файл -

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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate = new Date();
   jsonval = {name:'Rox', age:'25', address:{a1:'Mumbai', a2:'Karnataka'}};
   months = ["Jan", "Feb", "Mar", "April", "May", "Jun",
             "July", "Aug", "Sept", "Oct", "Nov", "Dec"];
}

Мы будем использовать трубы в app.component.html файл.

<!--The content below is only a placeholder and can be replaced.-->
<div style = "width:100%;">
   <div style = "width:40%;float:left;border:solid 1px black;">
      <h1>Uppercase Pipe</h1>
      <b>{{title | uppercase}}</b><br/>
      
      <h1>Lowercase Pipe</h1>
      <b>{{title | lowercase}}</b>
      
      <h1>Currency Pipe</h1>
      <b>{{6589.23 | currency:"USD"}}</b><br/>
      <b>{{6589.23 | currency:"USD":true}}</b> //Boolean true is used to get the sign of the currency.
      
      <h1>Date pipe</h1>
      <b>{{todaydate | date:'d/M/y'}}</b><br/>
      <b>{{todaydate | date:'shortTime'}}</b>
      
      <h1>Decimal Pipe</h1>
      <b>{{ 454.78787814 | number: '3.4-4' }}</b> // 3 is for main integer, 4 -4 are for integers to be displayed.
   </div>
   
   <div style = "width:40%;float:left;border:solid 1px black;">
      <h1>Json Pipe</h1>
      <b>{{ jsonval | json }}</b>
      <h1>Percent Pipe</h1>
      <b>{{00.54565 | percent}}</b>
      <h1>Slice Pipe</h1>
      <b>{{months | slice:2:6}}</b> 
      // here 2 and 6 refers to the start and the end index
   </div>
</div>

На следующих снимках экрана показан результат для каждой трубы -

Как создать собственную трубу?

Чтобы создать собственный канал, мы создали новый tsфайл. Здесь мы хотим создатьsqrtнестандартная труба. Мы дали файлу то же имя, и он выглядит следующим образом:

app.sqrt.ts

import {Pipe, PipeTransform} from '@angular/core';
@Pipe ({
   name : 'sqrt'
})
export class SqrtPipe implements PipeTransform {
   transform(val : number) : number {
      return Math.sqrt(val);
   }
}

Чтобы создать собственный канал, мы должны импортировать Pipe и Pipe Transform из Angular / core. В директиве @Pipe мы должны дать нашему каналу имя, которое будет использоваться в нашем .html файле. Поскольку мы создаем канал sqrt, мы назовем его sqrt.

По мере того, как мы идем дальше, мы должны создать класс с именем класса SqrtPipe. Этот класс будет реализовыватьPipeTransform.

Метод преобразования, определенный в классе, примет аргумент как число и вернет число после извлечения квадратного корня.

Поскольку мы создали новый файл, нам нужно добавить его в app.module.ts. Это делается следующим образом -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],

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

Мы создали app.sqrt.tsкласс. Мы должны импортировать то же самое вapp.module.tsи укажите путь к файлу. Он также должен быть включен в объявления, как показано выше.

Давайте теперь посмотрим на вызов канала sqrt в app.component.html файл.

<h1>Custom Pipe</h1>
<b>Square root of 25 is: {{25 | sqrt}}</b>
<br/>
<b>Square root of 729 is: {{729 | sqrt}}</b>

Результат выглядит следующим образом -

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

В основном родительском компоненте app.module.ts, теперь мы должны включить модуль маршрутизатора, как показано ниже -

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

import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule,
      RouterModule.forRoot([
         {
            path: 'new-cmp',
            component: NewCmpComponent
         }
      ])
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

импортировать {RouterModule} из '@ angular / router'

Здесь RouterModule импортируется из angular / router. Модуль включен в импорт, как показано ниже -

RouterModule.forRoot([
   {
      path: 'new-cmp',
      component: NewCmpComponent
   }
])

RouterModule относится к forRootкоторый принимает входные данные как массив, который, в свою очередь, имеет объект пути и компонент. Путь - это имя маршрутизатора, а компонент - это имя класса, т. Е. Созданного компонента.

Давайте теперь посмотрим файл, созданный компонентом -

New-cmp.component.ts

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

@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.component.html',
   styleUrls: ['./new-cmp.component.css']
})

export class NewCmpComponent implements OnInit {
   newcomponent = "Entered in new component created";
   constructor() {}
   ngOnInit() { }
}

Выделенный класс упоминается в импорте основного модуля.

New-cmp.component.html

<p>
   {{newcomponent}}
</p>

<p>
   new-cmp works!
</p>

Теперь нам нужно, чтобы вышеуказанный контент из html-файла отображался всякий раз, когда это необходимо или при нажатии из основного модуля. Для этого нам нужно добавить детали роутера вapp.component.html.

<h1>Custom Pipe</h1>
<b>Square root of 25 is: {{25 | sqrt}}</b><br/>
<b>Square root of 729 is: {{729 | sqrt}}</b>

<br />
<br />
<br />
<a routerLink = "new-cmp">New component</a>

<br />
<br/>
<router-outlet></router-outlet>

В приведенном выше коде мы создали тег ссылки привязки и задали routerLink как “new-cmp”. Об этом говорится вapp.module.ts как путь.

Когда пользователь нажимает new component, страница должна отображать содержимое. Для этого нам понадобится следующий тег -<router-outlet> </router-outlet>.

Вышеупомянутый тег гарантирует, что содержимое в new-cmp.component.html будет отображаться на странице, когда пользователь нажимает new component.

Давайте теперь посмотрим, как вывод отображается в браузере.

Когда пользователь щелкает «Новый компонент», вы увидите в браузере следующее.

URL-адрес содержит http://localhost:4200/new-cmp. Здесь new-cmp добавляется к исходному URL-адресу, который является путем, указанным вapp.module.ts и ссылка на маршрутизатор в app.component.html.

Когда пользователь нажимает «Новый компонент», страница не обновляется, и содержимое отображается пользователю без перезагрузки. При нажатии будет перезагружен только определенный фрагмент кода сайта. Эта функция помогает, когда на странице много контента, и его необходимо загружать в зависимости от взаимодействия с пользователем. Эта функция также обеспечивает хорошее взаимодействие с пользователем, поскольку страница не перезагружается.

В этой главе мы обсудим сервисы в Angular 4.

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

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

C:\projectA4\Angular 4-app>ng g service myservice
installing service
   create src\app\myservice.service.spec.ts
   create src\app\myservice.service.ts
   WARNING Service is generated but not provided, it must be provided to be used

   C:\projectA4\Angular 4-app>

Файлы создаются в папке приложения следующим образом:

Ниже приведены файлы, созданные внизу - myservice.service.specs.ts и myservice.service.ts.

myservice.service.ts

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

@Injectable()
export class MyserviceService {
   constructor() { }
}

Здесь модуль Injectable импортируется из @angular/core. Он содержит@Injectable метод и класс с именем MyserviceService. В этом классе мы создадим нашу служебную функцию.

Перед созданием новой службы нам нужно включить службу, созданную в основном родительском app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';
import { AppComponent } from './app.component';

import { MyserviceService } from './myservice.service';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule,
      RouterModule.forRoot([
         {
            path: 'new-cmp',
            component: NewCmpComponent
         }
      ])
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})

export class AppModule { }

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

В классе обслуживания мы создадим функцию, которая будет отображать сегодняшнюю дату. Мы можем использовать ту же функцию в основном родительском компонентеapp.component.ts а также в новом компоненте new-cmp.component.ts который мы создали в предыдущей главе.

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

import { Injectable } from '@angular/core';
@Injectable()
export class MyserviceService {
   constructor() { }
   showTodayDate() {
      let ndate = new Date();
      return ndate;
   }
}

В приведенном выше служебном файле мы создали функцию showTodayDate. Теперь мы вернем созданную дату (). Давайте посмотрим, как мы можем получить доступ к этой функции в классе компонентов.

app.component.ts

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate;
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
   }
}

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

Мы будем отображать дату в .html файл, как показано ниже -

{{todaydate}}
<app-new-cmp></app-new-cmp> 
// data to be displayed to user from the new component class.

Давайте теперь посмотрим, как использовать службу в новом созданном компоненте.

import { Component, OnInit } from '@angular/core';
import { MyserviceService } from './../myservice.service';

@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.component.html',
   styleUrls: ['./new-cmp.component.css']
})

export class NewCmpComponent implements OnInit {
   todaydate;
   newcomponent = "Entered in new component created";
   constructor(private myservice: MyserviceService) {}

   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
   }
}

В новом компоненте, который мы создали, нам нужно сначала импортировать сервис, который мы хотим, и получить доступ к его методам и свойствам. Пожалуйста, посмотрите выделенный код. Сегодняшняя дата отображается в компоненте html следующим образом:

<p>
   {{newcomponent}}
</p>
<p>
   Today's Date : {{todaydate}}
</p>

Селектор нового компонента используется в app.component.htmlфайл. Содержимое указанного выше html файла будет отображаться в браузере, как показано ниже -

Если вы измените свойство службы в каком-либо компоненте, то же самое изменится и в других компонентах. Давайте теперь посмотрим, как это работает.

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

В myservice.service.ts, мы создали свойство и использовали его в другом родительском и новом компоненте.

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

@Injectable()
export class MyserviceService {
   serviceproperty = "Service Created";
   constructor() { }
   showTodayDate() {
      let ndate = new Date();
      return ndate;
   }
}

Давайте теперь воспользуемся servicepropertyпеременная в других компонентах. Вapp.component.ts, мы получаем доступ к переменной следующим образом -

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate;
   componentproperty;
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
      console.log(this.myservice.serviceproperty);
      this.myservice.serviceproperty = "component created"; // value is changed.
      this.componentproperty = this.myservice.serviceproperty;
   }
}

Теперь мы извлечем переменную и поработаем с console.log. В следующей строке мы изменим значение переменной на «component created». Мы сделаем то же самое вnew-cmp.component.ts.

import { Component, OnInit } from '@angular/core';
import { MyserviceService } from './../myservice.service';

@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.component.html',
   styleUrls: ['./new-cmp.component.css']
})

export class NewCmpComponent implements OnInit {
   todaydate;
   newcomponentproperty;
   newcomponent = "Entered in newcomponent";
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
      this.newcomponentproperty = this.myservice.serviceproperty;
   }
}

В приведенном выше компоненте мы ничего не меняем, но напрямую присваиваем свойство свойству компонента.

Теперь, когда вы запускаете его в браузере, свойство службы будет изменено, так как его значение изменилось в app.component.ts и то же самое будет отображаться для new-cmp.component.ts.

Также проверьте значение в консоли перед его изменением.

Служба Http поможет нам получить внешние данные, публиковать их и т. Д. Нам нужно импортировать модуль http, чтобы использовать службу http. Давайте рассмотрим пример, чтобы понять, как использовать службу http.

Чтобы начать использовать службу http, нам нужно импортировать модуль в app.module.ts как показано ниже -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      HttpModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Если вы видите выделенный код, мы импортировали HttpModule из @ angular / http, и он также добавлен в массив импорта.

Давайте теперь воспользуемся службой http в app.component.ts.

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   constructor(private http: Http) { }
   ngOnInit() {
      this.http.get("http://jsonplaceholder.typicode.com/users").
      map((response) ⇒ response.json()).
      subscribe((data) ⇒ console.log(data))
   }
}

Давайте разберемся с кодом, выделенным выше. Нам нужно импортировать http, чтобы использовать службу, что делается следующим образом:

import { Http } from '@angular/http';

В классе AppComponent, создается конструктор и закрытая переменная http типа Http. Чтобы получить данные, нам нужно использоватьget API доступно с http следующим образом

this.http.get();

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

Мы будем использовать тестовый URL - https://jsonplaceholder.typicode.com/usersдля получения данных json. Две операции выполняются с полученной картой данных URL и подписываются. Метод Map помогает преобразовать данные в формат json. Чтобы использовать карту, нам нужно импортировать то же, что показано ниже -

import 'rxjs/add/operator/map';

Как только карта будет завершена, подписчик будет регистрировать вывод в консоли, как показано в браузере -

Если вы видите, объекты json отображаются в консоли. Объекты также могут отображаться в браузере.

Чтобы объекты отображались в браузере, обновите коды в app.component.html и app.component.ts следующим образом -

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   constructor(private http: Http) { }
   httpdata;
   ngOnInit() {
      this.http.get("http://jsonplaceholder.typicode.com/users").
      map(
         (response) ⇒ response.json()
      ).
      subscribe(
         (data) ⇒ {this.displaydata(data);}
      )
   }
   displaydata(data) {this.httpdata = data;}
}

В app.component.ts, используя метод подписки, мы вызовем метод отображения данных и передадим ему полученные данные в качестве параметра.

В методе отображения данных мы будем хранить данные в переменной httpdata. Данные отображаются в браузере с помощьюfor над этой переменной httpdata, что выполняется в app.component.html файл.

<ul *ngFor = "let data of httpdata">
   <li>Name : {{data.name}} Address: {{data.address.city}}</li>
</ul>

Объект json выглядит следующим образом -

{
   "id": 1,
   "name": "Leanne Graham",
   "username": "Bret",
   "email": "[email protected]",
   
   "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
         "lat": "-37.3159",
         "lng": "81.1496"
      }
   },
   
   "phone": "1-770-736-8031 x56442",
   "website": "hildegard.org",
   "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
   }
}

У объекта есть такие свойства, как идентификатор, имя, имя пользователя, электронная почта и адрес, внутри которых указаны улица, город и т. Д., А также другие данные, связанные с телефоном, веб-сайтом и компанией. Используяfor цикл, мы отобразим название и сведения о городе в браузере, как показано в app.component.html файл.

Вот как отображается дисплей в браузере -

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

Ниже приведены изменения, внесенные в app.component.html и app.component.ts файлы -

app.component.ts

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'app';
   searchparam = 2;
   jsondata;
   name;
   constructor(private http: Http) { }
   ngOnInit() {
      this.http.get("http://jsonplaceholder.typicode.com/users?id="+this.searchparam).
      map(
         (response) ⇒ response.json()
      ).
      subscribe((data) ⇒ this.converttoarray(data))
   }
   converttoarray(data) {
      console.log(data);
      this.name = data[0].name;
   }
}

Для get api, мы добавим параметр поиска id = this.searchparam. Параметр поиска равен 2. Нам нужны деталиid=2 из файла json.

app.component.html

{{name}}

Так отображается браузер -

Мы утешили данные в браузере, полученные от http. То же самое отображается в консоли браузера. Имя из json сid=2 отображается в браузере.

В этой главе мы увидим, как формы используются в Angular 4. Мы обсудим два способа работы с формами - формы на основе шаблонов и формы на основе моделей.

Форма на основе шаблона

В форме, управляемой шаблоном, большая часть работы выполняется в шаблоне; а с формой, управляемой моделью, большая часть работы выполняется в классе компонентов.

Давайте теперь рассмотрим работу над формой, управляемой шаблоном. Мы создадим простую форму входа и добавим идентификатор электронной почты, пароль и отправим кнопку в форму. Для начала нам нужно импортировать в FormsModule из@angular/core что делается в app.module.ts следующим образом -

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

import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

import { MyserviceService } from './myservice.service';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule,
      HttpModule,
      FormsModule,
      RouterModule.forRoot([
         {path: 'new-cmp',component: NewCmpComponent}
      ])
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})

export class AppModule { }

Так что в app.module.ts, мы импортировали FormsModule, и он был добавлен в массив импорта, как показано в выделенном коде.

Давайте теперь создадим нашу форму в app.component.html файл.

<form #userlogin = "ngForm" (ngSubmit) = "onClickSubmit(userlogin.value)" >
   <input type = "text" name = "emailid" placeholder = "emailid" ngModel>
   <br/>
   <input type = "password" name = "passwd" placeholder = "passwd" ngModel>
   <br/>
   <input type = "submit" value = "submit">
</form>

Мы создали простую форму с тегами ввода, содержащими идентификатор электронной почты, пароль и кнопку отправки. Мы присвоили ему тип, имя и заполнитель.

В формах, управляемых шаблонами, нам нужно создать элементы управления формы модели, добавив ngModel директива и nameатрибут. Таким образом, где бы мы ни хотели, чтобы Angular получал доступ к нашим данным из форм, добавьте к этому тегу ngModel, как показано выше. Теперь, если нам нужно прочитать emailid и passwd, нам нужно добавить к ним ngModel.

Если вы видите, мы также добавили ngForm в #userlogin. ВngFormдирективу необходимо добавить в созданный нами шаблон формы. Мы также добавили функциюonClickSubmit и назначил userlogin.value к нему.

Давайте теперь создадим функцию в app.component.ts и получить значения, введенные в форму.

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate;
   componentproperty;
   constructor(private myservice: MyserviceService) { }
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
   }
   onClickSubmit(data) {
      alert("Entered Email id : " + data.emailid);
   }
}

В приведенном выше app.component.tsфайла, мы определили функцию onClickSubmit. Когда вы нажимаете кнопку отправки формы, управление переходит к указанной выше функции.

Так отображается браузер -

Форма выглядит так, как показано ниже. Давайте введем в него данные, а в функции отправки уже введен идентификатор электронной почты.

Идентификатор электронной почты отображается внизу, как показано на скриншоте выше.

Модель управляемая форма

В форме, управляемой моделью, нам нужно импортировать ReactiveFormsModule из @ angular / forms и использовать его в массиве import.

Есть изменение, которое происходит в app.module.ts.

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

import { HttpModule } from '@angular/http';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

import { MyserviceService } from './myservice.service';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule,
      HttpModule,
      ReactiveFormsModule,
      RouterModule.forRoot([
         {
            path: 'new-cmp',
            component: NewCmpComponent
         }
      ])
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

В app.component.ts, нам нужно импортировать несколько модулей для формы, управляемой моделью. Например,import { FormGroup, FormControl } from '@angular/forms'.

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate;
   componentproperty;
   emailid;
   formdata;
   constructor(private myservice: MyserviceService) { }
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
      this.formdata = new FormGroup({
         emailid: new FormControl("[email protected]"),
         passwd: new FormControl("abcd1234")
      });
   }
   onClickSubmit(data) {this.emailid = data.emailid;}
}

Переменная formdata инициализируется в начале класса, и то же самое инициализируется с помощью FormGroup, как показано выше. Переменные emailid и passwd инициализируются значениями по умолчанию, которые будут отображаться в форме. Вы можете оставить его пустым, если хотите.

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

Мы использовали formdata для инициализации значений формы; нам нужно использовать то же самое в пользовательском интерфейсе формыapp.component.html.

<div>
   <form [formGroup]="formdata" (ngSubmit) = "onClickSubmit(formdata.value)" >
      <input type="text" class="fortextbox" name="emailid" placeholder="emailid" 
      formControlName="emailid">
      <br/>
      
      <input type="password" class="fortextbox" name="passwd" 
      placeholder="passwd" formControlName="passwd">
      <br/>
      
      <input type="submit" class="forsubmit" value="Log In">
   </form>
</div>
<p>
   Email entered is : {{emailid}}
</p>

В файле .html мы использовали formGroup в квадратных скобках для формы; например, [formGroup] = ”formdata”. При отправке функция вызываетсяonClickSubmit для которого formdata.value передается.

Входной тег formControlNameиспользуется. Ему дается значение, которое мы использовали вapp.component.ts файл.

При нажатии кнопки «Отправить» управление передается функции onClickSubmit, который определен в app.component.ts файл.

При нажатии кнопки «Войти» значение будет отображаться, как показано на скриншоте выше.

Проверка формы

Давайте теперь обсудим проверку формы с использованием формы, управляемой моделями. Вы можете использовать встроенную проверку формы или также использовать подход индивидуальной проверки. Мы будем использовать оба подхода в форме. Мы продолжим с того же примера, который мы создали в одном из наших предыдущих разделов. В Angular 4 нам нужно импортировать валидаторы из@angular/forms как показано ниже -

import { FormGroup, FormControl, Validators} from '@angular/forms'

Angular имеет встроенные валидаторы, такие как mandatory field, minlength, maxlength, и pattern. Доступ к ним можно получить с помощью модуля Validators.

Вы можете просто добавить валидаторы или массив валидаторов, необходимых для того, чтобы сообщить Angular, является ли определенное поле обязательным.

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

Required
Сопоставление с образцом

Вот как код проходит проверку в app.component.ts.

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate;
   componentproperty;
   emailid;
   formdata;
   ngOnInit() {
      this.formdata = new FormGroup({
         emailid: new FormControl("", Validators.compose([
            Validators.required,
            Validators.pattern("[^ @]*@[^ @]*")
         ])),
         passwd: new FormControl("")
      });
   }
   onClickSubmit(data) {this.emailid = data.emailid;}
}

В Validators.compose, вы можете добавить список вещей, которые вы хотите проверить, в поле ввода. Прямо сейчас мы добавилиrequired и pattern matching параметры, чтобы принимать только действующий адрес электронной почты.

в app.component.html, кнопка отправки неактивна, если какой-либо из входных данных формы недопустим. Это делается следующим образом -

<div>
   <form [formGroup] = "formdata" (ngSubmit) = "onClickSubmit(formdata.value)" >
      <input type = "text" class = "fortextbox" name = "emailid" placeholder = "emailid" 
         formControlName = "emailid">
      <br/>
      <input type = "password" class = "fortextbox" name = "passwd" 
         placeholder = "passwd" formControlName = "passwd">
      <br/>
      <input type = "submit" [disabled] = "!formdata.valid" class = "forsubmit" 
         value = "Log In">
   </form>
</div>

<p>
   Email entered is : {{emailid}}
</p>

Для кнопки отправки мы добавили отключение в квадратную скобку, которой присвоено значение - !formdata.valid. Таким образом, если formdata.valid недействителен, кнопка останется отключенной, и пользователь не сможет ее отправить.

Давайте посмотрим, как это работает в браузере -

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

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

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

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate;
   componentproperty;
   emailid;
   formdata;
   ngOnInit() {
      this.formdata = new FormGroup({
         emailid: new FormControl("", Validators.compose([
            Validators.required,
            Validators.pattern("[^ @]*@[^ @]*")
         ])),
         passwd: new FormControl("", this.passwordvalidation)
      });
   }
   passwordvalidation(formcontrol) {
      if (formcontrol.value.length <'; 5) {
         return {"passwd" : true};
      }
   }
   onClickSubmit(data) {this.emailid = data.emailid;}
}

В приведенном выше примере мы создали функцию password validation и то же самое используется в предыдущем разделе в formcontrol - passwd: new FormControl("", this.passwordvalidation).

В созданной нами функции мы проверим, соответствует ли длина введенных символов. Если символов меньше пяти, он вернется с паролем true, как показано выше -return {"passwd" : true};. Если символов больше пяти, это будет считаться действительным, и вход в систему будет включен.

Давайте теперь посмотрим, как это отображается в браузере -

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

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

Анимации добавляют много взаимодействия между элементами HTML. Анимация также была доступна с Angular2. Разница с Angular 4 в том, что анимация больше не является частью@angular/core библиотека, но это отдельный пакет, который необходимо импортировать в app.module.ts.

Для начала нам нужно импортировать библиотеку следующим образом:

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

В BrowserAnimationsModule необходимо добавить в массив импорта в app.module.ts как показано ниже -

app.module.ts

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

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

В app.component.html, мы добавили элементы html, которые нужно анимировать.

<div>
   <button (click)="animate()">Click Me</button>
   <div [@myanimation] = "state" class="rotate">
      <img src="assets/images/img.png" width="100" height="100">
   </div>
</div>

Для основного div мы добавили кнопку и div с изображением. Существует событие щелчка, для которого вызывается функция анимации. А для div@myanimation добавляется директива, которой присваивается значение как состояние.

Давайте теперь посмотрим app.component.ts где определяется анимация.

import { Component } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
   styles:[`
      div{
         margin: 0 auto;
         text-align: center;
         width:200px;
      }
      .rotate{
         width:100px;
         height:100px;
         border:solid 1px red;
      }
   `],
   animations: [
      trigger('myanimation',[
         state('smaller',style({
            transform : 'translateY(100px)'
         })),
         state('larger',style({
            transform : 'translateY(0px)'
         })),
         transition('smaller <=> larger',animate('300ms ease-in'))
      ])
   ]
})

export class AppComponent {
   state: string = "smaller";
   animate() {
      this.state= this.state == 'larger' ? 'smaller' : 'larger';
   }
}

Мы должны импортировать функцию анимации, которая будет использоваться в файле .ts, как показано выше.

import { trigger, state, style, transition, animate } from '@angular/animations';

Здесь мы импортировали триггер, состояние, стиль, переход и анимацию из @ angular / animations.

Теперь мы добавим свойство анимации в декоратор @Component () -

animations: [
   trigger('myanimation',[
      state('smaller',style({
         transform : 'translateY(100px)'
      })),
      state('larger',style({
         transform : 'translateY(0px)'
      })),
      transition('smaller <=> larger',animate('300ms ease-in'))
   ])
]

Триггер определяет начало анимации. Первый параметр - это имя анимации, передаваемое тегу html, к которому должна применяться анимация. Второй параметр - это импортированные нами функции - состояние, переход и т. Д.

В stateФункция включает в себя шаги анимации, между которыми будет переходить элемент. Прямо сейчас мы определили два состояния, меньшее и большее. Для штата меньшего размера мы дали стильtransform:translateY(100px) и transform:translateY(100px).

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

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

<div>
   <button (click)="animate()">Click Me</button>
   <div [@myanimation] = "state" class="rotate">
      <img src="assets/images/img.png" width="100" height="100">
   </div>
</div>

Свойство стиля добавлено в @componentдиректива, которая централизованно выравнивает div. Давайте рассмотрим следующий пример, чтобы понять то же самое -

styles:[`
   div{
      margin: 0 auto;
      text-align: center;
      width:200px;
   }
   .rotate{
      width:100px;
      height:100px;
      border:solid 1px red;
   }
`],

Здесь специальный символ [``] используется для добавления стилей к элементу html, если таковой имеется. Для div мы дали имя анимации, определенное в файле app.component.ts.

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

export class AppComponent {
   state: string = "smaller";
   animate() {
      this.state= this.state == ‘larger’? 'smaller' : 'larger';
   }
}

Переменная состояния определена и имеет меньшее значение по умолчанию. Функция анимации изменяет состояние при нажатии. Если состояние больше, оно будет преобразовано в меньшее; а если меньше, то конвертируется в большее.

Вот так вывод в браузере (http://localhost:4200/) будет выглядеть так -

При нажатии на Click Me кнопка, положение изображения изменяется, как показано на следующем снимке экрана -

Функция преобразования применяется в yнаправление, которое изменяется с 0 на 100 пикселей при нажатии кнопки Click Me. Изображение хранится вassets/images папка.

MaterialsПредлагаем множество встроенных модулей для вашего проекта. Такие функции, как автозаполнение, указатель даты, слайдер, меню, сетки и панель инструментов, доступны для использования с материалами в Angular 4.

Чтобы использовать материалы, нам нужно импортировать пакет. Angular 2 также имеет все вышеперечисленные функции, но они доступны как часть модуля @ angular / core. В Angular 4 появился отдельный модуль@angular/materials.. Это помогает пользователю импортировать необходимые материалы.

Чтобы начать использовать материалы, вам необходимо установить два пакета - материалы и cdk. Компоненты материала зависят от модуля анимации для расширенных функций, поэтому вам понадобится пакет анимации для того же, то есть @ angular / animations. Пакет уже был обновлен в предыдущей главе.

npm install --save @angular/material @angular/cdk

Давайте теперь посмотрим на package.json. @angular/material и @angular/cdk установлены.

{
   "name": "angularstart",
   "version": "0.0.0",
   "license": "MIT",
   "scripts": {
      "ng": "ng",
      "start": "ng serve",
      "build": "ng build",
      "test": "ng test",
      "lint": "ng lint",
      "e2e": "ng e2e"
   },
   
   "private": true,
   
   "dependencies": {
      "@angular/animations": "^4.0.0",
      "@angular/cdk": "^2.0.0-beta.8",
      "@angular/common": "^4.0.0",
      "@angular/compiler": "^4.0.0",
      "@angular/core": "^4.0.0",
      "@angular/forms": "^4.0.0",
      
      "@angular/http": "^4.0.0",
      "@angular/material": "^2.0.0-beta.8",
      "@angular/platform-browser": "^4.0.0",
      "@angular/platform-browser-dynamic": "^4.0.0",
      "@angular/router": "^4.0.0",
      "core-js": "^2.4.1",
      "rxjs": "^5.1.0",
      "zone.js": "^0.8.4"
   },
   
   "devDependencies": {
      "@angular/cli": "1.2.0",
      "@angular/compiler-cli": "^4.0.0",
      "@angular/language-service": "^4.0.0",
      "@types/jasmine": "~2.5.53",
      "@types/jasminewd2": "~2.0.2",
      "@types/node": "~6.0.60",
      "codelyzer": "~3.0.1",
      "jasmine-core": "~2.6.2",
      "jasmine-spec-reporter": "~4.1.0",
      
      "karma": "~1.7.0",
      "karma-chrome-launcher": "~2.1.1",
      "karma-cli": "~1.0.1",
      "karma-coverage-istanbul-reporter": "^1.2.1",
      "karma-jasmine": "~1.1.0",
      "karma-jasmine-html-reporter": "^0.2.2",
      
      "protractor": "~5.1.2",
      "ts-node": "~3.0.4",
      "tslint": "~5.3.2",
      "typescript": "~2.3.3"
   }
}

Мы выделили пакеты, которые устанавливаются для работы с материалами.

Теперь мы импортируем модули в родительский модуль - app.module.ts как показано ниже.

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

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MdButtonModule, MdMenuModule, MdSidenavModule } from '@angular/material';

import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MdButtonModule,
      MdMenuModule,
      FormsModule,
      MdSidenavModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

В приведенном выше файле мы импортировали следующие модули из @ angular / materials.

import { MdButtonModule, MdMenuModule, MdSidenavModule } from '@angular/material';

И то же самое используется в массиве импорта, как показано ниже -

imports: [
   BrowserModule,
   BrowserAnimationsModule,
   MdButtonModule,
   MdMenuModule,
   FormsModule,
   MdSidenavModule
]

В app.component.ts как показано ниже -

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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   myData: Array<any>;
   constructor() {}
}

Давайте теперь добавим материал в app.component.html.

<button md-button [mdMenuTriggerFor]="menu">Menu</button>
<md-menu #menu="mdMenu">
   <button md-menu-item>
      File
   </button>
   <button md-menu-item>
      Save As
   </button>
</md-menu>

<md-sidenav-container class="example-container">
   <md-sidenav #sidenav class="example-sidenav">
      Angular 4
   </md-sidenav>
      
   <div class="example-sidenav-content">
      <button type="button" md-button  (click)="sidenav.open()">
         Open sidenav
      </button>
   </div>
</md-sidenav-container>

В приведенном выше файле мы добавили меню и боковую навигацию.

Чтобы добавить меню, <md-menu></md-menu>используется. Вfile и Save As элементы добавляются на кнопку под md-menu. Добавлена главная кнопкаMenu. Ссылка на то же самое дается <md-menu> с помощью[mdMenuTriggerFor]=”menu” и используя меню с # in <md-menu>.

SideNav

Чтобы добавить sidenav, нам нужно <md-sidenav-container></md-sidenav-container>. <md-sidenav></md-sidenav>добавляется в контейнер как дочерний элемент. Добавлен еще один div, который запускает боковую навигацию с помощью(click)=”sidenav.open()”. Ниже приведено отображение меню и боковой навигации в браузере.

При нажатии opensidenav, он показывает боковую панель, как показано ниже -

При нажатии на меню вы получите два элемента File и Save As как показано ниже -

Давайте теперь добавим datepicker с использованием материалов. Чтобы добавить datepicker, нам нужно импортировать модули, необходимые для отображения datepicker.

В app.module.ts, мы импортировали следующий модуль для datepicker, как показано ниже.

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

import { MdDatepickerModule, MdInputModule, MdNativeDateModule } from '@angular/material';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      FormsModule,
      MdDatepickerModule,
      MdInputModule,
      MdNativeDateModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Здесь мы импортировали такие модули, как MdDatepickerModule, MdInputModule, и MdNativeDateModule.

Теперь app.component.ts как показано ниже -

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   myData: Array<any>;
   constructor() {}
}

В app.component.html как показано ниже -

<md-input-container>
   <input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
   <button mdSuffix [mdDatepickerToggle]="picker"></button>
</md-input-container>

<md-datepicker #picker></md-datepicker>

Вот как датапикер отображается в браузере -

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

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

npm install -g @angular/cli

Чтобы создать новый проект, мы можем запустить следующую команду в командной строке, и проект будет создан.

ng new PROJECT-NAME
cd PROJECT-NAME
ng serve //

ng serve // скомпилируется, и вы сможете увидеть результат своего проекта в браузере -

http://localhost:4200/

4200 - это порт по умолчанию, используемый при создании нового проекта. Вы можете изменить порт с помощью следующей команды -

ng serve --host 0.0.0.0 --port 4201

В следующей таблице перечислены несколько важных команд, необходимых при работе с проектами Angular 4.

Составная часть	ng g component новый компонент
Директива	директива ng g новая директива
Труба	нг труба новая труба
обслуживание	нг г сервис новый сервис
Модуль	ng g модуль мой модуль

Каждый раз, когда создается новый модуль, компонент или служба, ссылка на них обновляется в родительском модуле. app.module.ts.

В этой главе мы обсудим несколько примеров, связанных с Angular 4.

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

Компоненты создаются с помощью следующей команды -

Заголовок компонента ng g

C:\ngexamples\aexamples>ng g component header
installing component
   create src\app\header\header.component.css
   create src\app\header\header.component.html
   create src\app\header\header.component.spec.ts
   create src\app\header\header.component.ts
   update src\app\app.module.ts

нижний колонтитул компонента ng g

C:\ngexamples\aexamples>ng g component footer
installing component
   create src\app\footer\footer.component.css
   create src\app\footer\footer.component.html
   create src\app\footer\footer.component.spec.ts
   create src\app\footer\footer.component.ts
   update src\app\app.module.ts

компонент ng g userlogin

C:\ngexamples\aexamples>ng g component userlogin
installing component
   create src\app\userlogin\userlogin.component.css
   create src\app\userlogin\userlogin.component.html
   create src\app\userlogin\userlogin.component.spec.ts
   create src\app\userlogin\userlogin.component.ts
   update src\app\app.module.ts

главная страница компонента ng g

C:\ngexamples\aexamples>ng g component mainpage
installing component
   create src\app\mainpage\mainpage.component.css
   create src\app\mainpage\mainpage.component.html
   create src\app\mainpage\mainpage.component.spec.ts
   create src\app\mainpage\mainpage.component.ts
   update src\app\app.module.ts

в app.module.ts, в родительский модуль добавляются все компоненты при создании. Файл выглядит следующим образом -

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

import { RouterModule, Routes} froms '@angular/router';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MdTableModule} from '@angular/material';

import {HttpModule} from "@angular/http";
import {MdInputModule} from '@angular/material';
import { AppComponent } from './app.component';

import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { UserloginComponent } from './userlogin/userlogin.component';
import { MainpageComponent } from './mainpage/mainpage.component';

const appRoutes: Routes = [
   {
      path: '',
      component: UserloginComponent
   },
   {
      path: 'app-mainpage',
      component: MainpageComponent
   }
];

@NgModule({
   declarations: [
      AppComponent,
      HeaderComponent,
      FooterComponent,
      UserloginComponent,
      MainpageComponent
   ],
   
   imports: [
      BrowserModule,
      ReactiveFormsModule,
      RouterModule.forRoot(appRoutes),
      BrowserAnimationsModule,
      HttpModule,
      MdTableModule,
      MdInputModule
   ],
   
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Добавлены компоненты, созданные выше -

import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { UserloginComponent } from './userlogin/userlogin.component';
import { MainpageComponent } from './mainpage/mainpage.component';

Компоненты тоже добавлены в объявления -

declarations: [
   AppComponent,
   HeaderComponent,
   FooterComponent,
   UserloginComponent,
   MainpageComponent
],

В родительском app.component.html, мы добавили основную структуру файла, которую будет видеть пользователь.

<div class="mainpage">
   <app-header></app-header>
   <router-outlet></router-outlet>
   <app-footer></app-footer>
</div>

Мы создали div и добавили <app-header></app-header>, <router-outlet></router-outlet> и <app-footer></app-footer>.

В <router-outlet></router-outlet>используется для перехода с одной страницы на другую. Здесь страницы представляют собой форму входа в систему, и после ее успешного выполнения выполняется перенаправление на главную страницу, то есть форму клиента.

Чтобы сначала получить форму входа, а затем получить mainpage.component.html, изменения вносятся в app.module.ts как показано ниже -

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

import { RouterModule, Routes} from '@angular/router';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MdTableModule} from '@angular/material';

import {HttpModule} from "@angular/http";
import {MdInputModule} from '@angular/material';
import { AppComponent } from './app.component';

import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { UserloginComponent } from './userlogin/userlogin.component';
import { MainpageComponent } from './mainpage/mainpage.component';

const appRoutes: Routes = [
   {
      path: '',
      component: UserloginComponent
   },
   {
      path: 'app-mainpage',
      component: MainpageComponent
   }
];

@NgModule({
   declarations: [
      AppComponent,
      HeaderComponent,
      FooterComponent,
      UserloginComponent,
      MainpageComponent
   ],
   
   imports: [
      BrowserModule,
      ReactiveFormsModule,
      RouterModule.forRoot(appRoutes),
      BrowserAnimationsModule,
      HttpModule,
      MdTableModule,
      MdInputModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Мы импортировали RouterModule и Routes из @anuglar/router. При импорте RouterModules принимает appRoutes в качестве параметра, который определен выше как -

const appRoutes: Routes = [
   {
      path: '',
      component: UserloginComponent
   },
   {
      path: 'app-mainpage',
      component: MainpageComponent
   }
];

Маршруты принимают массив компонентов, и по умолчанию вызывается userloginComponent.

В userlogin.component.ts, мы импортировали маршрутизатор и перешли на mainpage.component.html в соответствии с условиями, как показано ниже -

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';
import { Router} from '@angular/router';

@Component({
   selector: 'app-userlogin',
   templateUrl: './userlogin.component.html',
   styleUrls: ['./userlogin.component.css']
})

export class UserloginComponent implements OnInit {
   formdata;
   constructor(private router: Router) { }
   ngOnInit() {
      this.formdata = new FormGroup({
         uname: new FormControl("", Validators.compose([
            Validators.required,
            Validators.minLength(6)
         ])),
         passwd: new FormControl("", this.passwordvalidation)
      });
   }
   
   passwordvalidation(formcontrol) {
      if (formcontrol.value.length < 5) {
         return {"passwd" : true};
      }
   }
   
   onClickSubmit(data) {
      console.log(data.uname);
      if (data.uname=="systemadmin" && data.passwd=="admin123") {
         alert("Login Successful");
         this.router.navigate(['app-mainpage'])
      } else {
         alert("Invalid Login");
         return false;
      }
   }
}

Ниже приведен файл .ts для app.component.ts. В нем присутствуют только детали по умолчанию.

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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {title = 'app';}

Теперь давайте отобразим детали каждого из файлов компонентов. Для начала мы возьмем компонент заголовка. Для нового компонента создано четыре файлаheader.component.ts, header.component.html, header.component.css, and header.component.spec.ts.

header.component.ts

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

@Component({
   selector: 'app-header',
   templateUrl: './header.component.html',
   styleUrls: ['./header.component.css']
})

export class HeaderComponent implements OnInit {
   constructor() { }
   ngOnInit() {}
}

header.component.html

<div>
   <hr />
</div>

Мы не добавляли CSS. Это делает файл header.component.css пустым. Так жеheader.compoent.spec.ts файл пуст, так как тестовые примеры здесь не рассматриваются.

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

Давайте теперь рассмотрим создание компонента нижнего колонтитула.

Для компонента нижнего колонтитула footer.component.ts, footer.component.html, footer.component.spec.ts and footer.component.css файлы созданы.

footer.component.ts

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

@Component({
   selector: 'app-footer',
   templateUrl: './footer.component.html',
   styleUrls: ['./footer.component.css']
})

export class FooterComponent implements OnInit {
   constructor() { }
   ngOnInit() { }
}

footer.component.html

<hr/>

Поскольку мы не добавляли CSS, footer.component.cssфайл пуст. Так жеfooter.compoent.spec.ts файл пуст, так как тестовые примеры здесь не рассматриваются.

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

Давайте теперь посмотрим, как работает компонент userlogin. Следующие файлы для созданного компонента userlogin:userlogin.component.css, userlogin.component.html, userlogin.component.ts, и userlogin.component.spec.ts.

Детали файлов следующие -

userlogin.component.html

<div class="form_container">
   <form [formGroup]="formdata" (ngSubmit) = "onClickSubmit(formdata.value)" >
      <header>Login</header>
      <label>Username <span>*</span></label>
      <input type="text" name="uname" formControlName="uname"/>
      
      <div class="help">At least 6 character</div>
      <label>Password <span>*</span></label>
      <input type="password" class="fortextbox" name="passwd" formControlName="passwd"/>
      
      <div class="help">Use upper and lowercase lettes as well</div>
      <button [disabled]="!formdata.valid" value="Login">Login</button>
   </form>
</div>

Здесь мы создали форму с двумя элементами управления вводом Username и Password. Это подход, основанный на моделях, и его подробности описаны в главе 14 - Формы.

Мы считаем имя пользователя и пароль обязательными, поэтому их проверка добавляется в ts. После нажатия кнопки отправки элемент управления передается вonClickSubmit, который определен в файле ts.

userlogin.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';
import { Router} from '@angular/router';

@Component({
   selector: 'app-userlogin',
   templateUrl: './userlogin.component.html',
   styleUrls: ['./userlogin.component.css']
})

export class UserloginComponent implements OnInit {
   formdata;
   constructor(private router: Router) { }
   ngOnInit() {
      this.formdata = new FormGroup({
         uname: new FormControl("", Validators.compose([
            Validators.required,
            Validators.minLength(6)
         ])),
         passwd: new FormControl("", this.passwordvalidation)
      });
   }
   passwordvalidation(formcontrol) {
      if (formcontrol.value.length < 5) {
         return {"passwd" : true};
      }
   }
   onClickSubmit(data) {
      console.log(data.uname);
      if (data.uname == "systemadmin" && data.passwd == "admin123") {
         alert("Login Successful");
         this.router.navigate(['app-mainpage'])
      }
   }
}

Для управления формой и проверки модули импортируются, как показано ниже.

import { FormGroup, FormControl, Validators} from '@angular/forms';

Нам нужен маршрутизатор для перехода к другому компоненту, когда пользователь и пароль верны. Для этого маршрутизатор импортируется, как показано ниже -

import { Router} from '@angular/router';

В ngOnInit, проверка формы выполнена. Нам нужно, чтобы имя пользователя было больше шести символов и поле обязательно для заполнения. То же самое относится и к паролю.

После нажатия кнопки "Отправить" мы можем проверить, является ли имя пользователя systemadmin и пароль admin123. Если да, появится диалоговое окно, в которомLogin Successful и маршрутизатор переходит на главную страницу приложения, которая является селектором компонента главной страницы.

Для формы добавлен css в userlogin.component.css файл -

.form_container{
   margin : 0 auto;
   width:600px;
}

form {
   background: white;
   width: 500px;
   box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.7);
   font-family: lato;
   position: relative;
   color: #333;
   border-radius: 10px;
}

form header {
   background: #FF3838;
   padding: 30px 20px;
   color: white;
   font-size: 1.2em;
   font-weight: 600;
   border-radius: 10px 10px 0 0;
}

form label {
   margin-left: 20px;
   display: inline-block;
   margin-top: 30px;
   margin-bottom: 5px;
   position: relative;
}

form label span {
   color: #FF3838;
   font-size: 2em;
   position: absolute;
   left: 2.3em;
   top: -10px;
}
form input {
   display: block;
   width: 50%;
   margin-left: 20px;
   padding: 5px 20px;
   font-size: 1em;
   border-radius: 3px;
   outline: none;
   border: 1px solid #ccc;
}

form .help {
   margin-left: 20px;
   font-size: 0.8em;
   color: #777;
}

form button {
   position: relative;
   margin-top: 30px;
   margin-bottom: 30px;
   left: 50%;
   transform: translate(-50%, 0);
   font-family: inherit;
   color: white;
   background: #FF3838;
   outline: none;
   border: none;
   padding: 5px 15px;
   font-size: 1.3em;
   font-weight: 400;
   border-radius: 3px;
   box-shadow: 0px 0px 10px rgba(51, 51, 51, 0.4);
   cursor: pointer;
   transition: all 0.15s ease-in-out;
}
form button:hover {
   background: #ff5252;
}

В userlogin.component.spec.ts файл пуст, так как сейчас нет тестовых примеров.

Давайте теперь обсудим, как работает компонент главной страницы. Файлы, созданные для компонента главной страницы:mainpage.component.ts, mainpage.component.html, mainpage.component.css, и mainpage.component.spect.ts.

mainpage.component.ts

import { Component, OnInit, ViewChild} from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';

import {Http, Response, Headers, RequestOptions } from "@angular/http";
import 'rxjs/add/operator/map';

@Component({
   selector: 'app-mainpage',
   templateUrl: './mainpage.component.html',
   styleUrls: ['./mainpage.component.css']
})

export class MainpageComponent implements OnInit {
   formdata;
   cutomerdata;
   constructor(private http: Http) { }
   stateCtrl: FormControl;
   ngOnInit() {
      this.formdata = new FormGroup({
         fname: new FormControl("", Validators.compose([
            Validators.required,
            Validators.minLength(3)
         ])),
         lname: new FormControl("", Validators.compose([
            Validators.required,
            Validators.minLength(3)
         ])),
         address:new FormControl(""),
         phoneno:new FormControl("")
      });
   }
   onClickSubmit(data) {
      document.getElementById("custtable").style.display="";
      this.cutomerdata = [];
      for (var prop in data) {
         this.cutomerdata.push(data[prop]);
      }
      console.log(this.cutomerdata);
   }
}

Мы создали форму клиента с именем, фамилией, адресом и номером телефона. Проверка того же выполняется с помощьюngOnInitфункция. После нажатия кнопки «Отправить» элемент управления переходит к функцииonClickSubmit. Здесь становится видимой таблица, которая используется для отображения введенных данных.

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

mainpage.component.html

<div class="form_container">
   <form [formGroup]="formdata" (ngSubmit) = "onClickSubmit(formdata.value)" >
      <header>Customer Details</header>
      <label>FirstName <span>*</span></label>
      <input type="text" name="fname" formControlName="fname"/>
      <label>LastName <span>*</span></label>
      
      <input type="text" name="lname" formControlName="lname"/>
      <label>Address <span></span></label>
      <input type="text" name="address" formControlName="address"/>
      <label>Phone No <span></span></label>
      <input type="text" name="phoneno" formControlName="phoneno"/>
      <button [disabled]="!formdata.valid" value="Submit">Submit</button>
   </form>
</div>
<br/>

<div id="custtable" style="display:none;margin:0 auto;">
   <table>
      <tr>
         <td>FirstName</td>
         <td>LastName</td>
         <td>Address</td>
         <td>Phone No</td>
      </tr>
      <tr>
         <td *ngFor="let data of cutomerdata">
            <h5>{{data}}</h5>
         </td>
      </tr>
   </table>
</div>

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

После ввода данных дисплей будет таким, как показано ниже.

После нажатия кнопки «Отправить» появляется диалоговое окно, в котором отображается сообщение «Вход в систему выполнен успешно».

Если данные недействительны, появляется диалоговое окно, в котором отображается недопустимый вход в систему, как показано ниже -

Если вход будет успешным, он перейдет к следующей форме сведений о клиенте, как показано ниже -

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