Angular is designed to be modular, an Angular 2 app comprises of several components, which are connected via routing or selectors, these components may have templates attached to it which may display component properties and attach events to interact with the properties
Modules
Angular App comprises of several Modules, a module typically exports something of a purpose. A module is a set of similar utilities that perform a similar task. Typically a module may export a class which we may be imported in other modules. Angular 2 itself ships in large modules, some of them are ‘angular/core‘, ‘angular/router‘ and there are more.
Components
Components are the basic building blocks of an Angular 2 app. A component is typically a type-script class which has a template attached, it usually assembles a screen, ui-element or a route in the application. A component may have child components.
A component has a metadata/ decorator associated which describes the component. Metadata tells angular that the associated TypeScript class is actually to be considered as a component.
Services
A good Angular 2 application is one in which specific tasks are assigned to different services. A component may consume these services to perform these tasks. Typically a component should only deal with the user experience and the display of properties and use services to perform heavy behind the scenes operations. A service must be injected in to the controller before it can be used. This is done via dependency injection.
Dependency Injection
One of the key features of Angular is the dependency injection. Components need to use services to perform tasks, and these services are injected into the component via the injector. The injector provides the instance of the service, so that it can be used in the component. The idea behind dependency injection is to separate out concerns into smaller units and make components depend on these units to perform specific tasks, making your application more manageable and easy to unit test.
Directives
Directives are everywhere in Angular 2. A directive is a TypeScript Class with a metadata. Directives may or may not have a template attached. Component is an example of a directive with a template. There are two kinds of directives in Angular 2, structural and attribute directives. Structural directives modify the structure or layout of the DOM. Attribute directives alter the behavior of the elements. Some of the examples of pre-built directives are ngFor, ngIf, ngSwitch, ngModel etc.
Comments
Post a Comment