Scribd
Upload
110 views

Unlimited Angular Training Online: Angular Tutorial - Learn Angular 2 To 10

Angular Training program will enable you to build modern and interactive web applications by using Angular best practices. Our Angular Training program covers Angular fundamentals like modules, components, Data binding, Directive, Services, Reactive Forms, Component level communication using Services and Dependency Injection (DI).

Uploaded by

DotNetTricks
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
110 views

Unlimited Angular Training Online: Angular Tutorial - Learn Angular 2 To 10

Angular Training program will enable you to build modern and interactive web applications by using Angular best practices. Our Angular Training program covers Angular fundamentals like modules, components, Data binding, Directive, Services, Reactive Forms, Component level communication using Services and Dependency Injection (DI).

Uploaded by

DotNetTricks
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

For Angular Online Training : +91-999 123 502

Introduction to Angular
Shailendra Chauhan
Microsoft MVP, Technical Consultant and Corporate Trainer
For Angular Online Training : +91-999 123 502

Introduction to Angular
• A framework for building application using
web technologies like html, css and js
• Empowers developers to build applications
for browsers, mobiles, or desktop
For Angular Online Training : +91-999 123 502

Angular History
• 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
For Angular Online Training : +91-999 123 502

Angular CLI
• 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
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
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
For Angular Online Training : +91-999 123 502

Angular Initialization Process


For Angular Online Training : +91-999 123 502

Angular Building Blocks


• Modules • Routing
• Components • Forms
• Templates • Services
• Metadata • Dependency injection
• Data binding
• Directives
• Pipes
For Angular Online Training : +91-999 123 502

Modules
• 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
For Angular Online Training : +91-999 123 502

Modules
For Angular Online Training : +91-999 123 502

NgModule Metadata Main Properties


• 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
For Angular Online Training : +91-999 123 502

Built-In Modules
• 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
For Angular Online Training : +91-999 123 502

Component
• 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
For Angular Online Training : +91-999 123 502

Angular Components Page View

HEADER COMPONENT

ARTICLE CATEGORIES
COMPONENT COMPONENT

COMMENTS NEWS FEEDS


COMPONENT COMPONENT

FOOTER COMPONENT

ROOT COMPONENT
For Angular Online Training : +91-999 123 502

Component Example
For Angular Online Training : +91-999 123 502

Template
• Define the view of a component
• Contains Html markup and angular directives, attributes etc.
• Describe how a component is rendered on the page
For Angular Online Training : +91-999 123 502

Decorators
• 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.
For Angular Online Training : +91-999 123 502

Types of Decorators
• 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
For Angular Online Training : +91-999 123 502

Metadata
• Tells Angular how to process a class
• Decorators are used to attach metadata to a class
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
Model Driven
Driven
For Angular Online Training : +91-999 123 502

Angular Form Building Blocks

Building
Blocks

FormGroup FormControl FormArray Validations


For Angular Online Training : +91-999 123 502

Angular Form and Form Controls States

You might also like