Unlimited training using Angular p_p_t
- 1. For Angular Online Training : +91-999 123 502 Introduction to Angular Shailendra Chauhan Microsoft MVP, Technical Consultant and Corporate Trainer
- 2. For Angular Online Training : +91-999 123 502 • A framework for building application using web technologies like html, css and js • Empowers developers to build applications for browsers, mobiles, or desktop Introduction to Angular
- 3. For Angular Online Training : +91-999 123 502 • Developed in 2009 by Misko Hevery and Adam Abrons at Brat Tech • Misko Hevery started to work for Google in 2009 • Angular version 1.0 (AngularJS) was released in 2012 by Google • Angular version 2.0 was released in September 2016 • Angular 4.0 was released in March 2017 • Angular 5.0 was released in Nov 2017 • Angular 6.0 was released in May 2018 • Angular 7.0 was released in Oct 2018 • Angular 8.0 was released in May 2019 • Angular 9.0 was released in Feb 2020 Angular History
- 4. For Angular Online Training : +91-999 123 502 • A powerful to create, build, compile and serve Angular2 App • Used to generate new components, routes, services and pipes • Installing Angular CLI npm install -g @angular/cli • Generating and serving Angular app ng new proj_name --skip-install cd proj_name npm install ng serve Angular CLI
- 5. For Angular Online Training : +91-999 123 502 Angular CLI Options Options Usage Help ng --help Build ng build --env Build and Run ng serve Testing ng test End-End Testing ng e2e
- 6. For Angular Online Training : +91-999 123 502 Angular CLI Commands Scaffold Usage In Short Module ng generate module my-module ng g m my-module Component ng generate component my-component ng g c my-component Directive ng generate directive my-directive ng g d my-directive Pipe ng generate pipe my-pipe ng g p my-pipe Service ng generate service my-service ng g s my-service Guard ng generate guard my-guard ng g g my-guard Class ng generate class my-class ng g cl my-class Interface ng generate interface my-interface ng g i my-interface Enum ng generate enum my-enum ng g e my-enum
- 7. For Angular Online Training : +91-999 123 502 Angular Initialization Process
- 8. For Angular Online Training : +91-999 123 502 • Modules • Components • Templates • Metadata • Data binding • Directives • Pipes Angular Building Blocks • Routing • Forms • Services • Dependency injection
- 9. For Angular Online Training : +91-999 123 502 • A module organize an application into unified blocks of functionality • An Angular module is a class with an @NgModule decorator • Accepts a single metadata object whose properties describe the module • Each Angular app must have at least one module, known as root module Modules
- 10. For Angular Online Training : +91-999 123 502 Modules
- 11. For Angular Online Training : +91-999 123 502 • imports – Specify other dependent modules whose classes are required by the component templates declared in the module • declarations – Specify the components, directives, and pipes that belong to the module • bootstrap – Specify the main app view i.e root component. Only the root module can have this bootstrap property • exports – A subset of declarations that will be visible and usable in the other modules. A root module doesn’t have export option. • providers – Specify the services, accessible across the app NgModule Metadata Main Properties
- 12. For Angular Online Training : +91-999 123 502 • Angular has built-In library modules starting with the @angular as prefix • Built-In library & third part modules can be installed using npm manager • Built-In modules, components, services, directives etc. can be imported by using built-In library modules Built-In Modules
- 13. For Angular Online Training : +91-999 123 502 • A type of directives with template, styles and logic for user interaction • Exported as a custom HTML tag like as: <my-component></my-component> • Initialized by Angular Dependency Injection engine Component
- 14. For Angular Online Training : +91-999 123 502 Angular Components Page View ROOT COMPONENT HEADER COMPONENT FOOTER COMPONENT ARTICLE COMPONENT COMMENTS COMPONENT CATEGORIES COMPONENT NEWS FEEDS COMPONENT
- 15. For Angular Online Training : +91-999 123 502 Component Example
- 16. For Angular Online Training : +91-999 123 502 • Define the view of a component • Contains Html markup and angular directives, attributes etc. • Describe how a component is rendered on the page Template
- 17. For Angular Online Training : +91-999 123 502 • A function that adds metadata to a class, class members • These are prefix with @ symbol • Angular has built-In decorators like - @Component, @NgModule, @Directive, @Pipe etc. Decorators
- 18. For Angular Online Training : +91-999 123 502 • Class decorators @NgModule – Used for defining a module @Component – Used for defining a component @Directive – Used for defining a directive @Injectable – Used for injecting dependencies @Pipe – Used for defining a pipe • Class field decorators @Input – Used for receiving data (input) component @Output – Used for passing data (events) component from parent to child from child to parent Types of Decorators
- 19. For Angular Online Training : +91-999 123 502 • Tells Angular how to process a class • Decorators are used to attach metadata to a class Metadata
- 20. For Angular Online Training : +91-999 123 502 Angular Forms • HTML forms are an essential part of a web application • Angular provides two ways to create form – Template Driven and Model Driven Forms Template Driven Model Driven
- 21. For Angular Online Training : +91-999 123 502 Angular Form Building Blocks Building Blocks FormGroup FormControl FormArray Validations
- 22. For Angular Online Training : +91-999 123 502 Angular Form and Form Controls States