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

本文档详细介绍了如何使用Ionic框架结合RESTful服务创建移动应用的过程。从安装配置Ionic环境开始,逐步指导如何搭建RESTful服务器,接入AngularJS控制器与服务层,并实现数据交互。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值