黎 飞

黎 飞

1659567600

在 Angular 中管理多个加载状态

在开发 Angular 应用程序时,您可能必须执行 HTTP 请求。无论是从单独的后端应用程序还是外部 api 获取数据,您的应用程序都可能不得不在某个时候等待响应。

在 Web 应用程序中正确处理 HTTP 请求的状态是一个常见的用例。在大型代码库中,它很快成为架构的关键问题。这件事比 Angular 是一个冗长的框架更重要。

在这种情况下,您对此问题的解决方案必须是:

  • 足够简单,让您的代码库保持可读性
  • 可重复使用,足以让您的代码库保持健全,并在创建新页面或组件时节省时间
  • 足以适应应用程序的不同用例

本文旨在从这三个方面介绍 Angular 中处理请求加载或错误的几种方法。

为什么我们应该关心显示错误消息和加载器

在这方面遇到困难的第一个主要原因是因为我们关心我们的用户。我们希望他们能够轻松理解应用程序上发生的事情,并且我们不希望他们在等待执行异步操作时在按钮上单击十次。

因此,当我们执行异步操作时,尽可能多地给他们反馈是很重要的。

RxJS

Angular 异步执行管理本质上依赖于反应式编程,使用 RxJS。因此,这里介绍的每个模式都涉及这个库。

在本文中,我将提到ObservablesBehaviorSubjects如果您不熟悉响应式编程,尤其是这两个对象,我邀请您查看该库设计得非常好的文档!

使用组件状态管理一个请求状态

原则

跟踪您的请求的第一个也是最简单的方法是直接在您的组件中查看它。

假设我们构建了一个用于显示猫品种可爱小图片的 api。

我们的组件声明了两个布尔属性来存储请求的当前状态(加载和错误),这些属性在整个数据获取操作中更新:

它在组件中的样子

@Component({
  selector: 'app-fetch-breeds',
  templateUrl: './fetch-breeds.component.html',
})
export class FetchBreedsComponent {
  constructor(private myService: MyService) {}

  loading = false;
  error = false;
  errorMessage = '';

  fetchBreeds() {
    // Reset request error state data
    this.error = false;
    this.errorMessage = '';

    // Set the component in a loading state
    this.loading = true;

    // Start the fetch event pipeline involving :
    this.myService.fetchBreeds().pipe(
      // A handler which is called when our service triggers an error and
      // which is dedicated to setting the error in a corresponding state
      catchError(err => {
        this.error = true;
        this.errorMessage = err.message; // Or whatever error message you like
      })
      // A callback which is always called whether an error has been triggered
      // or not.
      // It is responsible for setting the component in a non-loading state.
      finalize(() => {
        this.loading = false;
      })
    )
    .subscribe();
  }
}
<div>
  <!-- If we are fetching the data, we display a loader -->
  <app-loader *ngIf="loading"></app-loader>
  <button (click)="fetchBreeds()">See these magnificent cats!</button>
  <!-- If there is an error (and we are done waiting for a response), we display it -->
  <app-error-message *ngIf="!loading && error">
    {{ errorMessage }}
  </app-error-message>
</div>

管理服务中的请求状态

为什么要将此逻辑委托给服务?

在 Angular 应用程序中使用服务提供了许多优势(DRY 原则、高效测试等)。在我们的例子中,它还允许我们在组件/其他服务之间持久化和共享数据。

它还允许抽象:您的组件专用于 UI 显示,而服务处理组件的任何内部复杂逻辑。

案例 1 - 状态在多个组件之间共享

假设我们有两个组件,提供基于猫实体的两个功能:在一个页面上,我们可以看到品种的图片,在另一页上,我们可以看到有关这些品种的一些技术细节。

用于处理服务中的加载状态的架构示例

这种架构涉及负责发送请求、捕获错误和处理介于两者之间的加载状态的逻辑的重复。

这个逻辑可以移动到一个专门的服务中,这将暴露一个用于加载信息的 observable 和一个用于错误的 observable:

@Injectable()
export class CatBreedsService {
    constructor(private http: HttpClient) {}

    private _loadingSubject = new BehaviorSubject<boolean>(false)
    isLoading$: this._loadingSubject.asObservable();

    // We expose observables because we want our components to have a read access
    // but no write access to the information

