added provider api

README.md

@@ -0,0 +1,35 @@
+This is a simple ionic app to show you how to use provider to make request to the server.
+
+You can generate your own provider with the command
+
+```
+ionic g provider [providername]
+```
+
+This will create a `providers/[providername]/[providername].ts` file. In that file you will make the call to your server. You can read [Accessing Rest With Angular](https://medium.com/codingthesmartway-com-blog/angular-4-3-httpclient-accessing-rest-web-services-with-angular-2305b8fd654b) blog post to learn more.
+
+In `src/app/app.module.ts`, I added `import { HttpClientModule } from '@angular/common/http';` to the import statement up top.
+Then in the `imports` section, I added `HttpClientModule`.
+
+In `src/pages/home/home.ts`, I did the following:
+1. added `import { ApiProvider } from './../../providers/api/api';` on the top of the file
+2. added `import { User } from './../../app/users/user';` on the top of the file
+3. injected in the `public apiProvider: ApiProvider` in the constructor method
+4. Added these two methods to tell the app to make the call to the server when it's initialized:
+
+```
+ngOnInit() {
+  this.loadUsers();
+}
+
+loadUsers() {
+  this.apiProvider.getUsers().subscribe(
+    data => this.users = data["_embedded"]["users"],
+    err => {
+        console.log(err);
+    });
+}
+```
+
+https://ionicacademy.com/http-calls-ionic/
+https://scotch.io/tutorials/angular-2-http-requests-with-observables

package-lock.json

@@ -104,6 +104,11 @@
       "resolved": "https://registry.npmjs.org/@ionic-native/core/-/core-4.9.1.tgz",
       "integrity": "sha512-5NLeMQ4C8VH0fApJw/G2U2AMqMCaiWxiky1k3Mr5ShYaw6QvSQrLxD06rInOg5po59n02qdcqCiSEw1JnQYn1g=="
     },
+    "@ionic-native/http": {
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/@ionic-native/http/-/http-4.9.1.tgz",
+      "integrity": "sha512-gr0CCbixUDBal860iJDfI/TFG5K03bOOi9Xac3JZKvfpVWOHdttLHrauRVLnbyc1a18/CQXR3tLTu6UcsRw5LA=="
+    },
     "@ionic-native/splash-screen": {
       "version": "4.9.1",
       "resolved": "https://registry.npmjs.org/@ionic-native/splash-screen/-/splash-screen-4.9.1.tgz",

package.json

@@ -22,6 +22,7 @@
     "@angular/platform-browser": "5.2.11",
     "@angular/platform-browser-dynamic": "5.2.11",
     "@ionic-native/core": "4.9.1",
+    "@ionic-native/http": "^4.9.1",
     "@ionic-native/splash-screen": "4.9.1",
     "@ionic-native/status-bar": "4.9.1",
     "@ionic/pro": "1.0.20",

src/app/app.module.ts

@@ -4,8 +4,11 @@ import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
 import { SplashScreen } from '@ionic-native/splash-screen';
 import { StatusBar } from '@ionic-native/status-bar';
 
+import { HttpClientModule } from '@angular/common/http';
+
 import { MyApp } from './app.component';
 import { HomePage } from '../pages/home/home';
+import { ApiProvider } from '../providers/api/api';
 
 @NgModule({
   declarations: [
@@ -14,7 +17,8 @@ import { HomePage } from '../pages/home/home';
   ],
   imports: [
     BrowserModule,
-    IonicModule.forRoot(MyApp)
+    IonicModule.forRoot(MyApp),
+    HttpClientModule
   ],
   bootstrap: [IonicApp],
   entryComponents: [
@@ -24,7 +28,8 @@ import { HomePage } from '../pages/home/home';
   providers: [
     StatusBar,
     SplashScreen,
-    {provide: ErrorHandler, useClass: IonicErrorHandler}
+    {provide: ErrorHandler, useClass: IonicErrorHandler},
+    ApiProvider
   ]
 })
 export class AppModule {}

src/app/users/user.ts

@@ -0,0 +1,6 @@
+export class User {
+    constructor(
+        public id: number,
+        public name: string
+    ){}
+}

src/pages/home/home.html

@@ -7,8 +7,9 @@
 </ion-header>
 
 <ion-content padding>
-  The world is your oyster.
-  <p>
-    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
-  </p>
+  <ul>
+    <li *ngFor="let user of users">
+      {{user.name}}
+    </li>
+  </ul>
 </ion-content>

src/pages/home/home.ts

@@ -1,5 +1,7 @@
 import { Component } from '@angular/core';
 import { NavController } from 'ionic-angular';
+import { ApiProvider } from './../../providers/api/api';
+import { User } from './../../app/users/user';
 
 @Component({
   selector: 'page-home',
@@ -7,8 +9,20 @@ import { NavController } from 'ionic-angular';
 })
 export class HomePage {
 
-  constructor(public navCtrl: NavController) {
+  users: User[];
 
+  constructor(public navCtrl: NavController, public apiProvider: ApiProvider) {
   }
 
+  ngOnInit() {
+    this.loadUsers();
+  }
+
+  loadUsers() {
+    this.apiProvider.getUsers().subscribe(
+      data => this.users = data["_embedded"]["users"],
+      err => {
+          console.log(err);
+      });
+  }
 }

src/providers/api/api.ts

@@ -0,0 +1,14 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class ApiProvider {
+
+  constructor(public http: HttpClient) {
+  }
+
+  getUsers() {
+    return this.http.get('http://localhost:8080/users');
+  }
+
+}