Série Ionic:Integrando Ionic com sua app AngularJS

ionic-angular-opti

Olá Pessoal,

Vamos ver da forma mais simples como é fácil fazer uma integração com o back-end usando ionic + angularjs. Vou considerar que vc já sabe como criar uma app no ionic. Para o exemplo aqui vou usar o template sidemenu do ionic.

lets go…

Passo 1

Crie um projeto sidemenu do ionic

Passo 2
Vamos criar o controller e dizer pra ele chamar o serviço web, ou seja, nossa api. Lembre-se de ter o serviço rodando.
No arquivo controllers.js gerado pelo ionic que já vem no template adicione, após o controller já gerado:

.controller('MainCtrl', function($scope, $http) {
$scope.teste='mobile'
$http.get('http://www.seuwebservice.com/saldo/conta/1').then(function(resp) {
console.log('Success', resp);
$scope.teste = resp;
}, function(err) {
console.error('ERR', err);
// err.status will contain the status code
})
})

 

Passo 3
Considerando que vc manteve os nomes que veio no template, no arquivo playlits adicione:

<div ng-controller="MainCtrl">
Saldo Atual R$ {{teste.data.saldo}}
</div>

O código completo ficando assim:

 

<ion-view view-title="Camilo App">
<ion-content>
<ion-list>
<ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}">
{{playlist.title}}

</ion-item>
<div ng-controller="MainCtrl">
Saldo Atual R$ {{teste.data.saldo}}
</div>
</ion-list>
</ion-content>
</ion-view>

Passo 4

Vamos testar, basta digitar:

ionic serve

Para testarmos no browser

Passo 5
Observe que me retornou o valor do saldo da conta de um serviço que possuo:

 

ionicappcamilo

Vale lembrar que o objetivo aqui é mostrar a integração e funcionamento. O ideal é que você tenha um Service do lado do angularJS usando um factory do ngResource. Manter os controllers separados dos services e cada um com suas responsabilidades é uma boa prática. Em breve faço um post usando o ngResouce.

O projeto está no meu github.com/camilolopes

https://github.com/camilolopes/workspaceAngularJs
Espero que tenham gostado, simples demais né?

abraço, see ya!!

Deixe um comentário

O seu endereço de e-mail não será publicado.