Introduction to Angular2
Download as PPTX, PDF•0 likes•2,565 views
The document provides an introduction to Angular 2, highlighting its architecture which includes components, templates, modules, metadata, data binding, directives, services, and dependency injection. It emphasizes Angular 2's advantages over Angular 1, such as improved performance and usability. The document outlines the role of components and decorators in building modular applications and the use of dependency injection to manage services.
Introduction to Angular2
- 1. Introduction to Angular2 - Akshay Rana - Software Consultant (Knoldus Software LLP)
- 2. Agenda ● INTRODUCTION ● ARCHITECTURE ○ Components ○ Templates ○ Modules ○ Metadata ○ Data Binding ○ Directives ○ Services ○ Dependency Injection
- 3. Introduction ● Angular 2 is the next version of Google’s massively popular MVC framework for building complex single page applications in the browser (and beyond). ● A faster, more powerful, cleaner, and easier to use tool than we had with Angular 1.
- 4. ARCHITECTURE
- 5. Components ● A component controls a patch of screen called a view. ● Angular creates, updates, and destroys components as the user moves through the application. Your app can take action at each moment in this lifecycle through optional lifecycle hooks. ● @Component //decorator
- 6. Template ● You define a component's view with its companion template. A template is a form of HTML that tells Angular how to render the component.
- 7. Modules ● Angular apps are modular and Angular has its own modularity system called Angular modules or NgModules. ● Every Angular app has at least one Angular module class, the root module. ● While the root module may be the only module in a small application, most apps have many more feature modules. ● @NgModule //decorator
- 8. Metadata ● Metadata tells Angular how to process a class. ○ Like adding @Component decorator tells the compiler that the class declared below is a Component. ● In TypeScript, you attach metadata by using a decorator. ○ For eg @Component, @NgModule, @Injectable etc.
- 9. Data Binding ● One-way data binding ● Two-way data binding ● Events binding
- 10. Directives ● Angular templates are dynamic. When Angular renders them, it transforms the DOM according to the instructions given by directives. ● Structural Directives ○ Structural directives alter layout by adding, removing, and replacing elements in DOM. ○ *ngFor, *ngIf
- 11. Directives ● Attribute Directives: ○ Attribute directives alter the appearance or behavior of an existing element. ○ ngModel, ngClass, hidden, required
- 12. Services ● Service is a broad category encompassing any value, function, or feature that your application needs.
- 13. Dependency Injection ● Angular uses dependency injection to provide new components with the services they need. ● When Angular creates a component(with dependencies), it first asks an injector for the services that the component requires. ● An injector maintains a container of service instances that it has previously created. If a requested service instance is not in the container, the injector makes one and adds it to the container before returning the service to Angular.
- 14. Dependency Injection ● providers ○ Component ○ NgModule
- 17. THANK YOU