YouTip

An Angular 2 application is primarily composed of the following 8 parts: * 1. Modules * 2. Components * 3. Templates * 4. Metadata * 5. Data Binding * 6. Directives * 7. Services * 8. Dependency Injection The diagram below illustrates how each part interacts: !(#) The templates in the diagram consist of HTML syntax extended by Angular. The component classes manage these templates. Application logic is handled through services, which are then packaged with components within modules. Finally, the application is started by bootstrapping the root module. Next, we will analyze each of the 8 parts separately: * * * ## Modules A module consists of a block of code that can perform a simple task. Angular applications are modular and have their own module system: NgModules. Every Angular application should have at least one module (the root module), typically named: `AppModule`. An Angular module is a class decorated with `@NgModule`, which accepts a metadata object describing the module's properties. Some important properties are: * **declarations** - View classes that belong to this module. Angular has three types of view classes: components, directives, and pipes. * **exports** - A subset of declarations that can be used in the component templates of other modules. * **modules** - Other modules whose exported classes are needed by component templates in this module. * **providers** - Creators of services. This module adds them to the global service table, making them accessible in any part of the application. * **bootstrap** - The main view of the application, called the root component, which hosts all other application views. Only the root module needs to set the `bootstrap` property. A minimal root module: ## app/app.module.ts file: ```typescript import{NgModule}from'@angular/core'; import{BrowserModule}from'@angular/platform-browser'; @NgModule({ imports: , providers: , declarations: , exports: , bootstrap: }) export class AppModule{} We then start the application by bootstrapping the root module. During development, this is typically done in the `main.ts` file to bootstrap `AppModule`, as shown below: ## app/main.ts file: ```typescript import{platformBrowserDynamic}from'@angular/platform-browser-dynamic'; import{AppModule}from'./app.module'; platformBrowserDynamic().bootstrapModule(AppModule); * * * ## Components A component is a control class for a template that handles the view part of the application and its logic. Components are the foundation and core of an Angular application and can be used throughout the entire application. A component knows how to render itself and configure dependency injection. A component interacts with its view through an API consisting of properties and methods. Creating an Angular component involves three steps: * Import the `Component` decorator from `@angular/core`. * Create a plain class and decorate it with `@Component`. * In `@Component`, set the `selector` (a custom tag) and the `template`. * * * ## Templates The default language for Angular templates is HTML. We can define a component's view by using a template to tell Angular how to display the component. Here is a simple example: In Angular, double curly braces are used by default as interpolation syntax. The value between the braces is typically a variable name of a component property. * * * ## Metadata Metadata tells Angular how to process a class. Consider a scenario where we have a component called `Component`, which is a class. It remains just a class until we tell Angular that it is a component. You can attach metadata to this class to inform Angular that `Component` is a component. In TypeScript, we use decorators to attach metadata. ### Example ```typescript @Component({ selector: 'mylist', template: '

', directives: }) export class ListComponent{...} The `@Component` decorator accepts a configuration object and marks the class that follows it as a component class. Angular will create and display the component and its view based on this information. Explanation of configuration items in `@Component`: * **selector** - A CSS selector that tells Angular to look for a `` tag in the parent HTML, create the component, and insert it into that tag. * **templateUrl** - The address of the component's HTML template. * **directives** - An array containing the components or directives that this template depends on. * **providers** - An array containing the dependency injection providers for the services that the component depends on. * * * ## Data Binding Data binding provides a simple and consistent way for applications to display data and interact with it. It is a mechanism for managing values within an application. Through this mechanism, values can be read from and written to HTML, making data read/write operations and data persistence simpler and faster. As shown in the diagram, there are four forms of data binding syntax. Each form has a direction—coming from the DOM, going to the DOM, or two-way, as indicated by the arrows in the image. !(#) * **Interpolation**: Display component values within HTML tags.

{{title}}

* **Property Binding**: Set an element's property to the value of a property in the component. * **Event Binding**: Trigger when a component method is clicked. Save * **Two-way Binding**: Using Angular's `NgModel` directive makes two-way binding more convenient. * * * ## Directives Angular templates are dynamic. When Angular renders them, it modifies the DOM according to directives. A directive is a class with "directive metadata." In TypeScript, metadata is attached to a class using the `@Directive` decorator. Angular includes the following three types of directives: * **Attribute Directives**: Directives used in the form of an element's attributes. * **Structural Directives**: Used to change the DOM tree structure. * **Components**: As an important subclass of directives, a component can essentially be seen as a directive with a template.

`*ngFor` tells Angular to generate an `

` tag for each item in the `sites` list. `*ngIf` indicates that the `SiteDetail` component is only included if the selected item exists. * * * ## Services In Angular 2, a service is an independent module that encapsulates a specific functionality and can be used by others through injection. Services come in many forms, including values, functions, and features required by the application. For example, when duplicate code appears in multiple components, extracting the duplicate code into a service enables code reuse. Here are some common services: * Logging service * Data service * Message bus * Tax calculator * Application configuration The following example is a logging service that logs messages to the browser's console: ```typescript export class Logger { log(msg: any) { console.log(msg); } error(msg: any) { console.error(msg); } warn(msg: any) { console.warn(msg); } } * * * ## Dependency Injection > Inversion of Control (IoC) is a design principle in object-oriented programming that can reduce the coupling between computer code. The most common method is called Dependency Injection (DI), and another method is called "Dependency Lookup." > > > Through IoC, when an object is created, an external entity that regulates all objects in the system passes references of the dependent objects to it. In other words, dependencies are injected into the object. > > > In traditional development patterns, the caller is responsible for managing all object dependencies. Circular dependencies have always been a nightmare. In the dependency injection pattern, this management responsibility is handed over to the injector, which is responsible for replacing dependency objects at runtime, not at compile time. This characteristic of IoC and runtime injection is the essence of dependency injection. Angular can determine which services a component needs by examining the parameter types in its constructor. For example, the `SiteListComponent` component's constructor requires a `SiteService`: ```typescript constructor(private service: SiteService) { } When Angular creates a component, it first looks for an injector for the services required by the component. An injector is a container that maintains service instances and stores previously created instances. If the container does not yet have the requested service instance, the injector creates one, adds it to the container, and then returns that service to Angular. Once all services are resolved and returned, Angular calls the component's constructor with these services as parameters. This is dependency injection.