Introduction To Angular 8 - NDC Sydney

Introduction to Angular
NDC Sydney - http://bit.ly/ng8-ndc-sydney
www.angulartraining.com
About me - Alain Chautard (or just Al)
Google Developer Expert in Web technologies / Angular
/ Google Maps
Angular JS addict since 2011
Consultant / trainer @ angulartraining.com
Organizer of the Sacramento Angular Meetup group / GDG Sacramento

Quick poll
● How many of you are Java developers? C#, .Net?

● How many of you have any experience with Angular 1 ?
● With Javascript? TypeScript?
● Angular 2+?
How is Angular
different from PHP,
ASP, JSP?
In the past, all of the

front-end code (HTML, JS,
CSS) was generated from
the back-end.
User interactions with the

webpage often required a
full-page refresh.
How is Angular
different from PHP,
ASP, JSP?
With Angular, the front-end

code is now independent
from the back-end
The web server becomes a

web-service that outputs
JSON data, not dynamic
HTML or CSS
A bit of Angular history
Angular JS era (1.x) Angular era (2+)
2012 2013 2014 2015 2016 2017 2018 2019
1.0 1.2 1.3 1.4 1.5 2.0 4.0 5.0 6.0 7.0 8.0
1.1
Releases happen from time to time Clear, predictable schedule

Angular is widely used
1600+
That's how many apps are built with Angular at
Google alone (was 800 just 2 years ago)
Many more at: www.madewithangular.com

Angular is made
with Typescript
TypeScript is a strict
superset of ES6 (tomorrow’s
Javascript) which is the next
iteration of ES5 (today’s
Javascript)
More familiar to back-end

devs
Browser independent as it
transpiles down to ES5
anyway
Angular CLI - https://cli.angular.io/
● It’s a code generator

● It’s a set of tools for development (local server,
auto-refresh)
● It’s a set of build tools (compile, lint, minify...)
● Also very helpful for testing
Components
What are
components? <app-root>
<header title=”A title”></header>

A component is comparable
<left-menu [items]=”items”>
to an HTML element that
YOU create </left-menu>
It controls a small part of <data-view [hidden]=false>

the screen
</data-view>
An Angular app is a tree of
components </app-root>
Here's an Angular app - Let's build it from scratch!
Example of Angular
component
A component's application
logic is defined inside a
class.
The class interacts with the

