WEB start

Компьютеры. Интернет. Заочное профессиональное обучение. 055-966-10-17

Обучение

Широкий спектр программ и различных форм обучения

Возможность заочного, дистанционного обучения
  • Программирование. Современные языки и технологии.
  • Обслуживание персональных компьютеров.
  • Компьютерные сети. Защита информации.
  • Интернет. Планирование, создание WEB-сайтов. Дизайн, программирование. CEO, продвижение сайтов в интернет.
  • Основы современных IT - технологий.

Наши преимущества

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


Курсы WEB

Закончив наш курс, вы научитесь самостоятельно строить коммерческие интернет сайты любой сложности, управлять их размещением на WEB - хостинге, оптимизировать их и "продвигать" в Интернете.

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

hit 
counter

Узнать подробнее


Введите текст с картинки

Регистрация на сайте

Angular HttpClient - работа с HTTP запросами



Использование HttpClient


Angular HttpClient - класс, который предоставляет пользователям удобный интерфейс для работы с HTTP запросами, он базируется на использовании XMLHttpRequest объекта браузера - .

Для использования HttpClient API нужно импортировать модуль HttpClientModule (обычно - в app.module.ts):


import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { HttpClientModule } from '@angular/common/http'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, HttpClientModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }



После этого можно использовать HttpClient в классе Angular - приложений, импортируя HttpClient и подключая его через dependancy injection. Например, создав сервис, который будет отвечать за передачу данных но HTTP:


import { Injectable } from '@angular/core'; import { HttpClient} from '@angular/common/http'; @Injectable({ providedIn: 'root' }) export class Http1Service { constructor(private myHttp: HttpClient) { } }


Объект, созданный из HttpClient (в примере выше - myHttp), поддерживает методы:


  • get
  • post
  • put
  • delete
  • patch
  • head
  • jsonp


Для тестирования приложения Angular, которое работает с HttpClient можно использовать, например:

  • Angular модуль:  HttpClientTestingModule, 
  • специальные online сервисы, типа: http://jsonplaceholder.typicode.com/ , https://www.jsontest.com/, 
  • nodeJs (Angular in-memory web API: npm i angular-in-memory-web-api@0.5.3 --save ).
  • Или любой другой WEB server, который будет обрабатывать HTTP запросы.


    Простой пример - get()

    Простой пример использования метода get() Http клиента - файл на локальном диске, который содержит данные в формате JSON.

    Создадим айл с именем: myData.json

    [ {"Name": "Bob", "Age": "23", "Course": "WEB"}, {"Name": "Anna", "Age": "33", "Course": "PHP"}, {"Name": "Yony", "Age": "27", "Course": "Angular"} ]

    Расположим его в папке src/assets/data

    Создадим компонент get-data

    import { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Component({ selector: 'app-get-data', templateUrl: './get-data.component.html', styleUrls: ['./get-data.component.css'] }) export class GetDataComponent implements OnInit { fileData: any; constructor(private myHttp: HttpClient) { } ngOnInit( ) { this.myHttp.get('assets/data/myData.json').subscribe( (reslt) => { console.log(this.fileData = reslt) }); } }


    this.myHttp - наш объект типа HttpClient

    this.myHttp.get('assets/data/myData.json') - метод get() этого объекта, который получает в качестве рапаметра - URL , где расположен источник данных в формате JSON

    Этот метод возвращает в качестве результата Angular объект типа Observable. Это - массив данных, элементв которого формируются асинхронно, динамически, в результате запроса.

    У этого объекта есть метод - subscribe(), который позволяет получать данные в формате JSON.

    Мы задали (в формате arrow - function) параметр этого меода - функцию с аргументом reslt, которая выполнится по эго окончании (call-back function). В переменную reslt subscribe поместит результат выполнения.

     this.myHttp.get('assets/data/myData.json').subscribe((reslt) => {console.log(reslt)});

    Этот результат можно запомнить в переменной класса и использовать в шаблоне компонента (при интерпретации данных в примере используется Angular pipe - json для форматирования данных ).

    Шаблон:

    {{fileData | json }}


    this.myHttp.get('assets/data/myData.json').subscribe((reslt) => {console.log(this.fileData = reslt)});


    Результат: 


    PHP - server side

    Далее , для тестирования используем на сервере PHP - программу (myAngularGetV2.php).

    Программа на PHP запущена локально (URL =  http://angularhttp/myAngularGetV2.php).

    Программа получает запрос от Angular и отвечает на него.

    Рассмотрим метод HttpClient.get().


    Код программы:

    <?php header('Access-Control-Allow-Origin: http://localhost:4200'); header('Content-type: application/json'); header('Access-Control-Allow-Methods: GET'); $outstr = ' [ {"Name": "Bob", "Age": "23", "Course": "WEB"}, {"Name": "Anna", "Age": "33", "Course": "PHP"}, {"Name": "Yony", "Age": "27", "Course": "Angular"} ] '; echo($outstr); ?>


    Эта программа получает запрос от Angular - приложения и отдаёт ему нужные данные (данные эти в нашем случае хранятся в переменной $outstr, в реальной жизни, скорее всего PHP берёт их из базы данных)

    Результат - такой же, как при чтении из файла на диске.


    Передача данных от Angular на сервер по get()

    Усложним немного запрос от Angular к серверу.

    Для этого в метод get() добавим ещё один допустимый параметр - params и передадим через него на сервер имя пользователя.

    Вызов get() примет вид:

    this.myHttp.get( myUrl, {params: { 'Name': 'Anna' }} ).subscribe( (reslt) => {console.log(this.fileData = reslt)} ); }

    Мы передаём теперь на сервер по методу get параметр Name со значением Anna

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

    В нашем случае заведём в программе массив данных - $students и в этом массиве найдём того, чьё имя соответствует параметру запроса.

    В ответ сервера (JSON ) вставим данные только найденного студента.


    PHP:

    <?php header('Access-Control-Allow-Origin: http://localhost:4200'); header('Content-type: application/json'); header('Access-Control-Allow-Methods: GET'); $stud = $_GET['Name']; $students = Array( Array("Name"=> "Bob", "Age"=> "23", "Course"=> "WEB"), Array("Name"=> "Anna", "Age"=> "33", "Course"=> "PHP"), Array("Name"=> "Yony", "Age"=> "27", "Course"=> "Angular"), ); foreach($students as $student){ if($student['Name'] == $stud){ $outstr = '[{ '; $outstr .= '"Name": "'; $outstr .= $student['Name']; $outstr .= '", "Age": "'; $outstr .= $student['Age']; $outstr .= '", "Course": "'; $outstr .= $student['Course']; $outstr .= '" }]'; } } echo($outstr); ?>


    В переменную $stud получили искомого студента

    В цикле foreach перебираем массив, ищем нужного.

    Если нашли - формируем строке $outstring ответ в формате JSON и командой echo отправляем ответ (до этого функциями header мы сформировали необходимый набор HTTP заголовков ).


    Компонент:

    import { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Component({ selector: 'app-get-data', templateUrl: './get-data.component.html', styleUrls: ['./get-data.component.css'] }) export class GetDataComponent implements OnInit { fileData: any; constructor(private myHttp: HttpClient) { } ngOnInit( ) { const: myUrl = 'http://angularhttp/myAngularGetV2.php'; this.myHttp.get( myUrl, {params: { 'Name': 'Anna' }} ).subscribe( (reslt) => {console.log(this.fileData = reslt)} ); } }


    Шаблон (используем Angular - pipe json для ворматирования данных):

    {{ getData | json }}


    Результат