{ {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
{ {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.
{ {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.
{ {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
{ {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 } }
{ {More than a language More than a language} } TypeScript also provides tooling and language services for autocompletion, code navigation and refactoring.
{ {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.
{ {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.
{ {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
{ {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
{ {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
{ {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.
{ {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).
{ {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 }}
{ {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.
{ {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(); } }
{ {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);
Angular ships with its own dependency injection framework. This framework can also be used as a standalone module by other applications and frameworks.
{ {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.
{ {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);
{ {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.
{ {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
{ {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);
{ {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
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
{ {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.
{ {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
{ {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.
{ {Installation Installation} } Kendo UI for Angular components are distributed via npm. Every component represents a separate Angular module. npm install --save [kendo-component]
{ {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/
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.
{ {Debugging Debugging} } The TypeScript compiler generates source map les, which allow browsers to recover the original source code from the compiled javascript.
deniskyashif
opelab
edwardkenfox
miyake
claudioed
senkin13
yokawasa
huffon
nagiss
whywaita
shimacos
riru
torounit
holman
jensimmons
jcasabona
dougneiner
chriscoyier
lauravandoore
deanohume
hatefulcrawdad
mongodb
frogandcode
jmmastey