From 460c5178f381abd5ceff109e3de196cd2380199c Mon Sep 17 00:00:00 2001 From: tsonevn Date: Wed, 3 Jan 2018 17:21:35 +0200 Subject: [PATCH] adding extended example, which shows how to use ActivityIndicator during HTTP request --- app/App_Resources/iOS/Info.plist | 15 ++++++ .../activity-indicator-examples.component.ts | 3 +- .../activity-indicator-examples.module.ts | 11 ++++- .../setting-busy-http-request/article.md | 7 +++ .../setting-busy-http-request.component.html | 17 +++++++ .../setting-busy-http-request.component.ts | 47 +++++++++++++++++++ 6 files changed, 98 insertions(+), 2 deletions(-) create mode 100644 app/ui-category/activity-indicator/setting-busy-http-request/article.md create mode 100644 app/ui-category/activity-indicator/setting-busy-http-request/setting-busy-http-request.component.html create mode 100644 app/ui-category/activity-indicator/setting-busy-http-request/setting-busy-http-request.component.ts diff --git a/app/App_Resources/iOS/Info.plist b/app/App_Resources/iOS/Info.plist index 383801fe..91d3e3d6 100644 --- a/app/App_Resources/iOS/Info.plist +++ b/app/App_Resources/iOS/Info.plist @@ -48,5 +48,20 @@ NSAllowsArbitraryLoads + NSAppTransportSecurity + + NSExceptionDomains + + fakeresponse.com + + NSIncludesSubdomains + + NSTemporaryExceptionAllowsInsecureHTTPLoads + + NSTemporaryExceptionMinimumTLSVersion + TLSv1.1 + + + diff --git a/app/ui-category/activity-indicator/activity-indicator-examples.component.ts b/app/ui-category/activity-indicator/activity-indicator-examples.component.ts index 31000d46..e9da29b7 100644 --- a/app/ui-category/activity-indicator/activity-indicator-examples.component.ts +++ b/app/ui-category/activity-indicator/activity-indicator-examples.component.ts @@ -2,7 +2,8 @@ import { Component, ChangeDetectionStrategy } from "@angular/core"; import { Link } from "./../../link"; let menuLinks = [ - new Link("Set busy property", "/activity-indicator/setting-busy") + new Link("Set busy property", "/activity-indicator/setting-busy"), + new Link("Set busy property(during HTTP Request)", "/activity-indicator/setting-busy-http-request") ]; @Component({ diff --git a/app/ui-category/activity-indicator/activity-indicator-examples.module.ts b/app/ui-category/activity-indicator/activity-indicator-examples.module.ts index 2bf1aaf9..54760740 100644 --- a/app/ui-category/activity-indicator/activity-indicator-examples.module.ts +++ b/app/ui-category/activity-indicator/activity-indicator-examples.module.ts @@ -1,8 +1,10 @@ import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core"; import { NativeScriptRouterModule } from "nativescript-angular/router"; import { NativeScriptCommonModule } from "nativescript-angular/common"; +import { NativeScriptHttpClientModule } from "nativescript-angular/http-client"; import { ActivityIndicatorExamplesComponent } from "./activity-indicator-examples.component"; import { SettingBusyComponent } from "./setting-busy/setting-busy.component"; +import { SettingBusyHttpRequestComponent } from "./setting-busy-http-request/setting-busy-http-request.component"; import { TitleAndNavButtonModule } from "../../directives/title-and-nav-button.module"; export const routerConfig = [ @@ -14,6 +16,11 @@ export const routerConfig = [ path: "setting-busy", component: SettingBusyComponent, data: { title: "Set busy property" } + }, + { + path: "setting-busy-http-request", + component: SettingBusyHttpRequestComponent, + data: { title: "Set busy property(during HTTP Request)" } } ]; @@ -23,11 +30,13 @@ export const routerConfig = [ TitleAndNavButtonModule, NativeScriptCommonModule, NativeScriptRouterModule, + NativeScriptHttpClientModule, NativeScriptRouterModule.forChild(routerConfig) ], declarations: [ ActivityIndicatorExamplesComponent, - SettingBusyComponent + SettingBusyComponent, + SettingBusyHttpRequestComponent ] }) diff --git a/app/ui-category/activity-indicator/setting-busy-http-request/article.md b/app/ui-category/activity-indicator/setting-busy-http-request/article.md new file mode 100644 index 00000000..6374b142 --- /dev/null +++ b/app/ui-category/activity-indicator/setting-busy-http-request/article.md @@ -0,0 +1,7 @@ +Extended example, desmostrating how to use ActivityIndicator during HTTP request + +Setting an activity indicator in the HTML: + + +Setting an activity indicator’s `busy` property value: + \ No newline at end of file diff --git a/app/ui-category/activity-indicator/setting-busy-http-request/setting-busy-http-request.component.html b/app/ui-category/activity-indicator/setting-busy-http-request/setting-busy-http-request.component.html new file mode 100644 index 00000000..dce428a0 --- /dev/null +++ b/app/ui-category/activity-indicator/setting-busy-http-request/setting-busy-http-request.component.html @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/ui-category/activity-indicator/setting-busy-http-request/setting-busy-http-request.component.ts b/app/ui-category/activity-indicator/setting-busy-http-request/setting-busy-http-request.component.ts new file mode 100644 index 00000000..0eb82e50 --- /dev/null +++ b/app/ui-category/activity-indicator/setting-busy-http-request/setting-busy-http-request.component.ts @@ -0,0 +1,47 @@ +// >> activity-indicator-setting-busy-code +import { Component, AfterViewInit } from "@angular/core"; +import { HttpClient, HttpHeaders, HttpResponse } from "@angular/common/http"; + +@Component({ + moduleId: module.id, + templateUrl: "./setting-busy-http-request.component.html" +}) +export class SettingBusyHttpRequestComponent implements AfterViewInit { + public originatingIp = ""; + public status = ""; + public slept = "_"; + public response = ""; + public isBusy = true; + private serverUrl = "http://www.fakeresponse.com/api/?sleep=5"; + + constructor(private http: HttpClient) {} + + ngAfterViewInit() { + let headers = this.createRequestHeader(); + this.http.get(this.serverUrl, { headers: headers }) + .subscribe( + data => { + this.originatingIp = data["meta"]["originating_ip"]; + this.status = data["status"]; + this.slept = data["slept"]; + this.response = data["response"]; + this.isBusy = false; + }, + err => { + console.log("Error occured."); + console.log(err); + } + ); + } + + private createRequestHeader() { + let headers = new HttpHeaders(); + // set headers here e.g. + headers.append("AuthKey", "my-key"); + headers.append("AuthToken", "my-token"); + headers.append("Content-Type", "application/json"); + + return headers; + } +} +// << activity-indicator-setting-busy-code