Angular 2 Getting Started

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