    private _errorSubject = new BehaviorSubject<string | null>(null);
    erros$: this._errorSubject.asObservable();

    fetchBreeds(): Observable<CatBreed[]> {
        this._loadingSubject.next(true);
        this._errorSubject.next(null);
        return this.http.get('/cat-breed').pipe(
            catchError(err => {
                this._errorSubject.next(err);
                return of([]);
            }),
            finalize(() => this._loadingSubject.next(false))
        )
    }
}

现在,组件只需要从服务中调用 fetch 助手,关于实体的加载/错误状态信息将在整个应用程序中共享。

@Component({
  selector: "app-list-cat-breeds",
  templateUrl: "./list-cat-breeds.component.html",
})
export class ListCatBreedsComponent implements OnInit {
  constructor(private catBreedsService: CatBreedsService) {}

  isLoading$ = this.catBreedsService.loading$;
  hasErrors$ = this.catBreedsService.errors$;

  ngOnInit() {
    this.catBreedsService.fetchBreeds.subscribe();
  }
}

管理服务中的多个请求状态

案例 2 - 并发问题

示例用例:自动完成输入的多次出现

您可能还会遇到必须在多个上下文中执行相同操作的请求的情况:

例如,假设我们有一个表单,其中每个输入动态获取更改时的自动建议数据,并在执行更新时显示一个加载器。如果我们创建唯一的主题来处理这个请求的状态,就会出现并发问题。

在我们的上下文中,一个具体的例子是我们可以将品种归因于猫图片的页面。

在服务中处理多个加载状态的架构示例

副作用的问题

在这种情况下,由于每个输入只有一个加载主题,因此任何输入的更改都会将所有其他输入置于加载状态或错误状态。

可观察到的建议也是如此。它会在您的应用程序中触发不必要的渲染,这可能会对应用程序的性能产生灾难性的后果。

副作用意味着您必须将此组件分解为多个部分

可以通过一个复杂的状态来处理这个问题,包括一个可观察的加载和一个可观察的错误。下面的代码显示了这样一个实现:

export interface InputState {
  loading$: BehaviorSubject<boolean>;
  error$: BehaviorSubject<string >;
}

@Component({
  selector: 'app-cat-breed-form',
  templateUrl: './cat-breed-form.component.html',
})
export class CatBreedFormComponent implements OnInit {
  inputs = ['input1', 'input2', 'input3'];
  inputsState: { [key: string]: InputState } = {};

  ngOnInit() {
    this.inputs.forEach(input => {
      this.inputsState[input] = {
        loading$: new BehaviorSubject(false),
        error$: new BehaviorSubject<string | null>(null)
      };
    }, {});
  }

  setLoading(inputId: string, value: boolean) {
    this.inputsState[inputId].loading$.next(value)
  }

  setError(inputId: string, value: string | null) {
    this.inputsState[inputId].error$.next(value)
  }

  getLoading(inputId: string) {
    return this.inputsState[inputId].loading$.asObservable()
  }

  getError(inputId: string) {
    return this.inputsState[inputId].error$.asObservable()
  }

