Angular-and-Loopback-Integration.md

@@ -82,7 +82,7 @@ imports: [
 ```
 
 And the insert SDK modules on providers, that will be injected on others componnents:
-```
+```typescript
 ...
 providers: [
     ...,
@@ -99,3 +99,98 @@ providers: [
   ],
 ...
 ```
+
+On the next step, we will need to create a service that will work like a middleware between SDK API and any Angular Component. Then, create an directory for this services and add an script to it:
+```bash
+$  mkdir client/my-app/src/services
+$  touch client/my-app/src/services/sala.service.ts
+```
+
+
+Now, open the service script created and insert this code:
+```typescript
+
+// There is two API related to this service
+// We doesnt recommend this. This file is an example and this was done just
+// for simplicity
+
+
+// An model of our project
+import { SalaApi } from '../sdk/services/custom/Sala';
+
+// An model of our project that extend the User build-in Model of Loopback 
+import { SecretarioApi } from '../sdk/services/custom/Secretario';
+
+
+// You can import any SDK models as you want
+import { LoopBackFilter,  } from '../sdk/models/BaseModels';
+
+
+// There is some cases that you will need to load the models of SDK
+import { Sala  } from '../sdk/models/Sala';
+
+
+// This service will be injected
+// That is, on constructor of others Components, is possible to access an
+// global instance of this service
+import { Injectable, Component } from '@angular/core';
+
+
+
+@Injectable()
+export class SalaService {
+  constructor(
+    private salaApi: SalaApi,
+    private secretarioApi: SecretarioApi
+  ){}
+
+  
+  // this.secretarioApi.login is an method that is already implemented on 
+  // SDK, generated by LoopBack SDK Builder
+  login(){
+    return this.secretarioApi.login({
+        email:"admin@admin.com",
+        password:"123mudar"
+    }).toPromise();
+  }
+
+  getSalas(){
+   // Here you can use the Loopback SDK features as you want,
+   // like LoopBackFilter
+   let filter: LoopBackFilter = {
+   }
+   return this.salaApi.find<Sala>(filter)
+   .toPromise()
+  }
+}
+```
+
+Now, you have a simple service that connect to your back-end server. If you want to configure the host address, port or similar configurations, you need to change the `client/my-app/src/sdk/lb.config.ts` file.
+
+For test your service, you can change the `client/my-app/src/app/app.module.ts` file, and set this content to follow code:
+```typescript
+import { Component } from '@angular/core';
+import { SalaService } from '../services/sala.service'
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'my-app';
+
+  constructor(public salaService: SalaService) {
+  }
+
+  public ngOnInit() {
+    
+    this.salaService.getSalas()
+    .then(salas => console.log(salas));
+
+    this.salaService.login().then(user => console.log(user));
+  }
+}
+```
+
+Finally, if you turn on your Loopback Server and your Angular API, and access the Angular server on your browser, you can see on console the logs of all data fetched from Model Sala and the server response of authentication attempt.
\ No newline at end of file