Update demo apps

demo-angular/app/app.component.html

@@ -1,6 +1 @@
-<StackLayout>
-    <Label text="{{userId}}"></Label>
-    <FacebookLoginButton (login)="onLogin($event)" (logout)="onLogout($event)"></FacebookLoginButton>
-    <Button text="Custom Login Button" (tap)="manualLogin()"></Button>
-    <Button text="Custom Logout Button" (tap)="manualLogout()"></Button>
-</StackLayout>
+<page-router-outlet></page-router-outlet>

demo-angular/app/app.component.ts

@@ -5,37 +5,4 @@ import * as Facebook from "nativescript-facebook";
     selector: "ns-app",
     templateUrl: "app.component.html",
 })
-export class AppComponent {
-    userId: string = "not logged in";
-
-    constructor(private ref: ChangeDetectorRef) {
-    }
-
-    onLogin = function (eventData: Facebook.LoginEventData) {
-        if (eventData.error) {
-            alert("Error during login: " + eventData.error);
-        } else {
-            this.userId = "UserId: " + eventData.loginResponse.userId;
-            this.ref.detectChanges();
-        }
-    };
-
-    manualLogin = function () {
-        Facebook.login((error, loginResponse) => {
-            this.userId = "UserId: " + loginResponse.userId;
-            this.ref.detectChanges();
-        });
-    };
-
-    manualLogout = function () {
-        Facebook.logout(() => {
-            this.userId = "not logged in";
-            this.ref.detectChanges();
-        });
-    };
-
-    public onLogout() {
-        this.userId = "not logged in";
-        this.ref.detectChanges();
-    }
-}
+export class AppComponent {}

demo-angular/app/app.config.ts

@@ -0,0 +1,3 @@
+export const config = {
+    FACEBOOK_GRAPH_API_URL: "https://graph.facebook.com/v2.9"
+};

demo-angular/app/app.css

@@ -10,3 +10,4 @@ of writing your own CSS rules. For a full list of class names in the theme
 refer to http://docs.nativescript.org/ui/theme.
 */
 @import 'nativescript-theme-core/css/core.light.css';
+

demo-angular/app/app.module.ts

@@ -1,23 +1,33 @@
-import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
+import { NgModule, NO_ERRORS_SCHEMA, NgModuleFactoryLoader } from "@angular/core";
 import { NativeScriptModule } from "nativescript-angular/nativescript.module";
+import { NativeScriptRouterModule, NSModuleFactoryLoader } from "nativescript-angular/router";
 import { AppComponent } from "./app.component";
-
+import { LoginModule } from "./pages/login/login.module";
+import { HomeModule } from "./pages/home/home.module";
 import { NativeScriptFacebookModule } from "nativescript-facebook/angular";
-
 import * as application from 'application';
+import { routes } from "./app.routing";
+import { NavigationService } from "./services/navigation.service";
+
 let nsFacebook = require('nativescript-facebook');
 
 application.on(application.launchEvent, function (args) {
     nsFacebook.init("1771472059772879");
 });
 
 @NgModule({
-    bootstrap: [ AppComponent ],
+    bootstrap: [AppComponent],
     imports: [
         NativeScriptModule,
-        NativeScriptFacebookModule
+        NativeScriptFacebookModule,
+        NativeScriptRouterModule,
+        NativeScriptRouterModule.forRoot(routes)
+    ],
+    providers: [
+        NavigationService,
+        { provide: NgModuleFactoryLoader, useClass: NSModuleFactoryLoader }
     ],
-    declarations: [ AppComponent ],
-    schemas: [ NO_ERRORS_SCHEMA ]
+    declarations: [AppComponent],
+    schemas: [NO_ERRORS_SCHEMA]
 })
 export class AppModule { }

demo-angular/app/app.routing.ts

@@ -0,0 +1,16 @@
+export const routes = [
+    {
+        path: "home",
+        loadChildren: "./pages/home/home.module#HomeModule"
+    },
+    {
+        path: "login",
+        loadChildren: "./pages/login/login.module#LoginModule"
+    },
+    {
+        path: "",
+        redirectTo: "login",
+        pathMatch: "full"
+    }
+
+];

demo-angular/app/pages/home/home.component.css

