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:
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!!
