稍复杂的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线程显示一个正在加载的窗口,可 ...
随机推荐
- 工具栏(UIToolbar)
工具栏一般用来显示弹出框,以至于UIPopoverController类包含方法presentPopoverFromBarButtonItem:permittedArrowDirections:ani ...
- 欧拉回路 uoj117
写了一道欧拉回路的模板题.先判断是否是欧拉回路,有向图和无向图有一点点不同,然后就是特判独立点的存在. 之后是输出路径,和dls学的dfs,利用last数组的更新可以做到线性的复杂度,否则一不小心就会 ...
- [HNOI2006]最短母串问题 --- AC自动机 + 隐式图搜索
[HNOI2006]最短母串问题 题目描述: 给定n个字符串(S1,S2.....,Sn),要求找到一个最短的字符串T,使得这n个字符串(S1,S2,......,Sn)都是T的子串. 输入格式: 第 ...
- php回溯
$sl = debug_backtrace(); 返回的$sl 是一个二维数组 包含如下元素: function string 当前的函数名,参见: __FUNCTION__. line intege ...
- JDK及JRE中bin工具说明
jre/bin工具说明:javac:Java编译器,将Java源代码换成字节代 java:Java解释器,直接从类文件执行Java应用程序代码 appletviewer(小程序浏览器):一种执行HTM ...
- 《C# to IL》第三章 选择和循环
在IL中,标号(label)是一个末尾带有冒号(即:)的名称.它使我们能够从代码的一部分无条件地跳转到另一部分.我们经常在由反编译器生成的IL代码中看到这个标号.例如: IL_0000: ldstr ...
- Windows UWP开发系列 – 3D变换
在Win8.1中,引入了一个PlaneProjection可以实现3D变换,但它的变换方式比较简单,只能实现基本的旋转操作.在Windows 10 UWP中,引入了一个更加强大的3D变换Transfo ...
- 将dll文件注入到其他进程中的一种新方法
http://www.45it.com/windowszh/201212/33946.htm http://www.hx95.cn/Article/OS/201212/65095.html 我们知道将 ...
- STM32 Hardware Development
http://www.st.com/web/en/resource/technical/document/application_note/CD00164185.pdf AN2586 http://w ...
- 关于jQuery中的 offset() 和 position() 的用法
---恢复内容开始--- 在jQuery中有两个获取元素位置的方法offset()和position().position()方法是在1.2.6版本之后加入的,为什么要引入这个方法呢?这两个方法之间有 ...