{
{We'll make it interactive
We'll make it interactive}
}
Slide 6
Slide 6 text
{
{Tools that we need
Tools that we need}
}
NodeJS:
IDE/Text Editor
Visual Studio Code, WebStorm, Sublime Text etc.
Slides & Demos
* Refer to README.md for instructions on how to run the projects
https://nodejs.org/en/download/current/
https://github.com/newventuresoftware/kendo-ui-for-angular
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
{
{What is TypeScript?
What is TypeScript?}
}
Language created by
Microsoft.
Has optional static typing.
Compiles to JavaScript.
Inherits concepts from C#.
Provides language service API.
Slide 9
Slide 9 text
It's always better to catch errors at compile time rather
that at runtime.
Slide 10
Slide 10 text
{
{Benefits of TypeScript
Benefits of TypeScript}
}
Due to static typing, it's more predictable.
Due to modules, namespaces and stronger
OOP, it scales better for larger apps.
Due to compilation step, some errors are caught
compile-time, not run-time.
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
{
{Installing TypeScript
Installing TypeScript}
}
Using the Node Package Manager.
npm install --global typescript
Slide 13
Slide 13 text
{
{Compiling TypeScript
Compiling TypeScript}
}
TypeScript is written in .ts les, which can't be used
directly in the browser.
It need to be compiled to vanilla .js rst.
tsc main.ts
Slide 14
Slide 14 text
{
{tsconfig.json
tsconfig.json}
}
Speci es the way TS is compiled.
(autogeneratable with tsc --init)
{
"compilerOptions": {
"target": "es5", // Sets the output JS's version
"module": "commonjs", // Sets the module loader
"outDir": "dist", // Sets output JS files' location
"sourceMap": true, // Allows debugging
"noEmitOnError": true // Do not compile if errors
}
}
Slide 15
Slide 15 text
{
{Language Features
Language Features}
}
Slide 16
Slide 16 text
{
{Static Type System
Static Type System}
}
“Strongly typed languages reduce bugs by 15%.”
Slide 17
Slide 17 text
{
{Basic Types
Basic Types}
}
prede ned in the language:
number, string, boolean, Array, enum,
undefined, null, tuples, any, void, never
Slide 18
Slide 18 text
{
{Complex Types
Complex Types}
}
created by the developer
Slide 19
Slide 19 text
{
{Classes
Classes}
}
class Employee {
name: string;
constructor(name: string) {
this.name = name;
}
greet(): string {
return `Hi, my name is ${this.name}`;
}
}
{
{More than a language
More than a language}
}
TypeScript also provides tooling and language services
for autocompletion, code navigation and refactoring.
Slide 26
Slide 26 text
{
{tssserver
tssserver}
}
Plugins for:
Tide(Emacs)
VS Code TypeScript Support
TypeScript-Sublime-Plugin(Sublime
Text)
Slide 27
Slide 27 text
{
{Type Declaration Files
Type Declaration Files}
}
{lib}.d.ts
Distributed via NPM
npm install --save @types/jquery
Slide 28
Slide 28 text
{
{TypeScript and Angular
TypeScript and Angular}
}
Slide 29
Slide 29 text
{
{Learn TypeScript
Learn TypeScript}
}
Of cial Documentation
Slide 30
Slide 30 text
Every time a new JS Framework comes up...
Slide 31
Slide 31 text
...but not this time.
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
A developer platform for building mobile and desktop
web apps using TypeScript/JavaScript and other
languages.
Slide 34
Slide 34 text
{
{Framework
Framework}
}
Slide 35
Slide 35 text
{
{Architecture
Architecture}
}
Slide 36
Slide 36 text
With all the front-end build tools, setting up a project can
be tedious.
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
Angular CLI solves this problem!
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
{
{Live Demo
Live Demo}
}
Setting up a project with the Angular CLI
Slide 41
Slide 41 text
{
{Angular CLI
Angular CLI}
}
Install NodeJS
Install Angular CLI
Initialize a project
Navigate to the project root.
Run the project
https://nodejs.org/en/download/
npm install -g @angular/cli
ng new my-app
cd my-app
ng serve --open
{
{What is @NgModule?
What is @NgModule?}
}
A decorator function that takes a single metadata object
whose properties describe the module.
Tells Angular how to compile and run the module code.
Consolidates components, directives and services into
cohesive blocks of functionality.
It can import other modules for reusing their Components,
Directives etc.
Slide 44
Slide 44 text
{
{Components
Components}
}
@Component()
Slide 45
Slide 45 text
{
{Components in Angular
Components in Angular}
}
The basic UI building block in Angular.
Control the view.
Represent anything visible to the end user.
Angular creates, updates and destroys components
as the user moves through the app.
Angular provides view encapsulation by default
which enables the Shadow DOM.
Slide 46
Slide 46 text
{
{Shadow DOM
Shadow DOM}
}
Shadow DOM is just normal DOM with two differences:
1. how it's created/used and
2. how it behaves in relation to the rest of the page
Shadow DOM is designed as a tool for building component-based
apps
Angular uses components
It addresses the DOM tree encapsulation problem
Allows us to hide DOM logic behind other elements
Slide 47
Slide 47 text
{
{Shadow DOM
Shadow DOM}
}
Isolated DOM - A component's DOM is self-contained
document.querySelector() won't return nodes in the
component's shadow DOM
Scoped CSS - CSS de ned inside shadow DOM is scoped
to it
Slide 48
Slide 48 text
{
{View Encapsulation
View Encapsulation}
}
Angular comes with view encapsulation by default
which enables Shadow DOM
There are three view encapsulation types available
None - no Shadow DOM and no encapsulation
Emulated (default) - no Shadow DOM but there is
encapsulation of the views
Native - native Shadow DOM
Slide 49
Slide 49 text
{
{Component Tree
Component Tree}
}
Slide 50
Slide 50 text
{
{Data Binding
Data Binding}
}
{{}} () [] [()]
A mechanism for coordinating the view with the
application data.
Slide 51
Slide 51 text
{
{Data Binding Types
Data Binding Types}
}
Slide 52
Slide 52 text
{
{Live Demo
Live Demo}
}
Creating Angular Components
{
{What are Directives?
What are Directives?}
}
Directives aim to extend the static nature of HTML.
They allow creating custom elements, attributes and
even control ow inside the HTML.
Slide 55
Slide 55 text
{
{Directives Types
Directives Types}
}
Components - directives with a template.
Structural - change the DOM layout by adding and removing DOM
elements(*ngIf, *ngFor).
Attribute - change the appearance or behavior of an element,
component, or another directive(NgStyle, NgClass).
Slide 56
Slide 56 text
{
{What are Pipes?
What are Pipes?}
}
A way to write display-value transformations that can
be declared in the HTML.
A pipe takes in data as input and transforms it to a
desired output.
Angular comes with a stock of pipes such as DatePipe,
UpperCasePipe, CurrencyPipe...
Pipes can be chained together in potentially useful
combinations.
Name: {{ name | uppercase }}
Slide 57
Slide 57 text
{
{Live Demo
Live Demo}
}
Working with Directives and Pipes
Slide 58
Slide 58 text
{
{Dependency Injection and
Dependency Injection and
Services
Services}
}
@Injectable()
Slide 59
Slide 59 text
{
{What is Dependency Injection(DI)?
What is Dependency Injection(DI)?}
}
A design principle in which a class should receive its
dependencies from external sources rather than creating
them itself.
Slide 60
Slide 60 text
{
{DI Example
DI Example}
}
What is the problem here?
Tight coupling between Car and Engine
If the de nition of Engine changes, Car must also
change.
Engine cannot be shared among Car instances.
Is it possible to create an Engine in a test environment?
class Car {
public engine: Engine;
constructor() {
this.engine = new Engine();
}
}
Slide 61
Slide 61 text
{
{DI Example
DI Example}
}
The class now receives its dependencies in the constructor.
class Car {
public engine: Engine;
constructor(engine: Engine) {
this.engine = engine;
}
}
const engine: Engine = new HybridEngine();
const car = new Car(engine);
Slide 62
Slide 62 text
Angular ships with its own dependency injection
framework. This framework can also be used as a
standalone module by other applications and
frameworks.
Slide 63
Slide 63 text
{
{Services
Services}
}
A service is nothing more than a class in Angular. It remains
nothing more than a class until registered with an Angular
injector.
You don't have to create an Angular injector. Angular
creates an application-wide injector for you during the
bootstrap process.
Slide 64
Slide 64 text
{
{DI & Services
DI & Services}
}
Slide 65
Slide 65 text
{
{Providers
Providers}
}
A provider is something that can create or deliver a
service.
The providers are registered in the app module.
@NgModule({
imports: [BrowserModule],
providers: [UserService],
declarations: [App],
bootstrap: [App]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
Slide 66
Slide 66 text
{
{Live Demo
Live Demo}
}
Services and DI
Slide 67
Slide 67 text
{
{Routing in Angular
Routing in Angular}
}
Slide 68
Slide 68 text
{
{What is Routing?
What is Routing?}
}
Routing the standard way to navigate in a web
applications.
Each unique route must always return the same
page.
Slide 69
Slide 69 text
{
{Live Demo
Live Demo}
}
Angular Routing.
Slide 70
Slide 70 text
{
{Reactive Programming
Reactive Programming}
}
Programming with asynchronous data streams.
You are able to create data streams of anything.
A stream is a sequence of ongoing events ordered in
time.
A stream can be used as an input to another one.
It emits three different things
a value (of some type)
an error
a complete method
Slide 71
Slide 71 text
{
{RxJS and Observables
RxJS and Observables}
}
Set of libraries for composing asynchronous and event-
based programs using observable sequences
const subscription = source.pipe(
filter(quote => quote.price > 30),
map(quote => quote.price))
.subscribe(price => console.log(price);
Slide 72
Slide 72 text
No content
Slide 73
Slide 73 text
{
{Cold vs Hot
Cold vs Hot}
}
Cold observables start running upon subscription
The observable sequence only starts pushing values to the observers
when Subscribe is called
Hot observables are ones that are pushing even when you are not
subscribed to the observable
Like mouse moves, or Timer ticks, etc.
It’s not always possible from the subscriber side to know whether you are
dealing with a cold or hot Observable
Slide 74
Slide 74 text
Observables Promise
Observables handle
multiple values over
time
Promises are only called
once and will return a single
value
Observables are
cancellable
Promises are not cancellable
Observables are lazy Promises NOT
Slide 75
Slide 75 text
{
{Angular HttpClient
Angular HttpClient}
}
Angular's http service delegates the client/server
communication tasks to a helper service called the
XHRBackend
Register for HTTP services
Import the HttpClientModule
Can work with both Observables and Promises.
Slide 76
Slide 76 text
{
{ Angular HttpClient Example
Angular HttpClient Example }
}
// Inject the HttpClient Service
import { HttpClient } from '@angular/common/http';
@Injectable()
export class CommentsService {
constructor(private http: HttpClient) { }
getComments() : Observable {
// ...using get request
return this.http.get('/api/comments');
}
}
service.getComments()
.subscribe(comments => this.comments = comments);
Angular calls lifecycle hook methods on directives and
components as it creates, changes, and destroys them.
Slide 80
Slide 80 text
{
{Lifecycle Sequence
Lifecycle Sequence}
}
Constructor The constructor has been invoked.
OnChanges The data-bound input properties have been (re)set.
OnInit The component/directive has been initialized.
DoCheck Detect and act upon changes that Angular can't or won't detect on its
own.
AfterContentInit After Angular projects external content into the component's view.
AfterContentChecked After Angular checks the content projected into the component.
AfterViewInit After Angular initializes the component's views and child views.
AfterViewChecked Called just before Angular destroys the directive/component.
OnDestroy After Angular checks the component's views and child views.
* TypeScript, Components & Directives, Component Only
Slide 81
Slide 81 text
Angular Cheatsheet
Slide 82
Slide 82 text
{
{Kendo UI for Angular
Kendo UI for Angular}
}
Slide 83
Slide 83 text
{
{What is Kendo UI for Angular?
What is Kendo UI for Angular?}
}
Native Angular Component Suite.
Each component group represents a separate
Angular module.
Distributed via NPM (nodejs package manager).
Unlimited Product Support.
Slide 84
Slide 84 text
{
{Installation
Installation}
}
Kendo UI for Angular components are distributed via
npm.
Every component represents a separate Angular
module.
npm install --save [kendo-component]
Slide 85
Slide 85 text
{
{Live Demo
Live Demo}
}
Components in Action
Slide 86
Slide 86 text
Kendo UI is much more that a component suite.
Slide 87
Slide 87 text
{
{Data Query
Data Query}
}
The Data Query provides functions that help you handle the
following bulk data operations:
sorting, ltering, grouping, aggragates
telerik.com/kendo-angular-ui/components/dataquery/api/
Slide 88
Slide 88 text
Kendo UI for Angular
Slide 89
Slide 89 text
{
{Upgrading Kendo UI for Angular
Upgrading Kendo UI for Angular}
}
Angular Upgrade Guide
Kendo UI Upgrade Guide
Slide 90
Slide 90 text
{
{Deployment
Deployment}
}
building for development and production
Slide 91
Slide 91 text
ng build [--prod]
Publish the contents of the generated dist/ folder to a
web server.
Slide 92
Slide 92 text
{
{Tooling
Tooling}
}
Ahead-Of-Time Compiler
Module Loader
Testing
Unit testing
e2e testing
Code Coverage
Bundler (Tree Shaking)
Linter (TypeScript and
CSS)
Mini er
Slide 93
Slide 93 text
ng build --prod
AOT Compilation Pre-compiles Angular component templates.
Bundling Concatenates modules into a single le.
Inlining Pulls template html and css into the components.
Mini cation Removes excess whitespace, comments, and optional tokens.
Ugli cation Rewrites code to use short, cryptic variable and function names.
Dead Code
Elimination
Removes unreferenced modules and unused code.
Prune Libraries Drop unused libraries and pare others down to the features you
need.
Slide 94
Slide 94 text
{
{Debugging
Debugging}
}
The TypeScript compiler generates source map les, which allow browsers to
recover the original source code from the compiled javascript.