Notes for my ng-conf demo

ng-conf-notes.md

Setup

Start here to get the project on your development machine.

git clone https://github.com/tjvantoll/sample-Groceries.git
cd sample-Groceries
git checkout demo
tns run android

(If you need to reset the demo to its starting point, use this command.)

git reset --hard origin/demo

ng1

Use this for login.component.ts. Explain how this looks mostly like an Angular 2 component you’d write for the web, but how the specific UI components are different. Explain why that is.

import { Component } from "@angular/core";

@Component({
  selector: "login",
  template: `
    <StackLayout>
      <TextField hint="Email Address" id="email" keyboardType="email"
        autocorrect="false" autocapitalizationType="none"></TextField>
      <TextField hint="Password" id="password" secure="true"></TextField>

      <Button text="Sign in"></Button>
      <Button text="Sign up"></Button>
    </StackLayout>
  `
})
export class LoginComponent {}

ng2

Use this for app.css. Talk about how NativeScript uses CSS, but how it’s a subset of CSS, and how all that works.

@import url("~/platform.css");

Page {
  background-color: white;
  font-size: 15;
}
ActionBar {
  background-color: black;
  color: white;
}
TextField {
  padding: 10;
  font-size: 13;
}
.small-spacing {
  margin: 5;
}
.medium-spacing {
  margin: 10;
}

ng3

Use this for login.component.ts. Explain how you can apply CSS at the component level (using styleUrls), just like you can on the web.

import { Component, OnInit } from "@angular/core";
import { topmost } from "ui/frame";
import { Page } from "ui/page";

import { User } from "../../shared/user/user";

@Component({
  selector: "login",
  templateUrl: "pages/login/login.html",
  styleUrls: ["pages/login/login-common.css", "pages/login/login.css"]
})
export class LoginComponent implements OnInit {
  user: User;
  isLoggingIn = true;
  page: Page;

  ngOnInit() {
    this.user = new User();
  }
}

ng4

Use this for login.component.ts. This now hits a service when you tap “Sign in”. Explain how that service is reusable across web and native apps. That service runs—verbatim—on https://nativescript.github.io/sample-Groceries/.

import { Component, OnInit } from "@angular/core";
import { topmost } from "ui/frame";
import { Page } from "ui/page";

import { User } from "../../shared/user/user";
import { UserService } from "../../shared/user/user.service";

@Component({
  providers: [UserService],
  selector: "login",
  templateUrl: "pages/login/login.html",
  styleUrls: ["pages/login/login-common.css", "pages/login/login.css"]
})
export class LoginComponent implements OnInit {
  user: User;
  isLoggingIn = true;
  page: Page;

  constructor(private _userService: UserService, private _page: Page) {
    this.user = new User();
    this.user.email = "nativescriptrocks@progress.com";
    this.user.password = "password";
    this.page = _page;
  }

  ngOnInit() {
    this.page.actionBarHidden = true;
  }

  login() {
    this._userService.login(this.user)
      .subscribe(
        () => alert("success!"),
        (error) => alert("Unfortunately we could not find your account.")
      );
  }
}

ng5

Use this for login.component.ts. This adds the router. Open app.module.ts and app.routes.ts and talk about how routing in NativeScript works mostly just like it does on the web.

Note: The app has pull-to-refresh set up, so you can add groceries on https://nativescript.github.io/sample-Groceries/, and refresh the list for them to show up.

import { Component, OnInit } from "@angular/core";
import { topmost } from "ui/frame";
import { Page } from "ui/page";
import { Router } from "@angular/router";

import { User } from "../../shared/user/user";
import { UserService } from "../../shared/user/user.service";

@Component({
  providers: [UserService],
  selector: "login",
  templateUrl: "pages/login/login.html",
  styleUrls: ["pages/login/login-common.css", "pages/login/login.css"]
})
export class LoginComponent implements OnInit {
  user: User;
  isLoggingIn = true;
  page: Page;

  constructor(private _userService: UserService, private _router: Router, private _page: Page) {
    this.user = new User();
    this.user.email = "nativescriptrocks@progress.com";
    this.user.password = "password";
    this.page = _page;
  }

  ngOnInit() {
    this.page.actionBarHidden = true;
  }

  login() {
    this._userService.login(this.user)
      .subscribe(
        () => this._router.navigate(["/list"]),
        (error) => alert("Unfortunately we could not find your account.")
      );
  }
}

ng6

Paste this in the bottom of app.css.

.scaleDown {
  background-image: url("res://bg_login");
  animation-name: scale-down;
  animation-duration: 15;
}
@keyframes scale-down {
  from { transform: scale(1.6, 1.6);  }
  to { transform: scale(1.2, 1.2); }
}

ng7

Use this for login.component.ts. Press “Sign in” twice and watch things blow up. Talk about NativeScript plugins, and how you can truly do native things.

import { Component, OnInit } from "@angular/core";
import { topmost } from "ui/frame";
import { Page } from "ui/page";
import { Router } from "@angular/router";

import { User } from "../../shared/user/user";
import { UserService } from "../../shared/user/user.service";

var explosion = require("nativescript-explosionfield");

@Component({
  providers: [UserService],
  selector: "login",
  templateUrl: "pages/login/login.html",
  styleUrls: ["pages/login/login-common.css", "pages/login/login.css"]
})
export class LoginComponent implements OnInit {
  user: User;
  isLoggingIn = true;
  page: Page;

  constructor(private _userService: UserService, private _router: Router, private _page: Page) {
    this.user = new User();
    this.user.email = "nativescriptrocks@progress.com";
    this.user.password = "password";
    this.page = _page;
  }

  ngOnInit() {
    this.page.actionBarHidden = true;
  }

  firstTime = true;
  login() {
    if (this.firstTime) {
      explosion.explode(this.page.getViewById("logo"));
      this.firstTime = false;
    } else {
      explosion.explode(this.page.getViewById("container"));
      setTimeout(() => {
        explosion.explode(this.page.getViewById("background"));
      }, 5000);
    }
  }
}