view through an API of
properties and methods.
Angular
component: @Component({
HTML and CSS selector: 'app-hello',
templateUrl: './hello.component.html',
Both HTML and CSS for a styleUrls: ['./hello.component.css']
component can be stored in
their own files })
export class HelloComponent {

We get those files loaded
using the following syntax: // …
Angular Component
● 80%+ of the Angular code you’re going to write will be

components
● There are component libraries that provide their own collection
of components:
Data Bindings
Angular Data Bindings - [] and ()
Component class properties can be bound to HTML attributes:
● The above sets the value of the value HTML attribute of the
input element to this.name in our component class.
● It also binds the click event to the alertName() method.
Angular Models - [(ngModel)]
[(ngModel)] = 2-way data binding
Changes to the HTML update your TS scope and vice-versa:

Bindings + HTML = Super Powers
Since bindings work on any HTML attribute, you can use

then to apply styles conditionally:
<p [style.color]="hasError ? 'red' : 'blue'">
This also works to show/hide error messages:

<div [hidden]="noErrors">
The value you entered is not valid
</div>
Bindings -
Recap
Expressions {{}} and
property bindings with []
are one-way data bindings
Event bindings with () are

one-way data bindings
[(ngModel)] works both

ways
Directives
Angular Directives
● Directives allow DOM manipulation

● There are three kinds of Angular directives:
- Components = Directives with a HTML template

- Attribute directives = Change attribute values
- Structural directives = Change the HTML structure
Angular *ngFor
● *ngFor is a structural directive

● Equivalent of Angular JS’ ng-repeat
● A loop to iterate through data model items:
<li *ngFor="let person of persons">
{{ getDisplayName(person) }}
</li>
Angular *ngIf
● Directives like Angular JS ng-show, ng-hide are replaced by

HTML attribute bindings
● For instance, [hidden]=”myCondition”
● *ngIf is based on DOM rather than CSS:
Angular ngSwitch
● Switch-case implementation for Angular

● Allows to display content conditionally:
Pipes
Angular Pipes with |
● Equivalent of Angular JS filters

● Used to format data for display
● Pipes can be chained
● Examples include: uppercase, lowercase,
currency, date
We can write our own pipes!

Pipe Parameters
● Pipes can have parameters

● Parameters are optional and separated by :
● Example with the date pipe
{{someDate | date:’mediumDate’}}
● All of the pipes in the Angular framework can be
found here: https://angular.io/api?type=pipe
Services and
dependency injection
Angular Services
● Services are meant to handle application logic (fetch data,

update data, etc.)
● They are classes that can be injected in other objects
● Services are singletons: There is only one instance per
injector
● To turn a class into a service, we need the @Injectable()
decorator applied to that class
Dependency injection
● Angular relies on dependency injection to provide services to

other objects such as components, directives, etc.
● Dependency injection is a process where a class delegates
the responsibility of providing its dependencies to external
code (the injector)
● Classes are not allowed to call the injector code. It is the
injector that constructs the services and stores one instance
of each.
Dependency injection with Angular
● Angular relies on constructors to achieve dependency

injection
● Any class marked as @Injectable can be injected into an
Angular object as follows:
export class ListPostsComponent {

constructor(postService : PostsService) {
Dependency injection
The following syntax turns any class into an injectable service:
@Injectable({
providedIn: 'root'
})
export class TestService {
You can generate a service with:
ng generate service Test

ng g s Test
Typescript - Constructor syntax
In Typescript,constructor parameters marked as public, private or
protected are automatically turned into class properties:
constructor(public postService : PostsService) {
}
is equivalent to:
postService : PostsService;
constructor(postService : PostsService) {
this.postService = postService;
}
}
HTTP Client
Angular HttpClient
● Angular service for http requests (AJAX)

● Works seamlessly with JSON data and REST
● Returns an Observable object that we subscribe to in order
to receive the data from the HTTP response
Angular HttpClient
● HttpClient is a service that can be injected

● Note the use of generics to specify the type of the response:
import {HttpClient} from '@angular/common/http';
@Injectable()
export class CartService {
constructor(private http: HttpClient) { }
getCartContents(): Observable<LicensePlate[]> {
return this.http.get<LicensePlate[]>('http://localhost:8000/cart');
}
Component Router
Angular Component Router
Angular was designed for Single Page Applications
But very often we need more than one page!
The Component Router allows us to emulate this by loading

components based on URLs
For instance, /cart would load a Cart component, /login for

login, etc.
Example of
router Navigation
implementation
Dynamic content area where
Here the navigation components
component and the footer get loaded based on the URL
are always the same on all <router-outlet>

pages. </router-outlet>
The only dynamic part is the

blue section, determined by Footer
the <router-outlet>
directive
Angular Component Router
● Requires a routing table that maps URLs to

components (app.routing.ts):
const appRoutes: Routes = [
{
path: '', component: MenuComponent
}, {
path: 'observable-example', component: ObservableExampleComponent
}, {
path: 'subject-example', component: SubjectExampleComponent
}
];
export const routing: ModuleWithProviders = RouterModule. forRoot(appRoutes);

Thank you
For follow-up questions: al@interstate21.com
Slides: http://bit.ly/ng8-ndc-sydney

Introduction To Angular 8 - NDC Sydney

Uploaded by

Copyright:

Available Formats

Introduction To Angular 8 - NDC Sydney

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Introduction To Angular 8 - NDC Sydney

Uploaded by

Copyright:

Available Formats

Introduction to Angular

NDC Sydney - http://bit.ly/ng8-ndc-sydney

Google Developer Expert in Web technologies / Angular

Angular JS addict since 2011

Consultant / trainer @ angulartraining.com

Organizer of the Sacramento Angular Meetup group / GDG Sacramento

● How many of you are Java developers? C#, .Net?

In the past, all of the

User interactions with the

With Angular, the front-end

The web server becomes a

Angular JS era (1.x) Angular era (2+)

2012 2013 2014 2015 2016 2017 2018 2019

Releases happen from time to time Clear, predictable schedule

Many more at: www.madewithangular.com

More familiar to back-end

● It’s a code generator

<header title=”A title”></header>

It controls a small part of <data-view [hidden]=false>

The class interacts with the

HTML and CSS selector: 'app-hello',

export class HelloComponent {

● 80%+ of the Angular code you’re going to write will be

Component class properties can be bound to HTML attributes:

[(ngModel)] = 2-way data binding

Changes to the HTML update your TS scope and vice-versa:

Since bindings work on any HTML attribute, you can use

This also works to show/hide error messages:

Event bindings with () are

[(ngModel)] works both

● Directives allow DOM manipulation

- Components = Directives with a HTML template

● *ngFor is a structural directive

● Directives like Angular JS ng-show, ng-hide are replaced by

● Switch-case implementation for Angular

● Equivalent of Angular JS filters

We can write our own pipes!

● Pipes can have parameters

● Services are meant to handle application logic (fetch data,

● Angular relies on dependency injection to provide services to

● Angular relies on constructors to achieve dependency

export class ListPostsComponent {

The following syntax turns any class into an injectable service:

You can generate a service with:

ng generate service Test

● Angular service for http requests (AJAX)

● HttpClient is a service that can be injected

constructor(private http: HttpClient) { }

Angular was designed for Single Page Applications

But very often we need more than one page!

The Component Router allows us to emulate this by loading

For instance, /cart would load a Cart component, /login for

are always the same on all <router-outlet>

The only dynamic part is the

● Requires a routing table that maps URLs to

export const routing: ModuleWithProviders = RouterModule. forRoot(appRoutes);

You might also like