@@ -0,0 +1,26 @@
+.label {
+    font-size: 10;
+    font-weight: bold;
+    padding-top: 10;
+}
+
+.home {
+    margin-left: 30;
+    margin-right: 30;
+    margin-top: 20%;
+}
+
+.home .buttons {
+    margin-top: 30%;
+}
+
+.home .info {
+    margin-top: 20;
+    horizontal-align: center;
+}
+
+.avatar {
+    border-radius: 100;
+    width: 150;
+    height: auto;
+}

demo-angular/app/pages/home/home.component.html

@@ -0,0 +1,13 @@
+<StackLayout class="home">
+    <Image *ngIf="avatarUrl" src="{{avatarUrl}}" class="avatar"></Image>
+    <StackLayout class="info">
+        <Label text="ID:" class="label"></Label>
+        <Label text="{{ userId }}"></Label>
+        <Label text="NAME:" class="label"></Label>
+        <Label text="{{ username }}"></Label>
+    </StackLayout>
+    <StackLayout class="buttons">
+        <FacebookLoginButton (logout)="onLogout($event)"></FacebookLoginButton>
+        <Button text="Log out (custom)" (tap)="logout()"></Button>
+    </StackLayout>
+</StackLayout>

demo-angular/app/pages/home/home.component.ts

@@ -0,0 +1,55 @@
+import { Component, ChangeDetectorRef } from "@angular/core";
+import * as Facebook from "nativescript-facebook";
+import { NavigationService } from "../../services/navigation.service";
+import { config } from "../../app.config";
+let http = require("http");
+let appSettings = require("application-settings");
+
+@Component({
+    selector: "home",
+    moduleId: module.id,
+    templateUrl: "home.component.html",
+    styleUrls: ["home.component.css"]
+})
+export class HomeComponent {
+    accessToken: string = appSettings.getString("access_token");
+    userId: string;
+    username: string;
+    avatarUrl: string;
+
+    constructor(private ref: ChangeDetectorRef, private navigationService: NavigationService) {
+        // Get logged in user's info
+        http.getJSON(config.FACEBOOK_GRAPH_API_URL + "/me?access_token=" + this.accessToken).then((res) => {
+            this.username = res.name;
+            this.userId = res.id;
+
+            // Get logged in user's avatar
+            // ref: https://github.com/NativeScript/NativeScript/issues/2176
+            http.getJSON(config.FACEBOOK_GRAPH_API_URL + "/" + this.userId + "/picture?type=large&redirect=false&access_token=" + this.accessToken).then((res) => {
+                this.avatarUrl = res.data.url;
+                this.ref.detectChanges();
+            }, function (err) {
+                alert("Error getting user info: " + err);
+            });
+        }, function (err) {
+            alert("Error getting user info: " + err);
+        });
+    }
+
+    onLogout(eventData: Facebook.LoginEventData) {
+        if (eventData.error) {
+            alert("Error during login: " + eventData.error);
+        } else {
+            appSettings.clear();
+            this.navigationService.go(['login'], "slideRight");
+        }
+
+    }
+
+    logout() {
+        Facebook.logout(() => {
+            appSettings.clear();
+            this.navigationService.go(['login'], "slideRight");
+        });
+    }
+}

demo-angular/app/pages/home/home.module.ts

@@ -0,0 +1,24 @@
+import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
+import { NativeScriptModule } from "nativescript-angular/nativescript.module";
+import { NativeScriptRouterModule } from "nativescript-angular/router";
+import { HomeComponent } from "./home.component";
+
+import { NativeScriptFacebookModule } from "nativescript-facebook/angular";
+
+export const routerConfig = [
+    {
+        path: "",
+        component: HomeComponent
+    }
+];
+
+@NgModule({
+    imports: [
+        NativeScriptModule,
+        NativeScriptRouterModule,
+        NativeScriptRouterModule.forChild(routerConfig)
+    ],
+    declarations: [ HomeComponent ],
+    schemas: [ NO_ERRORS_SCHEMA ]
+})
+export class HomeModule { }

demo-angular/app/pages/login/login.component.css

@@ -0,0 +1,5 @@
+.login-buttons {
+    margin-left: 30;
+    margin-right: 30;
+    margin-top: 80%;
+}

demo-angular/app/pages/login/login.component.html

