稍复杂的ionic例子：显示一个列表，并且允许点击进入列表项
这个例子，按照MVC的方式进行了分层，下面是代码：
demo3.htm
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>angular-demo3</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script type="text/javascript" src="../lib/ionic/js/ionic.bundle.js" charset="utf-8"></script>
<script type="text/javascript" src="js/demo3_app.js"></script>
<script type="text/javascript" src="js/demo3_controllers.js"></script>
<script type="text/javascript" src="js/demo3_services.js"></script>
</head>
<body>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
</html>
demo3_app.js
var app = angular.module('app',['ionic','demo3.controllers','demo3.services']);
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('chats', {
url: '/chats',
templateUrl: 'templates/chats.html',
controller: 'ChatsCtrl'
})
.state('chat-detail', {
url: '/chats/:chatId',
templateUrl: 'templates/chat-detail.html',
controller: 'ChatDetailCtrl'
});
$urlRouterProvider.otherwise('/chats');
});
demo3_controllers.js
angular.module('demo3.controllers',[])
.controller('ChatsCtrl', function($scope, Chats) {
$scope.chats = Chats.all();
$scope.remove = function(chat) {
Chats.remove(chat);
}
})
.controller('ChatDetailCtrl', function($scope, $stateParams, Chats) {
$scope.chat = Chats.get($stateParams.chatId);
});
demo3_services.js
angular.module('demo3.services',[]).factory('Chats',function(){
var chats = [{
id: 0,
name: 'Ben Sparrow',
lastText: 'You on your way?',
face: 'https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/dpp/pic/item/cc11728b4710b912d53c66bdc5fdfc03934522f7.jpg'
}, {
id: 1,
name: 'Max Lynx',
lastText: 'Hey, it\'s me',
face: 'https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/dpp/pic/item/5243fbf2b21193130a116ff363380cd791238d27.jpg'
},{
id: 2,
name: 'Adam Bradleyson',
lastText: 'I should buy a boat',
face: 'https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/dpp/pic/item/95eef01f3a292df514390469ba315c6035a873d0.jpg'
}, {
id: 3,
name: 'Perry Governor',
lastText: 'Look at my mukluks!',
face: 'https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/dpp/pic/item/500fd9f9d72a6059884e49662e34349b033bba74.jpg'
}, {
id: 4,
name: 'Mike Harrington',
lastText: 'This is wicked good ice cream.',
face: 'https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/dpp/pic/item/9e3df8dcd100baa1efd9eec74110b912c9fc2ed0.jpg'
}];
return {
all:function() {
return chats;
},
remove:function(chat) {
chats.splice(chats.indexOf(chat), 1);
},
get: function(chatId) {
for (var i = 0; i < chats.length; i++) {
if (chats[i].id === parseInt(chatId)) {
return chats[i];
}
}
return null;
}
};
});
chats.html
<ion-view view-title="Chats">
<ion-content>
<ion-list>
<ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" href="#/chats/{{chat.id}}">
<img ng-src="{{chat.face}}">
<h2>{{chat.name}}</h2>
<p>{{chat.lastText}}</p>
<i class="icon ion-chevron-right icon-accessory"></i> <ion-option-button class="button-assertive" ng-click="remove(chat)">
Delete
</ion-option-button>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
chat-detail.html
<ion-view view-title="{{chat.name}}">
<ion-content class="padding">
<img ng-src="{{chat.face}}" style="width: 64px; height: 64px">
<p>
{{chat.lastText}}
</p>
</ion-content>
</ion-view>
有几个地方简单分析一下：
1、页面路由在设置chat-detail页面时，使用了变量:chatId，那么在controller定义的时候通过$stateParams.chatId可以得到该变量
2、注意demo3_services.js页面中使用factory定义服务的方式，在controller中使用Chats使用该服务
3、注意demo3_app.js页面中引用demo3_controllers.js和demo3_services.js，使用MVC的方式
稍复杂的ionic例子：显示一个列表，并且允许点击进入列表项的更多相关文章
- 原生JS实现点击一个按钮显示一个div，再点击按钮div隐藏，或点击除div外其它空白处div隐藏
<!DOCTYPE html> <html style="font-size: 24px"> <head> <title>js点击按 ...
- Win10 UWP开发系列：使用VS2015 Update2+ionic开发第一个Cordova App
安装VS2015 Update2的过程是非常曲折的.还好经过不懈的努力,终于折腾成功了. 如果开发Cordova项目的话,推荐大家用一下ionic这个框架,效果还不错.对于Cordova.PhoneG ...
- 第六篇：在SOUI中用九宫格拉伸方式显示一个图片资源
SOUI的初学者刚开始可能难以搞清楚在SOUI中显示一个图片资源的流程,这里做一个简单的示范. 首先我们准备好一张图,以下图为例. 第一步,我们首先把这个图片文件复制到demo的uires目录下,新建 ...
- QT：窗口最小化时显示一个小浮标
有些窗口在自身最小化时要在桌面上显示一个小浮标,让用户利用这个小浮标进行各种操作(例如迅雷的悬浮窗一样),我试着用QT实现一下这个功能. PS:本来以为这个功能很简单,却搞了我两个晚上,泪奔... 思 ...
- 实现cell显示一个删除button
假设想实现滑动cell时,cell右边就能显示一个删除button,则要实现tableview 下边方法: - (void)tableView:(UITableView *)tableView com ...
- OpenGL编程逐步深入（三）在窗口中显示一个三角形
这一节教程的内容会比较少,我们仅仅是对上一节教程中的代码进行扩展,在窗口中渲染一个三角形出来. 本节我们以下图所示正方形来讲解OpenGl中的坐标系统.当沿着Z轴负方向看时,可见顶点的坐标必须在这个正 ...
- OpenGL编程逐步深入（二）在窗口中显示一个点
准备知识 在本文中我们将会接触到OpenGl的扩展库GLEW( OpenGL Extension Wrangler Library),GLEW可以帮助我们处理OpenGl中繁琐的扩展管理.一旦初始化后 ...
- Android TV开发总结（七）构建一个TV app中的剧集列表控件
原文:Android TV开发总结(七)构建一个TV app中的剧集列表控件 版权声明:我已委托"维权骑士"(rightknights.com)为我的文章进行维权行动.转载务必转载 ...
- 在线程中显示一个窗口(多个UI线程)
多数耗时操作可以异步执行,推荐async/await. 但和UI相关的部分仅能在UI线程执行,这时UI线程的耗时操作,导致界面卡死,不够友好. 我们可以创建一个单独的UI线程显示一个正在加载的窗口,可 ...
随机推荐
- VS2015常用配置
一.调用控制台: 在VS中使用opencv或者QT过程中,完成编程后, 运行发现没有控制台窗口, 比如我们用Qt编写的界面软件, 又想看到我们在代码中添加的打印日志信息,这个时候加上控制台窗口就能实现 ...
- BZOJ 4036: [HAOI2015]按位或 集合幂函数 莫比乌斯变换 莫比乌斯反演
http://www.lydsy.com/JudgeOnline/problem.php?id=4036 http://blog.csdn.net/lych_cys/article/details/5 ...
- zoj 3329 概率dp
题意:有三个骰子,分别有k1,k2,k3个面.每个面值为1--kn每次掷骰子,如果三个面分别为a,b,c则分数置0,否则加上三个骰子的分数之和.当分数大于n时结束.求游戏的期望步数.初始分数为0 链接 ...
- 四、python之 if while for
一.if条件判断 if 条件判断: 逻辑操作…… …… else: 逻辑操作…… 其中"判断条件"成立时(非零),则执行后面的语句,而执行内容可以多行,以缩进来区分表示同一范围. ...
- 思科DCHP解决方案
DHCP功能平时用的不算少,而且本人的几乎所有的DHCP功能都是在交换机上实现的,虽然也可以通过PC实现,而且PC的DHCP Server功能还更完善,比如可以不受DHCP作用域的限制.IP分配情况直 ...
- 01-03-01【Nhibernate (版本3.3.1.4000) 出入江湖】id标签的unsaved-value属性
父表 <class name="Model.Customer, Model" discriminator-value="0"> <!--uns ...
- Spring+JDBC实例
1. Customer 表 在这个例子中,我们使用的是MySQL数据库. CREATE TABLE `customer` ( `CUST_ID` int(10) unsigned NOT NULL A ...
- [c#基础]使用抽象工厂实现三层
引言 昨天加了一天班,今天闲来无事,就在想如何将之前的三层和最近一直在学的设计模式给联系在一起,然后就动手弄了个下面的小demo. 项目结构 项目各个层实现 Wolfy.Model层中有一个抽象类Ba ...
- 【ajax 提交表单】多种方式的注意事项 ,serialize()的使用
在业务中,可能因为表单内容过于庞大,字段过于繁杂,如果人为去拼接的话 ,需要耗费大量的时间和精力,与此同时,代码看上去也是冗余不堪. 所以,提交表单的时候如果能整个表单数据整体提交,那是非常开心的事情 ...
- Sql语句-case when then else end
依据上面的表信息输出以下的结果: 以下是建库和表结构据: create table DeptSales ( deptID int, SubjMonth int , sales int , deptna ...