Angular 2 Routing

Router Features

• Route to different pages
• Route with parameters
• Child routes
• Lazy loading
• Handle things (auth) before/after routes

What We'll Build

• Basic website (home/about/contact)
• Dashboard to manage users
• Authenticated dashboard

Getting Route Info

ActivatedRoute

• url
• data
• params
• queryParams
• fragment
• outlet
• even more...

Get Current Route Params

Recap

Link to Routes

Get Route Parameters

404 Page

Get Data with Route Parameters and Services

Next Up

• Multiple modules

• Multiple routers

• Child routing

• Lazy-loading

• Data resolving

• Auth guarding

• Data safety guarding

Resolve or ngOnInit

Dashboard Section

• Only authenticated users can access

• Ability to edit users

Router Guards

• CanActivate

• CanActivateChild

• CanDeactivate

• Resolve

• CanLoad

CanDeactivate

• Component canDeactivate()

• Current state

• Next route

Biggest Angular 2 Turnoff

Wrapup

• Route to different pages
• Route with parameters
• Child routes
• Lazy loading
• Use guards to act before activating
• Use guards to act before leaving

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