Best Angular Training Online: Angular tutorial | Learn Angular 2 to 10 |
1 like131 views
The document provides an overview of Angular, a framework for building applications using web technologies like HTML, CSS, and JavaScript. It includes a history of Angular versions, details about Angular CLI commands, and the building blocks of Angular applications such as modules, components, and forms. It emphasizes the use of decorators for metadata and different methods to create forms in Angular.
Best Angular Training Online: Angular tutorial | Learn Angular 2 to 10 |
- 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) from parent to child component ▪ @Output – Used for passing data (events) from child to parent component 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 • HTML forms are an essential part of a web application • Angular provides two ways to create form – Template Driven and Model Driven Angular Forms 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