angular core:
Write HTML templates with Angular extension syntax, manage these templates with component classes, add application logic with services, and package and publish components and services with modules.
module/module
NgModule is a decorator function that receives a metadata object describing the properties of the module. Among the most important properties are:
- declarations - declares the view classes owned by this module. Angular has three view classes: components, directives and pipes.
- exports - A subset of declarations that can be used in component templates for other modules.
- imports - other modules where classes are required by the component templates declared by this module.
- providers - The creators of the service and added to the global list of services, available for any part of the application.
- bootstrap - Specifies the application's main view (called the root component), which hosts all other views. Only root modules can set bootstrap properties.
component/component
A component is responsible for controlling a small area on the screen, which we call a view.
- ngOnInit(): The function that will be executed when the page is initialized
- selector: CSS selector that tells Angular to look for
<app-hero-list>the tag in the parent HTML, create and insert the component. - templateUrl: The module-relative address of the component's HTML template, as shown earlier.
- providers - An array of dependency injection providers for services required by the component.
Templates/Templates
Templates exist as HTML and tell Angular how to render components
metadata/metadata
You add metadata to your code so Angular knows what to do. Decalare and the like are metadata
Data binding/Data binding
There are four forms of data binding syntax. Each form has a direction - bound to the DOM, bound from the DOM, and two-way binding
- The {{hero.name}} interpolation expression
<li>displays the value of the component's hero.name property in the label. - The [hero] property binding transfers the value of selectedHero of the parent component HeroListComponent to the hero property of the child component HeroDetailComponent.
- The (click) event binding calls the component's selectHero method when the user clicks on the hero's name.
- Two-way data binding is an important fourth form of binding that combines the functionality of property binding and event binding using the ngModel directive.
In two-way binding, data property values flow from the component to the input box through property binding. User modifications flow back to the component through event bindings, setting the property value to the latest value.
Directives
Directives: Structural directives and attribute directives.
Service/Service
In ngModule providers, use
@Injectable() for importing and dependency injection in components: using Injectable annotations in
services often adds services to the root module so that the same instance of the service is used everywhere.
Dependency injection/Dependency injection
- constructor(private service: HeroService) { }: the process of instantiation
When Angular creates a component, it first requests an injector for the services the component needs.
The injector maintains a container of service instances, holding previously created instances. If the requested service instance is not in the container, the injector creates a service instance, adds it to the container, and returns the service to Angular. When all requested services have been parsed and returned, Angular will call the component's constructor with these services as parameters. This is dependency injection.