@@ -0,0 +1,4 @@
+<StackLayout class="login-buttons">
+    <FacebookLoginButton (login)="onLogin($event)"></FacebookLoginButton>
+    <Button text="Continue with Facebook (custom)" (tap)="login()"></Button>
+</StackLayout>

demo-angular/app/pages/login/login.component.ts

@@ -0,0 +1,36 @@
+import { Component, ChangeDetectorRef } from "@angular/core";
+import * as Facebook from "nativescript-facebook";
+import { NavigationService } from "../../services/navigation.service";
+let appSettings = require("application-settings");
+
+@Component({
+    selector: "login",
+    moduleId: module.id,
+    templateUrl: "login.component.html",
+    styleUrls: ["login.component.css"]
+})
+export class LoginComponent {
+
+    constructor(private ref: ChangeDetectorRef, private navigationService: NavigationService) {
+    }
+
+    onLogin(eventData: Facebook.LoginEventData) {
+        if (eventData.error) {
+            alert("Error during login: " + eventData.error);
+        } else {
+            appSettings.setString("access_token", eventData.loginResponse.token);
+            this.navigationService.go(['home']);
+        }
+    }
+
+    login() {
+        Facebook.login((error, fbData) => {
+            if (error) {
+                alert("Error during login: " + error.message);
+            } else {
+                appSettings.setString("access_token", fbData.token);
+                this.navigationService.go(['home']);
+            }
+        });
+    }
+}

demo-angular/app/pages/login/login.module.ts

@@ -0,0 +1,24 @@
+import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
+import { NativeScriptModule } from "nativescript-angular/nativescript.module";
+import { NativeScriptRouterModule } from "nativescript-angular/router";
+import { LoginComponent } from "./login.component";
+
+import { NativeScriptFacebookModule } from "nativescript-facebook/angular";
+
+export const routerConfig = [
+    {
+        path: "",
+        component: LoginComponent
+    }
+];
+
+@NgModule({
+    imports: [
+        NativeScriptModule,
+        NativeScriptRouterModule,
+        NativeScriptRouterModule.forChild(routerConfig)
+    ],
+    declarations: [ LoginComponent ],
+    schemas: [ NO_ERRORS_SCHEMA ]
+})
+export class LoginModule { }

demo-angular/app/services/navigation.service.ts

@@ -0,0 +1,24 @@
+import { Injectable } from "@angular/core";
+import { RouterExtensions } from "nativescript-angular/router";
+
+@Injectable()
+export class NavigationService {
+
+    constructor(private routerExtensions: RouterExtensions) { }
+
+    go(route: Array<string>, name?: string) {
+
+        this
+            .routerExtensions
+            .navigate(route, {
+                clearHistory: true,
+                animated: true,
+                transition: {
+                    name: name ? name : "slide",
+                    duration: 200,
+                    curve: "linear"
+                }
+            });
+
+    }
+}

demo-angular/package.json

@@ -1,15 +1,13 @@
 {
-  "description": "NativeScript Application",
-  "license": "SEE LICENSE IN <your-license-filename>",
-  "readme": "NativeScript Application",
-  "repository": "<fill-your-repository-here>",
+  "description": "NativeScript Facebook Sample Application With Angular",
+  "license": "MIT",
   "nativescript": {
     "id": "org.nativescript.demoangular",
     "tns-android": {
       "version": "3.0.0"
     },
     "tns-ios": {
-      "version": "3.0.0"
+      "version": "3.0.1"
     }
   },
   "dependencies": {

demo/.nsbuildinfo

@@ -0,0 +1,4 @@
+{
+	"prepareTime": "Thu May 25 2017 15:02:35 GMT+0300 (EEST)",
+	"buildTime": "Thu May 25 2017 15:02:58 GMT+0300 (EEST)"
+}

demo/.nslivesyncinfo

@@ -0,0 +1,7 @@
+{
+	"time": "Thu May 25 2017 15:02:35 GMT+0300 (EEST)",
+	"bundle": false,
+	"release": false,
+	"changesRequireBuild": true,
+	"changesRequireBuildTime": "Thu May 25 2017 15:02:35 GMT+0300 (EEST)"
+}

demo/app/app.config.ts

@@ -0,0 +1,3 @@
+export const config = {
+    FACEBOOK_GRAPH_API_URL: "https://graph.facebook.com/v2.9"
+};