Build Fishing Record(2)List and Detail with RESTful Resource

BuildFishingRecord(2)ListandDetailwithRESTfulResource

Ineedcustomerloginform.

>meteorremoveinsecure

>meteoraddaccounts-password

>meteoradddotansimha:accounts-ui-angular

>meteorremoveautopublish

Iwillredosomethinginionic,notmeteor.Idonotlikehowthemeteorframeworkscaling.

Followingthisdocument

http://ccoenraets.github.io/ionic-tutorial/install-ionic.html

MakesureIhavethelatesttool.

>npmupdate-gcordovaionic

>ionic--version&&cordova--version

1.7.12

5.4.1

Basedonthesampleproject,setuptheRESTfulserver,Ijusttempusethis,laterIwillsetupmyownRESTfulserver.

>gitclonehttps://github.com/ccoenraets/ionic-tutorial

gototheserverdirectory

>npminstall

>nodeserver.js

Visitsomethinglikethistoverifytheserverresourceisok

http://localhost:5000/sessions/1

Aftercreatetheionicframeworkproject,wecanstartourserver.

>ionicserve--lab

Visitthe8100,itwillshowustheconsoleview

http://localhost:8100/#/app/playlists

Visitthe8100withionic-lab,itwillshowusetheandroidandios

http://localhost:8100/ionic-lab

Inthedemo,weareusingngResourcetoaccesstotheRESTfulAPI

ServiceLayer

Createfilewww/js/services.js

angular.module('starter.services',['ngResource'])

.factory('Session',function($resource){

return$resource("http://localhost:5000/sessions/:sessionId");

});

FrameworkLayer

Addingthisservicecodestotheindex.js

<scriptsrc="lib/ionic/js/ionic.bundle.js"></script>

<scriptsrc="lib/ionic/js/angular/angular-resource.min.js"></script>

<scriptsrc="js/app.js"></script>

<scriptsrc="js/services.js"></script>

<scriptsrc="js/controllers.js"></script>

ControllerLayer

WritetheControllerinangularJS

angular.module('starter.controllers',['starter.services'])

.controller('SessionsCtrl',function($scope,Session){

$scope.sessions=Session.query();

})

.controller('SessionCtrl',function($scope,$stateParams,Session){

$scope.session=Session.get({sessionId:$stateParams.sessionId});

});

TemplateLayer

Createsessions.htmltemplate

<ion-viewview-title="Sessions">

<ion-content>

<ion-list>

<ion-itemng-repeat="sessioninsessions"

href="#/app/sessions/{{session.id}}">{{session.title}}</ion-item>

</ion-list>

</ion-content>

</ion-view>

Createthesession.htmltemplate

<ion-viewview-title="Session">

<ion-content>

<divclass="listcard">

<divclass="item">

<h3>{{session.time}}</h3>

<h2>{{session.title}}</h2>

<p>{{session.speaker}}</p>

</div>

<divclass="itemitem-body">

<p>{{session.description}}</p>

</div>

<divclass="itemtabstabs-secondarytabs-icon-left">

<aclass="tab-item">

<iclass="iconion-thumbsup"></i>

Like

</a>

<aclass="tab-item">

<iclass="iconion-chatbox"></i>

Comment

</a>

<aclass="tab-item">

<iclass="iconion-share"></i>

Share

</a>

</div>

</div>

</ion-content>

</ion-view>

RouteLayer

.state('app.sessions',{

url:'/sessions',

views:{

'menuContent':{

templateUrl:'templates/sessions.html',

controller:'SessionsCtrl'

}

}

})

.state('app.session',{

url:'/sessions/:sessionId',

views:{

'menuContent':{

templateUrl:'templates/session.html',

controller:'SessionCtrl'

}

}

});

Openmenu.htmltomodifythestaticmenu.htmltopointtothenewURL.

BuildandStartAndroid/iOS

>ionicbuildios

>ionicplatformaddandroid

>ionicbuildandroid

Wecanalwaysremovetheplatformandthenadditback

>ionicplatformremoveios

References: