1. Angular 4 + TypeScript Getting Started
UmaMahesWaran
@UMW360

2. What is wrong with Web Development?

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

4. 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

5. 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

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

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

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

9. 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#

10. TypeScript Example

11. 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.

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

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

14. DEMO TIME