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
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 {}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;
}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();
}
}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 = "[email protected]";
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.")
);
}
}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 = "[email protected]";
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.")
);
}
}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); }
}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 = "[email protected]";
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);
}
}
}