A brief discussion on Component/Service in Angular

This article will introduce to you the Component/Service in Angular. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

About Angular Component

css style scope, Shadow DOM

Shadow DOM is part of the HTML specification, which allows developers to encapsulate their own HTML markup, CSS styles and JavaScript. When creating a style Component, it can be enabled through settings. [Related tutorial recommendations: "angular Tutorial"]

@Component({
  selector: 'my-app',
  template: `
    <h1>Hello World!</h1>
    <span class="red">Shadow DOM Rocks!</span>
  `,
  styles: [`
    :host {
      display: block;
      border: 1px solid black;
    }
    h1 {
      color: blue;
    }
    .red {
      background-color: red;
    }
  `],
  encapsulation: ViewEncapsulation.ShadowDom
})
class MyApp {
}

ViewEncapsulation Optional value:

• ViewEncapsulation.Emulated - Encapsulated through the style packaging mechanism provided by Angular Components, so that the style of the component is not affected by external influences. This is Angular's default setting.
• ViewEncapsulation.Native - Use native Shadow DOM features. But you need to consider whether the browser supports it.
• ViewEncapsulation.None - No Shadow DOM, and no style packaging

About Angular Service

Service (Service) acts as data Access, logical processing functions. Separate components and services to improve modularity and reusability.

Singleton service (singleton)

• Use Angular CLI to create a service. A singleton service will be created by default;
• Declare the providedIn attribute of @Injectable() as root, which is a singleton service.
• Singleton service (singleton) object can be used to temporarily store global variables. For complex global variables, it is recommended to use state management component (state management - Ngrx).

forRoot() mode

If multiple calling modules define providers (services) at the same time, then in multiple feature modules When this module is loaded, these services will be registered in multiple places. This results in multiple instances of the service, and the service no longer behaves like a singleton. There are several ways to prevent this:

• Use providedIn syntax instead of registering the service in the module.
• Separate services into their own modules.
• Define the forRoot() and forChild() methods respectively in the module.

For more programming-related knowledge, please visit: Programming Video! !

The above is the detailed content of A brief discussion on Component/Service in Angular. For more information, please follow other related articles on the PHP Chinese website!