Angular 4 + TypeScript Getting Started UmaMahesWaran @UMW360

What is wrong with Web Development?

What you should know? HTML CSS (Not that important) Basic JavaScript Programming Fundamentals (Functions, Conditions, Loops)

What is Angular? Frontend/Client side JavaScript framework Created and maintained by google Used to build powerful single page applications (SPAs) Part of the very powerful MEAN stack What HTML would be if created for dynamic web applications

What is angular is NOT A server side framework/technology Javascript library (jQuery, React, etc) Design pattern Platform or language (.NET, Java) Plugin or extension

Angular Version History AngularJS/Angular 1 Angular 2 : Complete rewrite of Angular JS Angular 3 : Skipped Angular 4 : Backward compatible with Angular 2

Why use Angular? Rapid development & Code Generation Code Organization & Productivity Dynamic Content Cross Platform Unit Testing Ready

Core Features Components Services Routing Testing Build Tools Data Binding Templating HTTP Module Observables Forms Module Directives Pipes Events Animation TypeScript

What is TypeScript? Super set of Javascript with added features Create by Microsoft Optional static typing Class based object oriented programming Resembles languages like Java and C#

TypeScript Example

Components Sections of UI can be broken up into encapsulated components Basic building block of the UI. An Angular application is a tree of Angular components. Decorators allows us to mark a class as an Angular & provide metadata that determines how the component should be processed, instantiated and used at runtime.

Services Classes that send data and functionality across components Keeps components lean DRY – Don’t repeat yourself Ideal place for Ajax calls

Installing Angular 4 2 main ways to install Angular CLI QuickStart Seed Dependencies Node.js & NPM

DEMO TIME