{"id":351228,"date":"2023-08-04T03:00:15","date_gmt":"2023-08-04T03:00:15","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=351228"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=351228","title":{"rendered":"Angular Resource \u0438\u043b\u0438 \u043f\u043e\u0447\u0435\u043c\u0443 \u044f \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b NgRX<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
\n

\u041e\u043a\u043e\u043b\u043e 5 \u043b\u0435\u0442 \u043d\u0430\u0437\u0430\u0434 \u044f \u043f\u0435\u0440\u0435\u0441\u0435\u043b \u0441 \u0420\u0435\u0430\u043a\u0442\u0430 \u043d\u0430 \u0432\u0442\u043e\u0440\u043e\u0439 \u0410\u043d\u0433\u0443\u043b\u044f\u0440 \u0438 \u043f\u0435\u0440\u0432\u043e\u0435, \u0447\u0435\u0433\u043e \u043c\u043d\u0435 \u0442\u0430\u043c \u043d\u0435 \u0445\u0432\u0430\u0442\u0438\u043b\u043e \u0431\u044b\u043b \u043c\u043e\u0434\u0443\u043b\u044c angular-resource<\/code> \u0438\u0437 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0410\u043d\u0433\u0443\u043b\u044f\u0440\u0430. \u0412\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u0445 \u0430\u043d\u0430\u043b\u043e\u0433\u043e\u0432 \u044f \u043d\u0435 \u043d\u0430\u0448\u0435\u043b, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0437\u0430 \u043d\u0435\u0434\u0435\u043b\u044e \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u0441\u0432\u043e\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443. \u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0443\u0434\u0430\u0447\u043d\u044b\u043c, \u0447\u0442\u043e \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0434\u043e\u0448\u043b\u043e \u0434\u043e \u0441\u0435\u0433\u043e\u0434\u043d\u044f\u0448\u043d\u0435\u0433\u043e \u0434\u043d\u044f. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u043a\u0443\u0447\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e (\u043d\u0435 \u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0434\u043e \u0441\u0438\u0445 \u043f\u043e\u0440 \u0442\u0430\u043c \u043d\u0435\u0442 \u043d\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u0442\u0435\u0441\u0442\u0430), \u0432 \u043e\u0431\u0449\u0435\u043c, \u0435\u0441\u0442\u044c \u043e \u0447\u0435\u043c \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c.<\/p>\n

\u041f\u0440\u043e\u043c\u0438\u0441\u044b \u043d\u0430\u0448\u0435 \u0432\u0441\u0451<\/h2>\n

\u041f\u043e\u0439\u0434\u0435\u043c \u043e\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u043a \u0441\u043b\u043e\u0436\u043d\u043e\u043c\u0443. \u0427\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u0432 \u043a\u043e\u0434\u0435 \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0442\u0430\u043a\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435:<\/p>\n

import { Component } from '@angular\/core'; import { UsersResource } from '.\/_resources\/users.resource';  @Component({   selector: 'app-root', \u00a0\u00a0templateUrl: '.\/app.component.html' }) export class AppComponent { \u00a0\u00a0users = []    \u00a0\u00a0constructor(private usersResource: UsersResource) {}  \u00a0\u00a0loadUsers() { \u00a0\u00a0\u00a0\u00a0this.usersResource.query().then(users => { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.users = users; \u00a0\u00a0\u00a0\u00a0}); \u00a0\u00a0} }<\/code><\/pre>\n
\u0412\u0441\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0441\u0442\u0430\u0440\u044b\u0439 \u0434\u043e\u0431\u0440\u044b\u0439 \u043f\u0435\u0440\u0432\u044b\u0439 \u0410\u043d\u0433\u0443\u043b\u044f\u0440. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u043c \u0432\u0441\u0435\u043c \u043f\u043e\u043d\u044f\u0442\u043d\u043e\u043c \u043f\u0440\u043e\u043c\u0438\u0441\u0435 \u0438 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0412\u0441\u044f \u044d\u0442\u0430 \u0438\u0441\u0442\u043e\u0440\u0438\u044f \u0441 RxJS, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0410\u043d\u0433\u0443\u043b\u044f\u0440\u0430 \u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u043c \u043f\u0440\u043e\u0434\u0430\u0442\u044c, \u043c\u043d\u0435 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u0441\u043e\u043c\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u0441 \u043f\u0440\u043e\u043c\u0438\u0441\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0432 90% \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u0437\u0430 \u0433\u043b\u0430\u0437\u0430.<\/p>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 UsersResource<\/code>. \u0415\u0441\u043b\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 \u0433\u0440\u0430\u043c\u043e\u0442\u043d\u044b\u043c REST API, \u0442\u043e \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n
import { Injectable } from '@angular\/core'; import { ApiResource, HttpConfig } from '.\/_resources\/api.resource';  @Injectable() @HttpConfig({ \u00a0\u00a0url: '\/users\/:id', }) export class UsersResource extends ApiResource {}<\/code><\/pre>\n
\u0414\u0430\u043b\u0435\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0447\u0442\u043e \u0438\u0437 \u0441\u0435\u0431\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 ApiResource<\/code>. \u0422\u0430\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043a\u043e\u0434\u0430, \u043d\u043e \u0438 \u043f\u0438\u0448\u0435\u0442\u0441\u044f \u043e\u043d \u043e\u0431\u044b\u0447\u043d\u043e \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n
import { Injectable } from '@angular\/core'; import { ReactiveResource } from '@angular-resource\/core'; import { HttpConfig, Get, Post, Put, Patch, Delete } from '@angular-resource\/http';  @Injectable() @HttpConfig({ \u00a0\u00a0host: 'http:\/\/127.0.0.1', \u00a0\u00a0headers: {}, \u00a0\u00a0withCredentials: true, \u00a0\u00a0transformResponse(response, options) { \u00a0\u00a0\u00a0\u00a0if (Array.isArray(response?.data) && options.isArray) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return response.data \u00a0\u00a0\u00a0\u00a0} \u00a0\u00a0\u00a0\u00a0return response \u00a0\u00a0} }) export class ApiResource extends ReactiveResource { \u00a0\u00a0query = Get({ isArray: true }) \u00a0\u00a0get = Get() \u00a0\u00a0create = Post() \u00a0\u00a0update = Patch() \u00a0\u00a0replace = Put() \u00a0\u00a0delete = Delete() } export from '@angular-resource\/core' export from '@angular-resource\/http'<\/code><\/pre>\n
\u0412\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043e\u0431\u044b\u0447\u043d\u043e\u0435 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435. \u041f\u0440\u0438\u0447\u0435\u043c \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u044b \u0442\u043e\u0436\u0435 \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u044e\u0442\u0441\u044f (\u0432 UsersResource<\/code> \u043c\u044b \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u043b\u0438 \u043d\u0430\u0448 \u043a\u043e\u043d\u0444\u0438\u0433 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c url<\/code>). \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u043e\u0436\u0435\u043c \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u0442\u044c \u043b\u044e\u0431\u043e\u0439 \u043d\u0430\u0448 \u0440\u0435\u0441\u0443\u0440\u0441 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u043c\u0435\u0442\u043e\u0434\u043e\u043c \u0438\/\u0438\u043b\u0438 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0435\u0439. \u041e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u043e.<\/p>\n
import { Injectable } from '@angular\/core'; import { ApiResource, HttpConfig, Get } from '.\/_resources\/api.resource';  @Injectable() @HttpConfig({ \u00a0\u00a0url: '\/users\/:id', }) export class UsersResource extends ApiResource { \u00a0\u00a0getMeta = Get({ url: '\/users\/meta-data' }) }<\/code><\/pre>\n
RxJS \u0438\u043d\u043e\u0433\u0434\u0430 \u0442\u043e\u0436\u0435 \u043f\u043e\u043b\u0435\u0437\u0435\u043d<\/h2>\n
\u0418\u0442\u0430\u043a, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u044c \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 REST API, \u043a\u0430\u043a \u0432 \u043f\u0435\u0440\u0432\u043e\u043c \u0410\u043d\u0433\u0443\u043b\u044f\u0440\u0435. \u0422\u0430\u043a\u043e\u0435 \u0441\u0435\u0431\u0435 \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0438 \u043d\u0435 \u0441\u0442\u0430\u043b \u0431\u044b \u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u044e \u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0434\u0438 \u044d\u0442\u043e\u0433\u043e, \u0442\u0430\u043a \u0447\u0442\u043e \u0438\u0434\u0435\u043c \u0434\u0430\u043b\u044c\u0448\u0435. \u0412\u0441\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u044e\u0442\u0441\u044f \u043e\u0442 \u043d\u0435\u043a\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 ReactiveResource<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u0448\u0438\u043d\u0443 \u0441\u043e\u0431\u044b\u0442\u0438\u0439, \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u0443\u044e \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 ReplaySubject<\/code> \u0441 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435\u043c \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0435 \u0432\u0435\u0449\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043b\u0435\u0433\u043a\u043e \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430\u0448 \u043a\u043e\u0434 \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0439\u043d\u044b\u0439 \u043c\u0430\u043d\u0435\u0440:<\/p>\n
import { Component } from '@angular\/core'; import { UsersResource } from '.\/_resources\/users.resource';  @Component({   selector: 'app-root', \u00a0\u00a0templateUrl: '.\/app.component.html' })  export class AppComponent { \u00a0\u00a0users = []    \u00a0\u00a0constructor(private usersResource: UsersResource) {}  \u00a0\u00a0loadUsers() { \u00a0\u00a0\u00a0\u00a0this.usersResource.query() \u00a0\u00a0\u00a0\u00a0this.usersResource.actions.subscribe(action => { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (action.type === 'query') { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.users = action.payload \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \u00a0\u00a0\u00a0\u00a0});  \u00a0\u00a0\u00a0\u00a0\/\/ \u0438\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0441\u0430\u0445\u0430\u0440 \u00a0\u00a0\u00a0\u00a0this.usersResource.action('query').subscribe(payload => { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.users = payload \u00a0\u00a0\u00a0\u00a0});  \u00a0\u00a0\u00a0\u00a0\/\/ \u0438 \u0434\u0430\u0436\u0435 \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u0441\u043b\u0430\u0442\u044c \u0441\u0432\u043e\u0451 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0432 \u043f\u043e\u0442\u043e\u043a \u0440\u0435\u0441\u0443\u0440\u0441\u0430 \u00a0\u00a0\u00a0\u00a0this.usersResource.action('query').next([]) \u00a0\u00a0} }<\/code><\/pre>\n
\u0417\u0434\u0435\u0441\u044c, \u043a\u0430\u043a \u0438 \u0437\u0430\u0432\u0435\u0449\u0430\u043b\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0410\u043d\u0433\u0443\u043b\u044f\u0440\u0430, \u043c\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u0441 http-\u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c\u0438 \u043a\u0430\u043a \u0441 \u043f\u043e\u0442\u043e\u043a\u0430\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u0445. \u041b\u0435\u0433\u043a\u043e \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u0443\u0435\u043c \u0438\u0445 \u0441 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c\u0438 \u0444\u043e\u0440\u043c\u0430\u043c\u0438 \u0438 \u043c\u043e\u0436\u0435\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e RxJS \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u0432 \u0440\u0430\u0437\u0440\u0443\u043b\u0438\u0442\u044c \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044e \u043b\u044e\u0431\u043e\u0439 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438.<\/p>\n
\u0414\u043e \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0441 http-\u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c\u0438, \u043d\u043e \u0440\u0430\u0437 \u0443\u0436 \u044d\u0442\u0430 \u0432\u0443\u043d\u0434\u0435\u0440\u0432\u0430\u0444\u043b\u044f \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0430 \u043d\u0430 \u0448\u0438\u043d\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0439, \u0442\u043e \u043a\u0442\u043e \u043c\u0435\u0448\u0430\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0412\u0435\u0431\u0441\u043e\u043a\u0435\u0442\u0430\u043c\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440? \u041f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e, \u043d\u0438\u043a\u0442\u043e. \u041c\u044b \u0441\u0430\u043c\u0438 \u043c\u043e\u0436\u0435\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u0430\u043a\u0438\u0435 \u0443\u0433\u043e\u0434\u043d\u043e \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u044b-\u0430\u0434\u0430\u043f\u0442\u0435\u0440\u044b. \u0418\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438 \u043f\u043e\u043c\u0438\u043c\u043e HttpConfig<\/code> \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b WebSocketConfig<\/code>, SocketIoConfig<\/code> \u0438 LocalStorageConfig<\/code>, \u0442\u0430\u043a \u0447\u0442\u043e \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0447\u0430\u0442. \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u044b\u0439 \u0440\u0435\u0441\u0443\u0440\u0441:<\/p>\n
import { Injectable } from '@angular\/core'; import { ReactiveResource } from '@angular-resource\/core'; import { HttpConfig, Get } from '@angular-resource\/http'; import { SocketIoConfig, CloseSocketIo, OpenSocketIo, SendSocketIoEvent } from '@angular-resource\/socket-io';  @Injectable() @HttpConfig({ \u00a0\u00a0host: 'http:\/\/127.0.0.1:3000', \u00a0\u00a0url: '\/messages\/:id' }) @SocketIoConfig({ \u00a0\u00a0url: 'ws:\/\/127.0.0.1:3000' }) export class ChatResource extends ReactiveResource { \u00a0\u00a0getMessages = Get() \u00a0\u00a0connect = OpenSocketIo() \u00a0\u00a0disconnect = CloseSocketIo() \u00a0\u00a0sendMessage = SendSocketIoEvent('sendMessage') }<\/code><\/pre>\n
\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u0440\u0438\u043c\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0432\u0438\u0434:<\/p>\n
import { Component } from '@angular\/core'; import { ChatResource } from '.\/_resources\/chat.resource';  @Component({ \u00a0\u00a0selector: 'app-root', \u00a0\u00a0templateUrl: '.\/app.component.html' }) export class AppComponent { \u00a0\u00a0messages = []    constructor(private chatResource: ChatResource) {   \u00a0\u00a0this.chatResource.getMessages()   \u00a0\u00a0\u00a0\u00a0.then(messages => {   \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.messages = messages   \u00a0\u00a0\u00a0\u00a0})   \u00a0\u00a0\u00a0\u00a0.catch(error => {   \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log('HTTP error', error)   \u00a0\u00a0\u00a0\u00a0})    \u00a0\u00a0this.chatResource.connect()   \u00a0\u00a0\u00a0\u00a0.catch(error => {   \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log('WS error', error)   \u00a0\u00a0\u00a0\u00a0})      \/\/ \u041f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u043c, \u0447\u0442\u043e SocketIO-\u0441\u0435\u0440\u0432\u0435\u0440 \u0448\u043b\u0435\u0442 \u0432\u0441\u0435 \u043d\u043e\u0432\u044b\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f (\u0432 \u0442.\u0447. \u043d\u0430\u0448\u0435) \u0432 \u0441\u043e\u0431\u044b\u0442\u0438\u0438 'newMessage'    \u00a0\u00a0this.chatResource.action('newMessage').subscribe(message => {   \u00a0\u00a0\u00a0\u00a0this.messages.push(message)   \u00a0\u00a0})   }    sendMessage() {   \u00a0\u00a0this.chatResource.sendMessage({ text: 'My message' })   \u00a0\u00a0\u00a0\u00a0.then(() => {   \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log('Message was sended by SocketIO')   \u00a0\u00a0\u00a0\u00a0});   } }<\/code><\/pre>\n
\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u0438\u0441\u0442\u043e\u0440\u0438\u044e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 HTTP-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u043c, \u0430 \u0434\u0430\u043b\u044c\u0448\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u043c \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c \u0447\u0435\u0440\u0435\u0437 \u0412\u0435\u0431\u0441\u043e\u043a\u0435\u0442\u044b \u0438 \u0432\u0441\u0435 \u044d\u0442\u043e \u0432 \u043e\u0434\u043d\u043e\u043c \u0440\u0435\u0441\u0443\u0440\u0441\u0435.\u00a0<\/p>\n
\u0412 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0435 \u0441\u0442\u0430\u0442\u044c\u0438 \u0431\u044b\u043b\u043e \u0447\u0442\u043e-\u0442\u043e \u043f\u0440\u043e NgRX<\/h2>\n
\u0418 \u0440\u0430\u0437 \u0443\u0436 \u043f\u043e\u0448\u043b\u0430 \u0442\u0430\u043a\u0430\u044f \u043f\u044c\u044f\u043d\u043a\u0430, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043a\u0430\u043a\u043e\u0439-\u043d\u0438\u0431\u0443\u0434\u044c \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u044b\u0439 \u0441\u0447\u0435\u0442\u0447\u0438\u043a (\u0434\u043e\u0433\u0430\u0434\u044b\u0432\u0430\u0435\u0442\u0435\u0441\u044c \u043a \u0447\u0435\u043c\u0443 \u043a\u043b\u043e\u043d\u044e?). \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0435\u0441\u0442\u044c \u043e\u0441\u043e\u0431\u044b\u0439 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440 StateConfig<\/code>. \u041c\u044b \u0436\u0435 \u0445\u0440\u0430\u043d\u0438\u043c \u0432\u043d\u0443\u0442\u0440\u0438 ReplaySubject<\/code> \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u0430, \u043f\u043e\u0447\u0435\u043c\u0443 \u0431\u044b \u044d\u0442\u043e \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c?<\/p>\n
import { Injectable } from '@angular\/core'; import { ReactiveResource, StateConfig } from '@angular-resource\/core';  @Injectable() @StateConfig({ \u00a0\u00a0initialState: { \u00a0\u00a0\u00a0\u00a0counter: 0, \u00a0\u00a0\u00a0\u00a0updatedAt: 0 \u00a0\u00a0}, \u00a0\u00a0updateState: (state, action) => { \u00a0\u00a0\u00a0\u00a0\/\/ Reducer \u00a0\u00a0\u00a0\u00a0if (action.error) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return state \u00a0\u00a0\u00a0\u00a0} \u00a0\u00a0\u00a0\u00a0switch (action.type) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case 'increase': \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return {...state, counter: state.counter + action.payload}          \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case 'decrease': \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return {...state, counter: state.counter - action.payload}  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case 'updateAt': \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return {...state, updatedAt: action.payload}  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0default: \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return state \u00a0\u00a0\u00a0\u00a0} \u00a0\u00a0} })  export class CounterStore extends ReactiveResource {   \/\/ Actions \u00a0\u00a0increase = (num)  => this.action('increase').next(num) \u00a0\u00a0decrease = (num)  => this.action('decrease').next(num) \u00a0\u00a0updateAt = (date) => this.action('updateAt').next(date) }<\/code><\/pre>\n
\u041d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442? \u0414\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440 \u2014 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u0434\u043b\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0440\u0435\u0434\u044c\u044e\u0441\u0435\u0440\u0430, \u043e\u043d \u043d\u0430 \u043f\u0441\u0438\u0445\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u0443\u0440\u043e\u0432\u043d\u0435 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u0447\u0442\u043e \u043d\u0438\u0447\u0435\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0433\u043e \u0442\u0430\u043c \u0433\u043e\u0440\u043e\u0434\u0438\u0442\u044c \u043d\u0435 \u0441\u0442\u043e\u0438\u0442. <\/p>\n
\u0412\u0437\u0433\u043b\u044f\u043d\u0435\u043c \u043d\u0430 \u043a\u043e\u0434 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430:<\/p>\n
import { Injectable } from '@angular\/core'; import { CounterStore } from '.\/_resources\/counter.store';  @Component({   selector: 'app-root',   templateUrl: '.\/app.component.html' }) export class AppComponent { \u00a0\u00a0counter = 0 \u00a0\u00a0updatedAt = 0  \u00a0\u00a0constructor(private counterStore: CounterStore) { \u00a0\u00a0\u00a0\u00a0this.counterStore.state.subscribe(state => { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.counter = state.counter \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.updatedAt = state.updatedAt \u00a0\u00a0\u00a0\u00a0});  \u00a0\u00a0\u00a0\u00a0\/\/ Effects \u00a0\u00a0\u00a0\u00a0this.counterStore.action('increase', 'decrease').subscribe(payload => { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.counterStore.updateAt(Date.now()) \u00a0\u00a0\u00a0\u00a0}); \u00a0\u00a0}  \u00a0\u00a0increase(num) { \u00a0\u00a0\u00a0\u00a0this.counterStore.increase(num) \u00a0\u00a0}  \u00a0\u00a0decrease(num) { \u00a0\u00a0\u00a0\u00a0this.counterStore.decrease(num) \u00a0\u00a0} }<\/code><\/pre>\n
\u0412\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0443\u0436\u0435 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e\u0433\u043e \u043d\u0430\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438 \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0444\u0444\u0435\u043a\u0442\u044b, \u043a\u0430\u043a \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u0432 NgRX. \u0412\u043f\u0440\u043e\u0447\u0435\u043c \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b  \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0438 \u0442\u0430\u043a:<\/p>\n
this.counterStore.state.subscribe(state => {   this.counter = state.counter   this.updatedAt = state.updatedAt   this.counterStore.updateAt(Date.now()) });<\/code><\/pre>\n
\u0418 \u044d\u0442\u043e \u0434\u0430\u0436\u0435 \u043d\u0435 \u0432\u044b\u0437\u043e\u0432\u0435\u0442 \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0439 \u0446\u0438\u043a\u043b (\u0438\u0437-\u0437\u0430 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u0430\u0442\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0442\u0435\u0439\u0442\u0430), \u0442\u0430\u043a \u043a\u0430\u043a \u0435\u0441\u0442\u044c \u0437\u0430\u0449\u0438\u0442\u0430 \u043e\u0442 \u0434\u0443\u0440\u0430\u043a\u0430 \u0438 \u0435\u0441\u043b\u0438 \u0434\u0432\u0435 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435 \u043c\u0438\u043a\u0440\u043e\u0442\u0430\u0441\u043a\u0438 \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432 \u043e\u0434\u043d\u043e\u0439 \u0444\u0430\u0437\u0435 \u0446\u0438\u043a\u043b\u0430, \u0442\u043e \u0432\u0442\u043e\u0440\u0430\u044f \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043e\u0442\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f.<\/p>\n
\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0432\u0441\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438<\/h2>\n
\u0421\u043e\u0431\u0435\u0440\u0435\u043c \u0432 \u043a\u0443\u0447\u0443 \u043d\u0430\u0448\u0438 \u0437\u043d\u0430\u043d\u0438\u044f \u0438 \u043f\u0435\u0440\u0435\u043f\u0438\u0448\u0435\u043c \u0447\u0430\u0442, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0442\u0443\u0434\u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043b\u044e\u0448\u043a\u0438. ChatResource<\/code> \u043f\u0440\u0438\u043c\u0435\u0442 \u0442\u0430\u043a\u043e\u0439 \u0432\u0438\u0434:<\/p>\n
import { Injectable } from '@angular\/core'; import { ReactiveResource, StateConfig } from '@angular-resource\/core'; import { HttpConfig, Get } from '@angular-resource\/http'; import { SocketIoConfig, CloseSocketIo, OpenSocketIo, SendSocketIoEvent } from '@angular-resource\/socket-io';  @Injectable() @HttpConfig({ \u00a0\u00a0host: 'http:\/\/127.0.0.1:3000', \u00a0\u00a0url: '\/messages\/:id' }) @SocketIoConfig({ \u00a0\u00a0url: 'ws:\/\/127.0.0.1:3000' }) @StateConfig({ \u00a0\u00a0initialState: { \u00a0\u00a0\u00a0\u00a0messages: [], \u00a0\u00a0\u00a0\u00a0isLoading: false, \u00a0\u00a0\u00a0\u00a0isError: false \u00a0\u00a0}, \u00a0\u00a0updateState: (state, action) => { \u00a0\u00a0\u00a0\u00a0switch (action.type) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case 'getMessages:start': \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return {...state, isLoading: true}  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case 'getMessages': \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return !action.error \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0? {...state, messages: action.payload, isError: false, isLoading: false} \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0: {...state, isError: true, isLoading: false}          \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case 'newMessage': \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return {...state, messages: [...state.messages, action.payload]};  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case 'connect': \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return {...state, isError: !!action.error}  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0default: \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return state; \u00a0\u00a0\u00a0\u00a0} \u00a0\u00a0} }) export class ChatResource extends ReactiveResource { \u00a0\u00a0getMessages = Get(); \u00a0\u00a0connect = OpenSocketIo(); \u00a0\u00a0disconnect = CloseSocketIo(); \u00a0\u00a0sendMessage = SendSocketIoEvent('sendMessage');    \u00a0\u00a0constructor() { \u00a0\u00a0\u00a0\u00a0super()  \u00a0\u00a0\u00a0\u00a0this.error('getMessages').subscribe(error => { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0setTimeout(() => { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log('HTTP reconnect...') \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.getMessages() \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}, 5000) \u00a0\u00a0\u00a0\u00a0}) \u00a0\u00a0\u00a0\u00a0this.error('connect').subscribe(error => { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0setTimeout(() => { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log('WS reconnect...') \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.connect() \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}, 7000) \u00a0\u00a0\u00a0\u00a0}) \u00a0\u00a0} }<\/code><\/pre>\n
\u0414\u0443\u043c\u0430\u044e, \u0432\u044b \u0443\u0436\u0435 \u0434\u043e\u0433\u0430\u0434\u0430\u043b\u0438\u0441\u044c, \u0447\u0442\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0431\u0435\u0440\u0443\u0442\u0441\u044f \u0438\u0437 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0439 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0432 \u0440\u0435\u0441\u0443\u0440\u0441\u0430\u0445. \u0415\u0441\u043b\u0438 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u043e\u0442\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445, \u0442\u043e \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u044e\u0449\u0435\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u0441\u0443\u0444\u0444\u0438\u043a\u0441 :start<\/code><\/p>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u0441\u044f \u043b\u043e\u0433\u0438\u043a\u0430 \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0432 \u0440\u0435\u0441\u0443\u0440\u0441\u0435 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u043e \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u043c:<\/p>\n
import { Injectable } from '@angular\/core'; import { ChatResource } from '.\/_resources\/chat.resource';  @Component({ \u00a0\u00a0selector: 'app-root', \u00a0\u00a0templateUrl: '.\/app.component.html' }) export class AppComponent { \u00a0\u00a0messages = [] \u00a0\u00a0isLoading = false \u00a0\u00a0isError = false  \u00a0\u00a0constructor(private chatResource: ChatResource) { \u00a0\u00a0\u00a0\u00a0this.chatResource.state.subscribe(state => { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.messages  = state.messages \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.isLoading = state.isLoading \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.isError   = state.isError \u00a0\u00a0\u00a0\u00a0}); \u00a0\u00a0\u00a0\u00a0this.chatResource.connect()     this.chatResource.getMessages() \u00a0\u00a0}  \u00a0\u00a0sendMessage() { \u00a0\u00a0\u00a0\u00a0this.chatResource.sendMessage({ text: 'My message' }); \u00a0\u00a0} }<\/code><\/pre>\n
\u0412 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435, \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u0430\u043d\u0433\u0443\u043b\u044f\u0440\u043e\u0432\u0441\u043a\u043e\u043c \u0441\u0442\u0438\u043b\u0435, \u0430 \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c | async<\/code>:<\/p>\n
this.messages  = this.chatResource.state.pipe(messageSelector) this.isLoading = this.chatResource.state.pipe(isLoadingSelector) this.isError   = this.chatResource.state.pipe(isErrorSelector)<\/code><\/pre>\n
\u043d\u043e \u043c\u043d\u0435 \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043d\u0435 \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f. \u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0435 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043b\u043e\u0433\u0438\u043a\u0430 \u043d\u0435 \u043e\u0442\u043d\u043e\u0441\u044f\u0449\u0430\u044f\u0441\u044f \u043a \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044e, \u0447\u0442\u043e \u043d\u0430\u0440\u0443\u0448\u0430\u0435\u0442 \u043f\u0430\u0440\u0430\u0434\u0438\u0433\u043c\u0443 MCV, \u0432\u043e-\u0432\u0442\u043e\u0440\u044b\u0445, \u043b\u044e\u0434\u0438 \u0441 React\/Vue \u0431\u044d\u043a\u0433\u0440\u0430\u0443\u043d\u0434\u043e\u043c \u0438\u043b\u0438 \u0431\u044d\u043a\u0435\u043d\u0434\u0449\u0438\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0447\u0438\u0442\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u043a\u043e\u0434, \u0432\u0430\u043c \u0442\u043e\u0447\u043d\u043e \u0441\u043f\u0430\u0441\u0438\u0431\u043e \u043d\u0435 \u0441\u043a\u0430\u0436\u0443\u0442 (\u043f\u0440\u0438\u0432\u0435\u0442 \u0440\u0435\u0431\u044f\u0442\u0430\u043c \u0438\u0437 \u0422\u0438\u043d\u044c\u043a\u043e\u0432\u0430 \u0438 \u0434\u0440\u0443\u0433\u0438\u043c, \u043a\u0442\u043e \u0442\u0430\u043a \u0434\u0435\u043b\u0430\u0435\u0442). \u041c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0437\u0430\u0447\u0430\u0441\u0442\u0443\u044e \u043d\u0435 \u0434\u0430\u0435\u0442 \u043e\u0449\u0443\u0442\u0438\u043c\u043e\u0433\u043e \u0432\u044b\u0438\u0433\u0440\u044b\u0448\u0430 \u0432 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438, \u0434\u0430 \u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0435 \u043c\u043e\u0436\u043d\u043e \u0432 \u0434\u0440\u0443\u0433\u043e\u043c \u043c\u0435\u0441\u0442\u0435. \u0422\u0435\u043c \u0431\u043e\u043b\u0435\u0435 \u0432\u044b \u0441\u0430\u043c\u0438 \u0432\u044b\u0431\u0440\u0430\u043b\u0438 \u0410\u043d\u0433\u0443\u043b\u044f\u0440 \u0441\u0432\u043e\u0438\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c, \u0442\u0430\u043a \u0447\u0442\u043e \u043d\u0435 \u0436\u0430\u043b\u0443\u0439\u0442\u0435\u0441\u044c.<\/p>\n
\u0418\u0442\u043e\u0433\u0438<\/h2>\n
\u0412 \u043e\u0431\u0449\u0435\u043c, \u044d\u0442\u043e \u0438 \u0432\u0441\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f. \u041d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0441\u0447\u0443\u0440 \u0433\u0438\u0431\u043a\u0438\u043c \u0438 \u043f\u0440\u0438\u043d\u043e\u0441\u044f\u0449\u0438\u043c \u0445\u0430\u043e\u0441 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442. \u041d\u0430 \u0434\u0435\u043b\u0435 \u0432\u0441\u0451 \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442. \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0438\u0448\u0443\u0442 \u043d\u0430 \u043f\u0440\u043e\u043c\u0438\u0441\u0430\u0445, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u0441\u0442\u0430\u0442\u044c\u0438 \u0438 \u0432 \u0443\u0441 \u043d\u0435 \u0434\u0443\u044e\u0442. \u041b\u0438\u0448\u044c \u043a\u043e\u0433\u0434\u0430 \u0437\u0430\u0434\u0430\u0447\u0430 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0439, \u0442\u043e \u0440\u0435\u0448\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0435\u0435 \u0440\u0430\u0437\u0440\u0443\u043b\u0438\u0442\u044c \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f\u0445, \u043d\u0443\u0436\u0435\u043d \u043b\u0438 \u0441\u0442\u043e\u0440 \u0438 \u043f\u0440\u043e\u0447\u0435\u0435. \u0410 \u0442\u0430\u043a \u043a\u0430\u043a \u0432\u0441\u0451 \u043d\u0430\u0448\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c (\u0438 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e) \u0443\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043e, \u0442\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u0438\u0437 \u043e\u0434\u043d\u043e\u0433\u043e \u0441\u0442\u0438\u043b\u044f \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u0434\u0440\u0443\u0433\u043e\u0439 \u043d\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0442\u0440\u0443\u0434\u0430. \u041f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u043d\u0438\u0435 \u043b\u043e\u0433\u0438\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u0444\u043e\u0440\u043c\u043e\u0439 \u0441 \u0434\u0435\u0441\u044f\u0442\u043a\u0430\u043c\u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043e\u0432 \u0441 \u043f\u0440\u043e\u043c\u0438\u0441\u043e\u0432 \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0443 \u043c\u0435\u043d\u044f \u0437\u0430\u043d\u044f\u043b \u0434\u0435\u043d\u044c. \u0421\u043b\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0443\u0448\u043b\u043e \u0431\u044b, \u0435\u0441\u043b\u0438 \u0431\u044b \u044f \u0441\u0440\u0430\u0437\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0438\u043b\u0438 \u0440\u0435\u0434\u044c\u044e\u0441\u0435\u0440\u044b \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043c. \u041f\u0440\u043e\u0441\u0442\u044b\u0435 \u0432\u0435\u0449\u0438 \u0432\u0441\u0435 \u0436\u0435 \u043b\u0443\u0447\u0448\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e.<\/p>\n
\u041d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u043b \u044d\u0442\u043e\u0442 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u043a\u0430\u043a \u0447\u0442\u043e-\u0442\u043e \u0434\u043e\u043b\u0433\u043e\u0436\u0438\u0432\u0443\u0449\u0435\u0435, \u043d\u043e \u043c\u0438\u043d\u0443\u043b\u043e \u043f\u044f\u0442\u044c \u043b\u0435\u0442, \u0430 \u0432\u043e\u0437 \u0438 \u043d\u044b\u043d\u0435 \u0442\u0430\u043c. \u0417\u0430 \u044d\u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f NgRX, \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f MobX \u0438 \u0447\u0442\u043e-\u0442\u043e \u0435\u0449\u0451, \u043d\u043e \u0447\u0435\u0433\u043e-\u0442\u043e \u043a\u0430\u0440\u0434\u0438\u043d\u0430\u043b\u044c\u043d\u043e \u043b\u0443\u0447\u0448\u0435\u0433\u043e, \u043a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e \u043d\u0435 \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043b\u0438. \u0418\u043b\u0438 \u044f \u043e\u0431 \u044d\u0442\u043e\u043c \u043d\u0435 \u0437\u043d\u0430\u044e (\u043f\u043e\u0434\u0435\u043b\u0438\u0442\u0435\u0441\u044c \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445). \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u044d\u0442\u0443 \u0441\u0442\u0430\u0442\u044c\u044e.<\/p>\n
\u042d\u0442\u0430 \u043d\u0435\u0437\u0430\u043c\u044b\u0441\u043b\u043e\u0432\u0430\u0442\u0430\u044f \u0448\u0442\u0443\u043a\u0430 \u043b\u0435\u0436\u0438\u0442 \u043d\u0430 \u0413\u0438\u0442\u0445\u0430\u0431\u0435 https:\/\/github.com\/tamtakoe\/oi-angular-resource<\/u><\/a>, \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0438\u0433\u0440\u0430\u0442\u044c\u0441\u044f. \u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u0442\u0430\u043c \u0442\u0430\u043a \u0441\u0435\u0431\u0435 \u2014 \u0438\u0437\u0432\u0438\u043d\u044f\u0439\u0442\u0435. \u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430\u0434\u0435\u0436\u043d\u043e, \u043d\u043e \u044f \u043d\u0435 \u043f\u0440\u043e\u0432\u043e\u0434\u0438\u043b \u0432\u0441\u0435\u043e\u0431\u044a\u0435\u043c\u043b\u044e\u0449\u0435\u0433\u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043c\u0435\u0442\u043e\u0434\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043d\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0441\u044f \u0432 \u0436\u0438\u0437\u043d\u0438; \u0434\u0430 \u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0448\u0442\u0443\u043a\u0438 \u0442\u0438\u043f\u0430 \u0430\u0434\u0430\u043f\u0442\u0435\u0440\u0430 \u0434\u043b\u044f \u0412\u0435\u0431\u0441\u043e\u043a\u0435\u0442\u043e\u0432 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u044b \u00ab\u0447\u0442\u043e\u0431\u044b \u0431\u044b\u043b\u043e\u00bb.<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n
  <\/div>\n
  
 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  https:\/\/habr.com\/ru\/articles\/752398\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
