Angular 2 HTTP

Observables

Callback -> Promise -> Observable

RxJS

http://reactivex.io/

Lodash for events

What is an Observable?

Data given in a time period

Promise

Observable

Why Observables?

  • Handle multiple events

  • Cancellable

  • Operators to manipulate data (map(), filter())

  • Operators to retry (retry(), replay())

Angular 2 HTTP + Observables

getUsers() {
    return this.http.get('http://blambloom.com/api/comments');
}
this.getUsers()
    .subscribe(users => console.log(users));

Cold vs Hot Observables

Operators

Treating async data as collections

  • map
  • filter
  • concat
  • flatMap
  • reduce
  • every

Creating a New App Part

  • Add to app.module.ts
  • Add to app.routing.ts
  • Create the component

Token Based Auth

  • Login to an API

  • Get a JSON Web Token (JWT)

  • Store JWT in localStorage
  • Pass in for all API requests

Recap

  • Learned about Observables

  • Used the HTTP library

  • CRUD: GET, POST, PUT, DELETE

  • Communicated between components

  • Handled Tokens

Recap

Configure RouterModule

RouterModule.forRoot(routes);

Link to Routes

routerLink="/about"

[routerLink]="['/about', username]"

Get Route Parameters

this.route.snapshot.params['username']

404 Page

{

    path: '**',

    component: NotFoundComponent

}

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

Environment Setup

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

Angular CLI

npm install -g angular-cli
ng new my-app
ng start

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

The Banana in a Box

[(ngModel)]

2-Way Data Binding

The Banana in a Box

[(ngModel)]

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;

}());

Connecting to MongoDB

  • Connection string (URI)
  • User and pass
  • Database

MongoDB URI

Local

mongodb://<user>:<pass>@localhost/olympics

Remote

mongodb://<user>:<pass>@ds1343.mlab.com:43234/olympics

mLab

For a quick remote database

Environment Variables

Keeping secrets a secret

Event Model

Convenient data handling in Node

Convenient Methods

  • Event.find()
  • Event.findOne()
  • Event.save()
  • Event.remove()

Seeding Our Database

Sample data to work with

Robomongo

See what's in the database

Refactoring

A JS Task

Getting Events

Creating Events

Showing Messages

Validation + Errors

Editing Events

Deleting Events

Reloading the Browser

Database Migrations

users

  • name
  • email
  • avatar
  • username
  • password
  • role

posts

  • user_id
  • title
  • slug
  • image
  • content
  • status
  • published_at

Model Factories

Create sample data quickly.

Seeding Our Database

Fill our database with sample data.

Routing Our App

Top down overview.

 

  • Home Page
  • Single Page
  • Contact Page

Assets

CSS and JS for our application.

 

  • Using gulp and Laravel Elixir
  • Using Sass
  • Using jQuery
  • Using Bootstrap

Styling the Site

Styling Post Components

Blade Layouts

Simple and extendable views.

Contact Page

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

Authentication

  • Built-in Laravel authentication
  • Creating login/register views

Profile Pages

  • View a user profile
  • Let a user edit their own profile

Admin Dashboard

  • Only admins can access
  • CRUD posts
  • New Dashboard namespace

Dashboard Routes

  • Home page
  • Posts resource controller

List All Posts

Create a Post

Edit a Post

Delete a Post

Authenticating the Dashboard

Only admins can access.

Dashboard Links

Only admins can see.

Angular 2 HTTP

By Chris Sevilleja

Angular 2 HTTP

  • 476
Loading comments...

More from Chris Sevilleja