Angular 2.0  FINAL Complete

  Training

@tkssharma

github.com/tkssharma

                       Course Overview  

• Angular 2.0 vs Angular 1.0 - 5 mins
• Installation and setup for Angular 2.0 with Typescript ES6 - 5 mins
• Let’s start create first “Hello world ” application Angular 2.0 - 5mins
• Writing application using Typescript/ECMAScript 5/ECMAScript 6.

• Understanding Universal Module Loader System JS .
• Understanding Module Bundle Web pack.
• Angular 2.0 different loaders and Transpilers using NPM  package managers
• Typescript @ annotations for components, views & directives 
• Hands-on: Getting Started with Application
• Angular 2 Components  & Modules.
• Angular 2 Modular Development using @NgMOdule
• Angular 2 app Architecture
• Component Nesting  & Templates
• Angular 2 Web components and view Encapsulation
• Angular 2 Module Approach of Development  
• Angular Component Metadata

​   Angular Component Overview

• Component Communication with Input and Output
• DOM events and  Event Binding
• Two Way Data Binding
• Attribute Directives and Structural Directives
• Pipes
• Angular 2 Application lifecycle Hooks
• Application development with data binding,pipes & Directives in  Angular 2

   DI Dependancy Injection

• The Dependency Injection and Inversion Of Control Patterns
• Injectors and Providers
• Building a Service & Registering Service
• Injecting the Service
• Dependency Injection with Angular 2 Application

                   Reactive Programming using RX JS

• Introduction of Reactive programming
• Observables and Reactive Extensions
• Setting Up http service with RX JS
• Sending an Http Request
• Subscribing to an Observable
• Adding Http service in Application

  Angular 2.0 Routing

• Angular2.0 Understanding Routing Basics
• Angular 2.0 Passing Data to Routes
• Angular2.0 Understanding Using RouteParam Using RouteData
• Child Routes & Auxiliary Routes
• Lazy Loading with AsyncRoute
• Securing Routes Canactivate
• Hands-on: Using Routing in Our application

Angular 2.0 Forms

• Introducing a User Registration Form Angular Forms API
• Form Controls Form Directives & Form Validation
• Custom Validators
• Custom Validation Directives
• Template-Driven Forms
• Refactoring a Sample Form Template
• Creating a Sample Form Component

Why Angular 2?

• Take advantage of ES2015 / ES6
• Web components
• Framework for all types of apps
• Speed improvements

Biggest Angular 2 Turnoff

Goals

• Understand the setup
• Create our first Angular 2 app!
• Create a super simple starter

Skip the Setup

Really Super Duper Skip the Setup

Overview

• Setup our project
• Bring in TypeScript
• Bring in System.js
• Build with Angular 2!

• |- app/

• |----- app.component.ts

• |----- app.module.ts

• |----- app.main.ts

• |- index.html

• |- package.json

• |- tsconfig.json

• |- typings.json

• |- systemjs.config.js

TypeScript Benefits

• Classes
• Type checking
• Familiarity
• Editor support
• Superset of JS

Angular Dependencies

• Core JS Shim 
• Zone.js
• Reflect Metadata
• RxJS
• SystemJS

Angular Packages

• @angular/core 
• @angular/common
• @angular/compiler
• @angular/platform-browser
• @angular/platform-browser-dynamic

Angular Extras

• @angular/http
• @angular/forms
• @angular/router
• @angular/upgrade

Taking a Step Back

• Setup our project
• Bring in TypeScript
• Bring in System.js
• Build with Angular 2!

• |- app/

• |----- app.component.ts

• |----- app.module.ts

• |----- app.main.ts

• |- index.html

• |- package.json

• |- tsconfig.json

• |- typings.json

• |- systemjs.config.js

Angular 1 Directives

• ngBlur
• ngClick
• ngHref
• ngSrc
• ngCloak
• ngHide
• ngFocus

Angular 2

[ ] = property bindings

( ) = event bindings

2-Way Data Binding

2-Way Data Binding

Putting Info Into a Component

@Input()

Working with Forms

• Template-Driven (Angular 1 Style)
• Model-Driven

Putting Info Into a Component

@Input()

Sending out of a Component

@Output() and EventEmitter

Recap

• Setup an Angular 2 app
• Created a Starter Kit
• Created an Angular 2 component
• Created child components
• Worked with data-binding
• Worked with forms and validation
• Passed data around components

s

{
    name: 'Basketball',
    slug: 'basketball',
    description: 'Throwing balls into baskets.'
}

// message has to be a string
function saySomething(message: string) {
  ...
}

// throws an error !!!!!
saySomething(500);

// no error
saySomething('whats up');

// typescript class ========================
class Greeter {
    greeting: string;

    greet() {
      return "Hello, " + this.greeting;
    }
}

// compiled to javascript ==================
var Greeter = (function () {

    function Greeter() {
    }

    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };

    return Greeter;

}());

// typescript ===============================
function saySomething(message: string) {
    console.log(message);
}

let message = 'angular is the bees knees';
saySomething(message);


// compiled javascript ======================
function saySomething(message) {
    console.log(message);
}

var message = 'angular is the bees knees';
saySomething(message);

@Component({  <-- decorator!
    selector: 'my-app',
    template: '<h1>Hello!</h1>'
})

export class AppComponent {}

// typescript class ========================
class Greeter {
    greeting: string;

    greet() {
      return "Hello, " + this.greeting;
    }
}

// compiled to javascript ==================
var Greeter = (function () {

    function Greeter() {
    }

    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };

    return Greeter;

}());

Environment Variables

Keeping secrets a secret

Seeding Our Database

Sample data to work with

Robomongo

See what's in the database

Getting Events

Reloading the Browser

Routing Our App

Top down overview.

• Home Page
• Single Page
• Contact Page

Blade Layouts

Simple and extendable views.

Contact Page

• Showing a Form
• Processing a form
• Sending an email