Angular 2 Forms

2 Types

Template Driven

Angular roams the template and builds the data model.

Model Driven

We build the data model in the class.

Validation States

touched untouched
dirty pristine
valid invalid

Validation Classes

.ng-touched .ng-untouched
.ng-dirty .ng-pristine
.ng-valid .ng-invalid

Validation Classes

.ng-touched .ng-untouched
.ng-dirty .ng-pristine
.ng-valid .ng-invalid

2 Types

Template Driven

Angular roams the template and builds the data model.

Model Driven

We build the data model in the class.

Form Building

  • FormGroup()

  • FormControl()

  • FormArray()

Our Form

  • Overall Form: FormGroup()

  • Name: FormControl()

  • Username: FormControl()

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

this.route.snapshot.params

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 Forms

By Chris Sevilleja

Angular 2 Forms

  • 544
Loading comments...

More from Chris Sevilleja