<\/div>\n
\n
\n
\n
\n
\u041e\u043a\u043e\u043b\u043e 5 \u043b\u0435\u0442 \u043d\u0430\u0437\u0430\u0434 \u044f \u043f\u0435\u0440\u0435\u0441\u0435\u043b \u0441 \u0420\u0435\u0430\u043a\u0442\u0430 \u043d\u0430 \u0432\u0442\u043e\u0440\u043e\u0439 \u0410\u043d\u0433\u0443\u043b\u044f\u0440 \u0438 \u043f\u0435\u0440\u0432\u043e\u0435, \u0447\u0435\u0433\u043e \u043c\u043d\u0435 \u0442\u0430\u043c \u043d\u0435 \u0445\u0432\u0430\u0442\u0438\u043b\u043e \u0431\u044b\u043b \u043c\u043e\u0434\u0443\u043b\u044c angular-resource<\/code> \u0438\u0437 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0410\u043d\u0433\u0443\u043b\u044f\u0440\u0430. \u0412\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u0445 \u0430\u043d\u0430\u043b\u043e\u0433\u043e\u0432 \u044f \u043d\u0435 \u043d\u0430\u0448\u0435\u043b, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0437\u0430 \u043d\u0435\u0434\u0435\u043b\u044e \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u0441\u0432\u043e\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443. \u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0443\u0434\u0430\u0447\u043d\u044b\u043c, \u0447\u0442\u043e \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0434\u043e\u0448\u043b\u043e \u0434\u043e \u0441\u0435\u0433\u043e\u0434\u043d\u044f\u0448\u043d\u0435\u0433\u043e \u0434\u043d\u044f. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u043a\u0443\u0447\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e (\u043d\u0435 \u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0434\u043e \u0441\u0438\u0445 \u043f\u043e\u0440 \u0442\u0430\u043c \u043d\u0435\u0442 \u043d\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u0442\u0435\u0441\u0442\u0430), \u0432 \u043e\u0431\u0449\u0435\u043c, \u0435\u0441\u0442\u044c \u043e \u0447\u0435\u043c \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c.<\/p>\n
\u041f\u0440\u043e\u043c\u0438\u0441\u044b \u043d\u0430\u0448\u0435 \u0432\u0441\u0451<\/h2>\n
\u041f\u043e\u0439\u0434\u0435\u043c \u043e\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u043a \u0441\u043b\u043e\u0436\u043d\u043e\u043c\u0443. \u0427\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u0432 \u043a\u043e\u0434\u0435 \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0442\u0430\u043a\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435:<\/p>\n
import { Component } from '@angular\/core'; import { UsersResource } from '.\/_resources\/users.resource';  @Component({   selector: 'app-root', \u00a0\u00a0templateUrl: '.\/app.component.html' }) export class AppComponent { \u00a0\u00a0users = []    \u00a0\u00a0constructor(private usersResource: UsersResource) {}  \u00a0\u00a0loadUsers() { \u00a0\u00a0\u00a0\u00a0this.usersResource.query().then(users => { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.users = users; \u00a0\u00a0\u00a0\u00a0}); \u00a0\u00a0} }<\/code><\/pre>\n
\u0412\u0441\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0441\u0442\u0430\u0440\u044b\u0439 \u0434\u043e\u0431\u0440\u044b\u0439 \u043f\u0435\u0440\u0432\u044b\u0439 \u0410\u043d\u0433\u0443\u043b\u044f\u0440. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u043c \u0432\u0441\u0435\u043c \u043f\u043e\u043d\u044f\u0442\u043d\u043e\u043c \u043f\u0440\u043e\u043c\u0438\u0441\u0435 \u0438 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0412\u0441\u044f \u044d\u0442\u0430 \u0438\u0441\u0442\u043e\u0440\u0438\u044f \u0441 RxJS, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0410\u043d\u0433\u0443\u043b\u044f\u0440\u0430 \u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u043c \u043f\u0440\u043e\u0434\u0430\u0442\u044c, \u043c\u043d\u0435 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u0441\u043e\u043c\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u0441 \u043f\u0440\u043e\u043c\u0438\u0441\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0432 90% \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u0437\u0430 \u0433\u043b\u0430\u0437\u0430.<\/p>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 UsersResource<\/code>. \u0415\u0441\u043b\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 \u0433\u0440\u0430\u043c\u043e\u0442\u043d\u044b\u043c REST API, \u0442\u043e \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n
import { Injectable } from '@angular\/core'; import { ApiResource, HttpConfig } from '.\/_resources\/api.resource';  @Injectable() @HttpConfig({ \u00a0\u00a0url: '\/users\/:id', }) export class UsersResource extends ApiResource {}<\/code><\/pre>\n
\u0414\u0430\u043b\u0435\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0447\u0442\u043e \u0438\u0437 \u0441\u0435\u0431\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 ApiResource<\/code>. \u0422\u0430\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043a\u043e\u0434\u0430, \u043d\u043e \u0438 \u043f\u0438\u0448\u0435\u0442\u0441\u044f \u043e\u043d \u043e\u0431\u044b\u0447\u043d\u043e \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n
import { Injectable } from '@angular\/core'; import { ReactiveResource } from '@angular-resource\/core'; import { HttpConfig, Get, Post, Put, Patch, Delete } from '@angular-resource\/http';  @Injectable() @HttpConfig({ \u00a0\u00a0host: 'http:\/\/127.0.0.1', \u00a0\u00a0headers: {}, \u00a0\u00a0withCredentials: true, \u00a0\u00a0transformResponse(response, options) { \u00a0\u00a0\u00a0\u00a0if (Array.isArray(response?.data) && options.isArray) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return response.data \u00a0\u00a0\u00a0\u00a0} \u00a0\u00a0\u00a0\u00a0return response \u00a0\u00a0} }) export class ApiResource extends ReactiveResource { \u00a0\u00a0query = Get({ isArray: true }) \u00a0\u00a0get = Get() \u00a0\u00a0create = Post() \u00a0\u00a0update = Patch() \u00a0\u00a0replace = Put() \u00a0\u00a0delete = Delete() } export from '@angular-resource\/core' export from '@angular-resource\/http'<\/code><\/pre>\n
\u0412\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043e\u0431\u044b\u0447\u043d\u043e\u0435 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435. \u041f\u0440\u0438\u0447\u0435\u043c \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u044b \u0442\u043e\u0436\u0435 \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u044e\u0442\u0441\u044f (\u0432 UsersResource<\/code> \u043c\u044b \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u043b\u0438 \u043d\u0430\u0448 \u043a\u043e\u043d\u0444\u0438\u0433 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c url<\/code>). \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u043e\u0436\u0435\u043c \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u0442\u044c \u043b\u044e\u0431\u043e\u0439 \u043d\u0430\u0448 \u0440\u0435\u0441\u0443\u0440\u0441 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u043c\u0435\u0442\u043e\u0434\u043e\u043c \u0438\/\u0438\u043b\u0438 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0435\u0439. \u041e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u043e.<\/p>\n
import { Injectable } from '@angular\/core'; import { ApiResource, HttpConfig, Get } from '.\/_resources\/api.resource';  @Injectable() @HttpConfig({ \u00a0\u00a0url: '\/users\/:id', }) export class UsersResource extends ApiResource { \u00a0\u00a0getMeta = Get({ url: '\/users\/meta-data' }) }<\/code><\/pre>\n
RxJS \u0438\u043d\u043e\u0433\u0434\u0430 \u0442\u043e\u0436\u0435 \u043f\u043e\u043b\u0435\u0437\u0435\u043d<\/h2>\n
\u0418\u0442\u0430\u043a, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u044c \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 REST API, \u043a\u0430\u043a \u0432 \u043f\u0435\u0440\u0432\u043e\u043c \u0410\u043d\u0433\u0443\u043b\u044f\u0440\u0435. \u0422\u0430\u043a\u043e\u0435 \u0441\u0435\u0431\u0435 \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0438 \u043d\u0435 \u0441\u0442\u0430\u043b \u0431\u044b \u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u044e \u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0434\u0438 \u044d\u0442\u043e\u0433\u043e, \u0442\u0430\u043a \u0447\u0442\u043e \u0438\u0434\u0435\u043c \u0434\u0430\u043b\u044c\u0448\u0435. \u0412\u0441\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u044e\u0442\u0441\u044f \u043e\u0442 \u043d\u0435\u043a\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 ReactiveResource<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u0448\u0438\u043d\u0443 \u0441\u043e\u0431\u044b\u0442\u0438\u0439, \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u0443\u044e \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 ReplaySubject<\/code> \u0441 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435\u043c \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0435 \u0432\u0435\u0449\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043b\u0435\u0433\u043a\u043e \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430\u0448 \u043a\u043e\u0434 \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0439\u043d\u044b\u0439 \u043c\u0430\u043d\u0435\u0440:<\/p>\n
import { Component } from '@angular\/core'; import { UsersResource } from '.\/_resources\/users.resource';  @Component({   selector: 'app-root', \u00a0\u00a0templateUrl: '.\/app.component.html' })  export class AppComponent { \u00a0\u00a0users = []    \u00a0\u00a0constructor(private usersResource: UsersResource) {}  \u00a0\u00a0loadUsers() { \u00a0\u00a0\u00a0\u00a0this.usersResource.query() \u00a0\u00a0\u00a0\u00a0this.usersResource.actions.subscribe(action => { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (action.type === 'query') { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.users = action.payload \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \u00a0\u00a0\u00a0\u00a0});  \u00a0\u00a0\u00a0\u00a0\/\/ \u0438\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0441\u0430\u0445\u0430\u0440 \u00a0\u00a0\u00a0\u00a0this.usersResource.action('query').subscribe(payload => { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.users = payload \u00a0\u00a0\u00a0\u00a0});  \u00a0\u00a0\u00a0\u00a0\/\/ \u0438 \u0434\u0430\u0436\u0435 \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u0441\u043b\u0430\u0442\u044c \u0441\u0432\u043e\u0451 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0432 \u043f\u043e\u0442\u043e\u043a \u0440\u0435\u0441\u0443\u0440\u0441\u0430 \u00a0\u00a0\u00a0\u00a0this.usersResource.action('query').next([]) \u00a0\u00a0} }<\/code><\/pre>\n
\u0417\u0434\u0435\u0441\u044c, \u043a\u0430\u043a \u0438 \u0437\u0430\u0432\u0435\u0449\u0430\u043b\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0410\u043d\u0433\u0443\u043b\u044f\u0440\u0430, \u043c\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u0441 http-\u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c\u0438 \u043a\u0430\u043a \u0441 \u043f\u043e\u0442\u043e\u043a\u0430\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u0445. \u041b\u0435\u0433\u043a\u043e \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u0443\u0435\u043c \u0438\u0445 \u0441 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c\u0438 \u0444\u043e\u0440\u043c\u0430\u043c\u0438 \u0438 \u043c\u043e\u0436\u0435\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e RxJS \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u0432 \u0440\u0430\u0437\u0440\u0443\u043b\u0438\u0442\u044c \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044e \u043b\u044e\u0431\u043e\u0439 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438.<\/p>\n
\u0414\u043e \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0441 http-\u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c\u0438, \u043d\u043e \u0440\u0430\u0437 \u0443\u0436 \u044d\u0442\u0430 \u0432\u0443\u043d\u0434\u0435\u0440\u0432\u0430\u0444\u043b\u044f \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0430 \u043d\u0430 \u0448\u0438\u043d\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0439, \u0442\u043e \u043a\u0442\u043e \u043c\u0435\u0448\u0430\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0412\u0435\u0431\u0441\u043e\u043a\u0435\u0442\u0430\u043c\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440? \u041f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e, \u043d\u0438\u043a\u0442\u043e. \u041c\u044b \u0441\u0430\u043c\u0438 \u043c\u043e\u0436\u0435\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u0430\u043a\u0438\u0435 \u0443\u0433\u043e\u0434\u043d\u043e \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u044b-\u0430\u0434\u0430\u043f\u0442\u0435\u0440\u044b. \u0418\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438 \u043f\u043e\u043c\u0438\u043c\u043e HttpConfig<\/code> \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b WebSocketConfig<\/code>, SocketIoConfig<\/code> \u0438 LocalStorageConfig<\/code>, \u0442\u0430\u043a \u0447\u0442\u043e \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0447\u0430\u0442. \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u044b\u0439 \u0440\u0435\u0441\u0443\u0440\u0441:<\/p>\n
import { Injectable } from '@angular\/core'; import { ReactiveResource } from '@angular-resource\/core'; import { HttpConfig, Get } from '@angular-resource\/http'; import { SocketIoConfig, CloseSocketIo, OpenSocketIo, SendSocketIoEvent } from '@angular-resource\/socket-io';  @Injectable() @HttpConfig({ \u00a0\u00a0host: 'http:\/\/127.0.0.1:3000', \u00a0\u00a0url: '\/messages\/:id' }) @SocketIoConfig({ \u00a0\u00a0url: 'ws:\/\/127.0.0.1:3000' }) export class ChatResource extends ReactiveResource { \u00a0\u00a0getMessages = Get() \u00a0\u00a0connect = OpenSocketIo() \u00a0\u00a0disconnect = CloseSocketIo() \u00a0\u00a0sendMessage = SendSocketIoEvent('sendMessage') }<\/code><\/pre>\n
\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u0440\u0438\u043c\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0432\u0438\u0434:<\/p>\n
import { Component } from '@angular\/core'; import { ChatResource } from '.\/_resources\/chat.resource';  @Component({ \u00a0\u00a0selector: 'app-root', \u00a0\u00a0templateUrl: '.\/app.component.html' }) export class AppComponent { \u00a0\u00a0messages = []    constructor(private chatResource: ChatResource) {   \u00a0\u00a0this.chatResource.getMessages()   \u00a0\u00a0\u00a0\u00a0.then(messages => {   \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.messages = messages   \u00a0\u00a0\u00a0\u00a0})   \u00a0\u00a0\u00a0\u00a0.catch(error => {   \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log('HTTP error', error)   \u00a0\u00a0\u00a0\u00a0})    \u00a0\u00a0this.chatResource.connect()   \u00a0\u00a0\u00a0\u00a0.catch(error => {   \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log('WS error', error)   \u00a0\u00a0\u00a0\u00a0})      \/\/ \u041f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u043c, \u0447\u0442\u043e SocketIO-\u0441\u0435\u0440\u0432\u0435\u0440 \u0448\u043b\u0435\u0442 \u0432\u0441\u0435 \u043d\u043e\u0432\u044b\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f (\u0432 \u0442.\u0447. \u043d\u0430\u0448\u0435) \u0432 \u0441\u043e\u0431\u044b\u0442\u0438\u0438 'newMessage'    \u00a0\u00a0this.chatResource.action('newMessage').subscribe(message => {   \u00a0\u00a0\u00a0\u00a0this.messages.push(message)   \u00a0\u00a0})   }    sendMessage() {   \u00a0\u00a0this.chatResource.sendMessage({ text: 'My message' })   \u00a0\u00a0\u00a0\u00a0.then(() => {   \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log('Message was sended by SocketIO')   \u00a0\u00a0\u00a0\u00a0});   } }<\/code><\/pre>\n
\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u0438\u0441\u0442\u043e\u0440\u0438\u044e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 HTTP-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u043c, \u0430 \u0434\u0430\u043b\u044c\u0448\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u043c \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c \u0447\u0435\u0440\u0435\u0437 \u0412\u0435\u0431\u0441\u043e\u043a\u0435\u0442\u044b \u0438 \u0432\u0441\u0435 \u044d\u0442\u043e \u0432 \u043e\u0434\u043d\u043e\u043c \u0440\u0435\u0441\u0443\u0440\u0441\u0435.\u00a0<\/p>\n
\u0412 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0435 \u0441\u0442\u0430\u0442\u044c\u0438 \u0431\u044b\u043b\u043e \u0447\u0442\u043e-\u0442\u043e \u043f\u0440\u043e NgRX<\/h2>\n
\u0418 \u0440\u0430\u0437 \u0443\u0436 \u043f\u043e\u0448\u043b\u0430 \u0442\u0430\u043a\u0430\u044f \u043f\u044c\u044f\u043d\u043a\u0430, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043a\u0430\u043a\u043e\u0439-\u043d\u0438\u0431\u0443\u0434\u044c \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u044b\u0439 \u0441\u0447\u0435\u0442\u0447\u0438\u043a (\u0434\u043e\u0433\u0430\u0434\u044b\u0432\u0430\u0435\u0442\u0435\u0441\u044c \u043a \u0447\u0435\u043c\u0443 \u043a\u043b\u043e\u043d\u044e?). \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0435\u0441\u0442\u044c \u043e\u0441\u043e\u0431\u044b\u0439 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440 StateConfig<\/code>. \u041c\u044b \u0436\u0435 \u0445\u0440\u0430\u043d\u0438\u043c \u0432\u043d\u0443\u0442\u0440\u0438 ReplaySubject<\/code> \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u0430, \u043f\u043e\u0447\u0435\u043c\u0443 \u0431\u044b \u044d\u0442\u043e \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c?<\/p>\n
import { Injectable } from '@angular\/core'; import { ReactiveResource, StateConfig } from '@angular-resource\/core';  @Injectable() @StateConfig({ \u00a0\u00a0initialState: { \u00a0\u00a0\u00a0\u00a0counter: 0, \u00a0\u00a0\u00a0\u00a0updatedAt: 0 \u00a0\u00a0}, \u00a0\u00a0updateState: (state, action) => { \u00a0\u00a0\u00a0\u00a0\/\/ Reducer \u00a0\u00a0\u00a0\u00a0if (action.error) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return state \u00a0\u00a0\u00a0\u00a0} \u00a0\u00a0\u00a0\u00a0switch (action.type) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case 'increase': \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return {...state, counter: state.counter + action.payload}          \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case 'decrease': \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return {...state, counter: state.counter - action.payload}  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case 'updateAt': \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return {...state, updatedAt: action.payload}  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0default: \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return state \u00a0\u00a0\u00a0\u00a0} \u00a0\u00a0} })  export class CounterStore extends ReactiveResource {   \/\/ Actions \u00a0\u00a0increase = (num)  => this.action('increase').next(num) \u00a0\u00a0decrease = (num)  => this.action('decrease').next(num) \u00a0\u00a0updateAt = (date) => this.action('updateAt').next(date) }<\/code><\/pre>\n
\u041d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442? \u0414\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440 \u2014 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u0434\u043b\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0440\u0435\u0434\u044c\u044e\u0441\u0435\u0440\u0430, \u043e\u043d \u043d\u0430 \u043f\u0441\u0438\u0445\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u0443\u0440\u043e\u0432\u043d\u0435 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u0447\u0442\u043e \u043d\u0438\u0447\u0435\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0433\u043e \u0442\u0430\u043c \u0433\u043e\u0440\u043e\u0434\u0438\u0442\u044c \u043d\u0435 \u0441\u0442\u043e\u0438\u0442. <\/p>\n
\u0412\u0437\u0433\u043b\u044f\u043d\u0435\u043c \u043d\u0430 \u043a\u043e\u0434 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430:<\/p>\n
import { Injectable } from '@angular\/core'; import { CounterStore } from '.\/_resources\/counter.store';  @Component({   selector: 'app-root',   templateUrl: '.\/app.component.html' }) export class AppComponent { \u00a0\u00a0counter = 0 \u00a0\u00a0updatedAt = 0  \u00a0\u00a0constructor(private counterStore: CounterStore) { \u00a0\u00a0\u00a0\u00a0this.counterStore.state.subscribe(state => { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.counter = state.counter \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.updatedAt = state.updatedAt \u00a0\u00a0\u00a0\u00a0});  \u00a0\u00a0\u00a0\u00a0\/\/ Effects \u00a0\u00a0\u00a0\u00a0this.counterStore.action('increase', 'decrease').subscribe(payload => { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.counterStore.updateAt(Date.now()) \u00a0\u00a0\u00a0\u00a0}); \u00a0\u00a0}  \u00a0\u00a0increase(num) { \u00a0\u00a0\u00a0\u00a0this.counterStore.increase(num) \u00a0\u00a0}  \u00a0\u00a0decrease(num) { \u00a0\u00a0\u00a0\u00a0this.counterStore.decrease(num) \u00a0\u00a0} }<\/code><\/pre>\n
\u0412\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0443\u0436\u0435 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e\u0433\u043e \u043d\u0430\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438 \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0444\u0444\u0435\u043a\u0442\u044b, \u043a\u0430\u043a \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u0432 NgRX. \u0412\u043f\u0440\u043e\u0447\u0435\u043c \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b  \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0438 \u0442\u0430\u043a:<\/p>\n
this.counterStore.state.subscribe(state => {   this.counter = state.counter   this.updatedAt = state.updatedAt   this.counterStore.updateAt(Date.now()) });<\/code><\/pre>\n
\u0418 \u044d\u0442\u043e \u0434\u0430\u0436\u0435 \u043d\u0435 \u0432\u044b\u0437\u043e\u0432\u0435\u0442 \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0439 \u0446\u0438\u043a\u043b (\u0438\u0437-\u0437\u0430 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u0430\u0442\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0442\u0435\u0439\u0442\u0430), \u0442\u0430\u043a \u043a\u0430\u043a \u0435\u0441\u0442\u044c \u0437\u0430\u0449\u0438\u0442\u0430 \u043e\u0442 \u0434\u0443\u0440\u0430\u043a\u0430 \u0438 \u0435\u0441\u043b\u0438 \u0434\u0432\u0435 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435 \u043c\u0438\u043a\u0440\u043e\u0442\u0430\u0441\u043a\u0438 \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432 \u043e\u0434\u043d\u043e\u0439 \u0444\u0430\u0437\u0435 \u0446\u0438\u043a\u043b\u0430, \u0442\u043e \u0432\u0442\u043e\u0440\u0430\u044f \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043e\u0442\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f.<\/p>\n
\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0432\u0441\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438<\/h2>\n
\u0421\u043e\u0431\u0435\u0440\u0435\u043c \u0432 \u043a\u0443\u0447\u0443 \u043d\u0430\u0448\u0438 \u0437\u043d\u0430\u043d\u0438\u044f \u0438 \u043f\u0435\u0440\u0435\u043f\u0438\u0448\u0435\u043c \u0447\u0430\u0442, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0442\u0443\u0434\u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043b\u044e\u0448\u043a\u0438. ChatResource<\/code> \u043f\u0440\u0438\u043c\u0435\u0442 \u0442\u0430\u043a\u043e\u0439 \u0432\u0438\u0434:<\/p>\n
import { Injectable } from '@angular\/core'; import { ReactiveResource, StateConfig } from '@angular-resource\/core'; import { HttpConfig, Get } from '@angular-resource\/http'; import { SocketIoConfig, CloseSocketIo, OpenSocketIo, SendSocketIoEvent } from '@angular-resource\/socket-io';  @Injectable() @HttpConfig({ \u00a0\u00a0host: 'http:\/\/127.0.0.1:3000', \u00a0\u00a0url: '\/messages\/:id' }) @SocketIoConfig({ \u00a0\u00a0url: 'ws:\/\/127.0.0.1:3000' }) @StateConfig({ \u00a0\u00a0initialState: { \u00a0\u00a0\u00a0\u00a0messages: [], \u00a0\u00a0\u00a0\u00a0isLoading: false, \u00a0\u00a0\u00a0\u00a0isError: false \u00a0\u00a0}, \u00a0\u00a0updateState: (state, action) => { \u00a0\u00a0\u00a0\u00a0switch (action.type) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case 'getMessages:start': \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return {...state, isLoading: true}  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case 'getMessages': \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return !action.error \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0? {...state, messages: action.payload, isError: false, isLoading: false} \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0: {...state, <\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-351228","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/351228","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=351228"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/351228\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=351228"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=351228"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=351228"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}