  updateField(inputId: string) {
    this.setLoading(inputId, true)
    this.project$.pipe(
      take(1),
      catchError(err => {
        this.setError(inputId, err)
      }),
      finalize(() => this.setLoading(inputId, err))
    ).subscribe(() => { // do your stuff })}
  }
}

几点说明:

  • 组件逻辑越来越复杂。
  • 您不能将获取逻辑驱逐到服务中,或者至少您必须从组件内管理加载/错误状态。
  • 为了有一个可读的模板,可能必须实现getters/setters

从而增加了写在组件ts文件中的代码。

把它分解成更简单的组件,在这种情况下意味着实现一个字段组件,我们回到第一种没有并发的情况。

我们可以创建一个公开注册功能的专用服务:

  • 在输入中接受一个 id
  • 创建一个“更改”事件触发搜索的 formControl
  • 返回 formControl 和相关的加载、错误和自动完成建议 observables。
@Injectable()
export class SearchService implements OnDestroy {
  constructor(private http: HttpClient) {}

  subscriptions: Subscription[] = [];

  registerControl<T>(id: string, initialvalue: T) {
    const control = new FormControl(initialvalue);
    const _loadingSubject = new BehaviorSubject<boolean>(false);
    const _errorsSubject = new BehaviorSubject<string | null>(null);
    const _suggestedSubject = new BehaviorSubject<T[]>([]);
    this.subscriptions.push(
      control.valueChanges
        .pipe(
          switchMap((query: string | null) => {
            if (query !== null && query.length > 0) {
              return this.searchOnQuery<T[]>(query).pipe(
                catchError(err => {
                  _errorsSubject.next(err);
                  return of([]);
                }),
                finalize(() => _loadingSubject.next(false))
              );
            }
            return of([]);
          }),
          tap(suggestions => _suggestedSubject.next(suggestions))
        )
        .subscribe()
    );

    return [
	control,
	_loadingSubject.asObservable(),
	_errorsSubject.asObservable(),
	_suggestedSubject.asObservable()
    ];
  }

  private searchOnQuery<T>(query: string) {
    return this.http.get<T>('/search', {
      params: {
        query
      }
    });
  }

  ngOnDestroy() {
    this.subscriptions.forEach(sub => sub.unsubscribe());
  }
}

现在我们只需要在这个服务中注册任何新的输入:

@Component({
  selector: 'app-cat-breed-autocomplete-input',
  templateUrl: './cat-breed-autocomplete.component.html',
  styleUrls: ['./cat-breed-autocomplete.component.scss']
})
export class CatBreedAutocompleteInput implements OnInit {
  @Input() initialValue: Entity;
  @Input() autocompleteId: string;

  control: FormControl = new FormControl();
  loading$: Observable<boolean> = of(false);
  error$: Observable<boolean> = of(null);
  suggestions$: Observable<boolean> = of([]);

  constructor(private searchService: SearchService) {}

  ngOnInit() {
    const [control, loading$, error$, suggestions$] = this.searchService.register<CatBreed>(
      this.autocompleteId,
      this.initialValue
    )
    this.control = control;
    this.loading$ = loading$;
    this.error$: error$;
    this.suggestions$ = suggestions$;
  }
}

这 4 个 observables 现在可以在模板中使用,并且可以与异步管道一起使用。

这允许每个输入独立运行,因为它们通过FormControl API拥有自己的事件管理系统

结论

在本文中,我们看到了使用 RxJS 处理请求的加载状态的两种不同方法,以及如何将其合并到您的 Angular 架构中。

在一个组件中只处理一个加载器,可以在组件中实现 UI 逻辑。同时使用多个加载器,事情变得很容易变得混乱,我们看到了如何在多个自动完成输入的情况下处理这种新的复杂性。

来源:https ://blog.theodo.com/2021/01/managing-requests-loading-state-angular/

 #angular #rxjs 

What is GEEK

Buddha Community

在 Angular 中管理多个加载状态
Christa  Stehr

Christa Stehr

1598940617

Install Angular - Angular Environment Setup Process

Angular is a TypeScript based framework that works in synchronization with HTML, CSS, and JavaScript. To work with angular, domain knowledge of these 3 is required.

  1. Installing Node.js and npm
  2. Installing Angular CLI
  3. Creating workspace
  4. Deploying your First App

In this article, you will get to know about the Angular Environment setup process. After reading this article, you will be able to install, setup, create, and launch your own application in Angular. So let’s start!!!

Angular environment setup

Install Angular in Easy Steps

For Installing Angular on your Machine, there are 2 prerequisites:

  • Node.js
  • npm Package Manager
Node.js

First you need to have Node.js installed as Angular require current, active LTS or maintenance LTS version of Node.js

Download and Install Node.js version suitable for your machine’s operating system.

Npm Package Manager

Angular, Angular CLI and Angular applications are dependent on npm packages. By installing Node.js, you have automatically installed the npm Package manager which will be the base for installing angular in your system. To check the presence of npm client and Angular version check of npm client, run this command:

  1. npm -v

Installing Angular CLI

  • Open Terminal/Command Prompt
  • To install Angular CLI, run the below command:
  1. npm install -g @angular/cli

installing angular CLI

· After executing the command, Angular CLI will get installed within some time. You can check it using the following command

  1. ng --version

Workspace Creation

Now as your Angular CLI is installed, you need to create a workspace to work upon your application. Methods for it are:

  • Using CLI
  • Using Visual Studio Code
1. Using CLI

To create a workspace:

  • Navigate to the desired directory where you want to create your workspace using cd command in the Terminal/Command prompt
  • Then in the directory write this command on your terminal and provide the name of the app which you want to create. In my case I have mentioned DataFlair:
  1. Ng new YourAppName

create angular workspace

  • After running this command, it will prompt you to select from various options about the CSS and other functionalities.

angular CSS options

  • To leave everything to default, simply press the Enter or the Return key.

angular setup

#angular tutorials #angular cli install #angular environment setup #angular version check #download angular #install angular #install angular cli

Roberta  Ward

Roberta Ward

1593184320

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular.

Angular is a Typescript-based open-source front-end web application platform. The Angular Team at Google and a community of individuals and corporations lead it. Angular lets you extend HTML’s syntax to express your apps’ components clearly. The angular resolves challenges while developing a single page and cross-platform applications. So, here the meaning of the single-page applications in angular is that the index.html file serves the app. And, the index.html file links other files to it.

We build angular applications with basic concepts which are NgModules. It provides a compilation context for components. At the beginning of an angular project, the command-line interface provides a built-in component which is the root component. But, NgModule can add a number of additional components. These can be created through a template or loaded from a router. This is what a compilation context about.

What is a Component in Angular?

Components are key features in Angular. It controls a patch of the screen called a view. A couple of components that we create on our own helps to build a whole application. In the end, the root component or the app component holds our entire application. The component has its business logic that it does to support the view inside the class. The class interacts with the view through an API of properties and methods. All the components added by us in the application are not linked to the index.html. But, they link to the app.component.html through the selectors. A component can be a component and not only a typescript class by adding a decorator @Component. Then, for further access, a class can import it. The decorator contains some metadata like selector, template, and style. Here’s an example of how a component decorator looks like:

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

Role of App Module

Modules are the package of functionalities of our app. It gives Angular the information about which features does my app has and what feature it uses. It is an empty Typescript class, but we transform it by adding a decorator @NgModule. So, we have four properties that we set up on the object pass to @NgModule. The four properties are declarations, imports, providers, and bootstrap. All the built-in new components add up to the declarations array in @NgModule.

@NgModule({
declarations: [
  AppComponent,
],
imports: [
  BrowserModule,
  HttpClientModule,
  AppRoutingModule,
  FormsModule
],
bootstrap: [AppComponent]
})

What is Data Binding?

Data Binding is the communication between the Typescript code of the component and the template. So, we have different kinds of data binding given below:

  • When there is a requirement to output data from our Typescript code in the HTML template. String interpolation handles this purpose like {{data}} in HTML file. Property Binding is also used for this purpose like [property] = “data”.
  • When we want to trigger any event like clicking a button. Event Binding works while we react to user events like (event) = “expression”.
  • When we can react to user events and output something at the same time. Two-way Binding is used like [(ngModel)] = “data”.

image for understanding data binding

#angular #javascript #tech blogs #user interface (ui) #angular #angular fundamentals #angular tutorial #basics of angular

Ayyaz Zafar

1624138795

Angular Material Autocomplete - Multiple Use Cases covered

Learn How to use Angular Material Autocomplete Suggestions Search Input. I covered multiple use cases.

Please watch this video. I hope this video would be helpful for you to understand it and use it in your projects

Please subscribe: https://www.youtube.com/channel/UCL5nKCmpReJZZMe9_bYR89w

#angular #angular-material #angular-js #autocomplete #angular-material-autocomplete #angular-tutorial

Mansi Gandhi

Mansi Gandhi

1625232772

Why Choose AngularJS framework for the enterprise? | Angular development Company - CMARIX

Although Angular JS has bought headlines over the domain of Web application development, its relevance downtime does not offer any guarantee. Since the JavaScript application is the child of Google, its web features may have some value. Angular JS enables the developer to write most of the code in HTML which brings the application together. Such potentiality and simplicity of the program from the Angular Development Company made Angular popular among JavaScripts.

But the real question arises on the integrity and the safety Angular can provide to the industry. Angular regularly updates its libraries to fix security issues over earlier versions. However, the private and customized Angular versions fall back from the latest versions. These versions might lack the crucial security patches. As a piece of advice, developers can share their improvement requests in the community.

Backward compatibility indicates that the updated versions can function with the outdated versions. Hence, it can simplify the migration procedures to the latest Angular version. Some portions of the AngularJS apps need lazy loading to ease the update and to facilitate the transfer of large projects.

Since AngularJS tends to spoil backward compatibility, it might cause future problems in a program.

The Changing Face of Frameworks

There were several ups and downs in the Web application market over the past. A few years ago, SproutCore ruled the throne as a top framework. However, according to Google search trends, BackboneJS later stole the spotlight which again passed over to EmberJS. But, there remains no comparison for AngularJS.

Birthed by Adam Abrons and Misko Hevery, the Brat Tech engineers in 2009, the Angular Development Company AngularJS took a swift transition to open-source. When Misko Hevery joined Google, he continued to develop Angular JS. The platform began to earn its place by December of 2012 according to Google Trends.

In the year 2015, the potential of AngularJS surpassed other frameworks and offered job placements for many developers. However, AngularJS is not entirely without competition as Facebook came up with ReactJS. Hence, there is a race to show which surpasses the other. But, according to Jeff Schroeder, among the native apps, React elevates mobile app development to higher levels.

Continuous Development in Angular JS

AngularJS has high popularity yet, the developers break backward compatibility on a regular basis. Therefore, the supporters of AngularJS have to learn the AngularJS framework again and again. A critic of AngularJS – Danny Tuppeny, points out that the framework is unstable as it offers short-term support. The developers develop the framework every now and then which can puzzle its users. However, a mobile Web developer by the name of Nene Bodonkor indicates another factor. The frameworks become satisfactory and since they fail to keep up with the market requirements, change becomes crucial.

On the contrary, Yehuda Katz, the creator of EmberJS suggests that the fast-paced lifestyle needs to slow down. Therefore, these constant changes can compel people to reduce and balance their pace. Both, ReactJS from Facebook and EmberJS fight to achieve maximum backward compatibility. Such a characteristic helps these frameworks to come to use for an enterprise. But, AngularJS still has its upper hand over its competitors.

The simple-to-learn design of the Angular Framework with various functions

A legacy system includes few characteristics like old technology that are not compatible with the present systems. These systems do not remain available for purchase from distributors or vendors. These legacy systems cannot update nor patch up by themselves as the developer or vendor stops its maintenance.

The CTO of a mobile and Web app development company Monsoon, Michi Kono agreed on the decisions. But he also commented that the core developers at AngularJS miscommunicated the information. As the AngularJS framework has its uses in Google, they can use the platform for legacy versions and supporting enterprises. According to Michi Kono, AngularJS can promise a safe approach for its use in enterprises. The framework of Angular Development Company USA makes learning simple as it lacks strong convention opinions. The framework is easy for developers to learn and Angular has its applications on other parallel technologies. Vast organizations that have a demand for on-scale development and hiring procedures can use the framework to their advantage.

The low level of Angular appears more as a toolbox than a framework. Such an approach makes Angular useful on a wide variety of utility functions. The developer can use the JavaScript framework to add a single website button through a separate framework. Major companies like Google, Facebook and Microsoft aim to improve JavaScript to match entrepreneur requirements. Since AtScript or the typed JavaScript from Google, will form the backbone of AngularJS 2.0, several developers shall prefer to leverage it.

The Best Fit

AngularJS has several promising aspects for developers from different enterprises to try. But the JavaScript framework undergoes several alterations by its developers. Yet, some of the JavaScript frameworks grab the focus of various users for which they remain in maintenance. Therefore, according to Brian Leroux, the Adobe Web developer, there are two options left. Developers can either imprison themselves within vast rewrites with no forward progress. Or Hire angular developers who can focus their attention to optimize the website architecture. Therefore, developers need to stay up-to-date with the current developments in the web application frameworks like AngularJS.

AngularJS frameworks carry lots of potential in real-time markets. But, the developers need to stay up-to-date to tackle the regular changes in its infrastructure.

#hire angular developers #angular #angular web development #angular development company #angular services #angularjs

Ajay Kapoor

1624334049

Top Angular JS Development Company in India | Angularjs Development

Save up to 60% of development cost and also get state-of-art infrastructure, experienced AngularJS web development team and latest technologies development.

Agile & DevOps Approach for on-time delivery
Strict NDA terms to ensure complete privacy
Flexible engagement models as per your needs
100% money-back guarantee, if not satisfied

Angularjs development company in India

#angular js development company #angular js web development #angular js development company in india #angular development company in india #angular development india #angular development company india