1. An overview of the

Angular is a framework for building client applications using HTML, CSS, and TypeScript for single-page applications.

Angular is a heavyweight framework that integrates a number of functional modules right out of the box.

Angular is designed for large-scale application development and provides clean, loosely coupled code organization that makes applications cleaner and easier to maintain.

Presents Chinese website

2. Architecture preview

2.1 module

An Angular app is made up of modules, not ESModules, but ngModules, Angular modules.

An NgModule is a collection of related functions that focus on an application domain. It is a way for an application to organize its code structure by associating components with a set of related code.

There must be at least one root module in an Angular application that launches the application.

An NgModule can import functionality from other NgModules if the target NgModule exports the functionality.

An NgModule is a class decorated with an NgModule decorator function.

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

@NgModule({
  imports: [
    BrowserModule
  ]
})
export class AppModule {}Copy the code

2.2 components

A component describes the user interface. It consists of three parts, a component class, a component template, and a component style, which can be integrated into a component class file or three different files.

Component classes are used to write interface logic that is directly related to a component. Component templates and component styles are associated with component classes.

Component templates are used to write the HTML structure of the component and associate the application data with the DOM through data binding tags.

Component styles are used to write the appearance of a component’s component. Component styles can be CSS, LESS, SCSS, or Stylus

There must be at least one root component in an Angular application that launches the application.

Component classes are classes decorated with Component decorator functions.

import { Component } from "@angular/core"

@Component({
  selector: "app-root".templateUrl: "./app.component.html".styleUrls: ["./app.component.css"]})export class AppComponent {
  title = "angular-test"
}
Copy the code

Ngmodules provide a compilation context for components.

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}Copy the code

2.3 services

Services are used to place data or logic that is not relevant to a particular component and that you want to share across components.

The purpose of a service is to decouple the code in a component class and keep it clean.

The service is a class decorated with the Injectable decorator.

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

@Injectable({})
export class AppService {}Copy the code

When using a service, you do not need to create a new service instance object in the component class to obtain the method provided in the service.

import { AppService } from "./AppService"

export class AppComponent {
  let appService = new AppService()
}
Copy the code

Instance objects of services are created and maintained by the dependency injection system built into the Angular framework. Services are dependencies that need to be injected into components.

You need to get the instance object of the service in the component via arguments to the constructor constructor.

There are many services in an Angular application, and a component can’t use all of them. If a component uses the last service instance object, do you need to write all of the arguments? This is obviously unreasonable.

Fetching a service instance object in a component combines TypeScript types as follows.

import { AppService } from "./AppService"

export class AppComponent {
  constructor (
    private appService: AppService
  ) {}}Copy the code

Angular passes the service instance object you want to use based on the type of service you specify, thus solving the argument order problem.

Services are designed as singletons in Angular, which is why they can be used to share data and logic between components.