Speaker: Kumar Abhinav Here's a TypeScript Angular tutorial that explores writing modern web apps with the new component based approach. We will learn how to - Write Angular 1 code, which is already popular and used by a lot of teams, in the modern component based approach, which modern frameworks like Angular2 and React have adopted - Write our code in Typescript instead of Javascript Typescript TypeScript starts from the same syntax and semantics that millions of JavaScript developers know today. Use existing JavaScript code, incorporate popular JavaScript libraries, and call TypeScript code from JavaScript. TypeScript compiles to clean, simple JavaScript code which runs on any browser, in Node.js, or in any JavaScript engine that supports ECMAScript 3 (or newer). Componenet Based Approach Components are New tags HTML does not already have. In Angular, a Component is a special kind of directive that uses a simpler configuration which is suitable for a component-based application structure. This makes it easier to write an app in a way that's similar to using Web Components or using Angular 2's style of application architecture. Advantages of Components: - simpler configuration than plain directives - promote sane defaults and best practices - optimized for component-based architecture writing component directives will make it easier to upgrade to Angular 2 TypeScript Basics - Types - Classes - Interfaces - Imports and exports Discover more JavaScript sessions at http://srijan.net/webinar/enhance-your-angular-1-code-typescript. For more tech sessions, don't forget to check out our playlists.

1. Enhance Your Angular 1
Code with TypeScript
Kumar Abhinav | Corporate Trainer
#SrijanWW | @srijan

2. #SrijanWW | @srijan
What’s This All About
In this webinar we are going to explore writing modern web apps with the new component based approach.
We will learn how to
● Write Angular 1 code, which is already popular and used by a lot of teams, in the modern component
based approach, which modern frameworks like Angular2 and React have adopted
● Write our code in Typescript instead of Javascript
Typescript, you can think of as a modern version of Javascript, has really cool features, some of which we will
explore in this webinar.

3. 3
Components
New tags HTML does not already have.
In Angular, a Component is a special kind of directive that uses a simpler configuration which is suitable for a
component-based application structure.
This makes it easier to write an app in a way that's similar to using Web Components or using Angular 2's style
of application architecture.
Advantages of Components:
● simpler configuration than plain directives
● promote sane defaults and best practices
● optimized for component-based architecture
● writing component directives will make it easier to upgrade to Angular 2
#SrijanWW | @srijan

4. 4
Typescript: The Cool Javascript
TypeScript starts from the same syntax and semantics that millions of JavaScript developers know today.
Use existing JavaScript code, incorporate popular JavaScript libraries, and call TypeScript code from
JavaScript.
TypeScript compiles to clean, simple JavaScript code which runs on any browser, in Node.js, or in any
JavaScript engine that supports ECMAScript 3 (or newer).

#SrijanWW | @srijan

5. 5
What Shall We Build?
Let’s build a ToDo app to understand all the concepts

#SrijanWW | @srijan

6. 6
Typescript basics
● Types
● Classes
● Interfaces
● Imports and exports

#SrijanWW | @srijan

7. 7
Let’s Code
Best way to learn is to do it
So….
Let’s begin

#SrijanWW | @srijan

8. 8
Here’s What We’ll Do
● Set up: The one time job to set-up things
● To-do App Component: The parent component
● To-do List Component: Lets show some todos
● To-do Component: Add a ‘mark as done’ feature
● To-do Form Component: Let the user add todos

#SrijanWW | @srijan

9. 9
#SrijanWW | @srijan
Questions?