Build Fishing Record(2)List and Detail with RESTful Resource
I need customer login form.
> meteor remove insecure
> meteor add accounts-password
> meteor add dotansimha:accounts-ui-angular
> meteor remove autopublish
I will redo something in ionic, not meteor. I do not like how the meteor framework scaling.
Following this document
http://ccoenraets.github.io/ionic-tutorial/install-ionic.html
Make sure I have the latest tool.
> npm update -g cordova ionic
> ionic --version && cordova --version
1.7.12
5.4.1
Base don the sample project, set up the RESTful server, I just temp use this, later I will set up my own RESTful server.
> git clone https://github.com/ccoenraets/ionic-tutorial
go to the server directory
> npm install
> node server.js
Visit something like this to verify the server resource is ok
http://localhost:5000/sessions/1
After create the ionic framework project, we can start our server.
> ionic serve --lab
Visit the 8100, it will show us the console view
http://localhost:8100/#/app/playlists
Visit the 8100 with ionic-lab, it will show use the android and ios
http://localhost:8100/ionic-lab
In the demo, we are using ngResource to access to the RESTful API
Service Layer
Create file www/js/services.js
angular.module('starter.services', ['ngResource'])
.factory('Session', function ($resource){
return $resource("http://localhost:5000/sessions/:sessionId");
});
Framework Layer
Adding this service codes to the index.js
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic/js/angular/angular-resource.min.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
Controller Layer
Write the Controller in angularJS
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});
});
Template Layer
Create sessions.html template
<ion-view view-title="Sessions">
<ion-content>
<ion-list>
<ion-item ng-repeat="session in sessions"
href="#/app/sessions/{{session.id}}">{{session.title}}</ion-item>
</ion-list>
</ion-content>
</ion-view>
Create the session.html template
<ion-view view-title="Session">
<ion-content>
<div class="list card">
<div class="item">
<h3>{{session.time}}</h3>
<h2>{{session.title}}</h2>
<p>{{session.speaker}}</p>
</div>
<div class="item item-body">
<p>{{session.description}}</p>
</div>
<div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item">
<i class="icon ion-thumbsup"></i>
Like
</a>
<a class="tab-item">
<i class="icon ion-chatbox"></i>
Comment
</a>
<a class="tab-item">
<i class="icon ion-share"></i>
Share
</a>
</div>
</div>
</ion-content>
</ion-view>
Route Layer
.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'
}
}
});
Open menu.html to modify the static menu.html to point to the new URL.
Build and Start Android/iOS
> ionic build ios
> ionic platform add android
> ionic build android
We can always remove the platform and then add it back
> ionic platform remove ios
References:
http://sillycat.iteye.com/blog/2266131
http://sillycat.iteye.com/blog/2267656
Build Fishing Record(2)List and Detail with RESTful Resource
猜你喜欢
转载自sillycat.iteye.com/blog/2267991
今日推荐
周排行