Angular hero editor
Study documents: https://angular.cn/tutorial/toh-pt1
@Component a decorative function, a component that is used to specify the required metadata Angular.
ngOnInit () is a life-cycle hook, Angular When you have created components will soon call ngOnInit (), here is a good place to put initialization logic.
Pipeline is a good way to format strings, amount, date, and other display data. Angular released some built-in pipes, but you can also create your own pipeline.
All features are in the same assembly, maintenance will become unavailable after the application of "grow up." You want to split the large components into smaller sub-assemblies, each sub-assemblies should concentrate on a particular task or workflow.
[Hero] = "selectedHero" Angular property is binding syntax.
This is a one-way data binding.
With @Input decorator to make the hero attributes can be bound to an external HeroesComponent in.
Why do you need services?
Components should not get or save data directly, they should not know whether the show false data. They should focus on the present data, data access and delegate responsibilities to a service.
Service is a good way to share information between multiple "each other do not know" category.
@Injectable () service
Note that this new service introduced Injectable symbol Angular, and to the service class adds @Injectable () decorator.
It is this class is marked as one of the participants dependency injection system. HeroService class will provide an injection of service, and it can also rely on their own to be injected.
@Injectable () decorator will accept the service metadata objects, like @Component () as the role of the component class.
Provides (provide) HeroService
You must first register a service provider to make available HeroService dependency injection system, Angular order to inject it into HeroesComponent in.
Observable object version of HeroService
Observable is a key class of RxJS.