稍复杂的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线程显示一个正在加载的窗口,可 ...
随机推荐
- 2017/11/6 Leetcode 日记
2017/11/6 Leetcode 日记 344. Reverse String Write a function that takes a string as input and returns ...
- saltstack 开发
最近跟总部一个项目用saltstack封装api来用,可以很轻松的实现restful api发布,提供别人直接调用 salt 本身有2个内置变量(__salt__, __opts__),通过salt ...
- 获取token
获取token 提示:openstack 这个是获取N版的方法 ,主要区别在于这个路径上(http://192.168.0.228:35357/v3/auth/tokens ),以前版本可能会是v2 ...
- 类命名空间与对象、实例的命名空间 and 面向对象的组合用法
类命名空间与对象.实例的命名空间 创建一个类就会创建一个类的名称空间,用来存储类中定义的所有名字,这些名字称为类的属性 而类有两种属性:静态属性和动态属性 静态属性就是直接在类中定义的变量 动态属性就 ...
- 【UOJ #108】【APIO 2013】TOLL
http://uoj.ac/problem/108 好神的一道题啊. 原图边权互不相同是重点! 如果有一个点集,有两组边集,要求这两组边集的并集的最小生成树,可以对两组边集分别求一下最小生成树构成新的 ...
- [MVC4]Data Annotations Extensions:无法使用EmailAddress等验证特性的解决方法
本文地址:http://www.cnblogs.com/egger/p/3404159.html 欢迎转载 ,请保留此链接๑•́ ₃•̀๑! 数据注解(Data Annotations) Web应用 ...
- 【转载】Unicode 编码表
转载备忘:Unicode 编码表 具体请移步: http://www.cnblogs.com/chenwenbiao/archive/2011/08/17/2142718.html
- 【ArcGIS笔记】数据处理
1.ARCGIS在导入Excel坐标点的时候出现"没有注册类"的情况怎么办? 确保你本机上装有office,并且版本要能够识别XLSX格式.2007以上. 2.导入excel时re ...
- centos安装gcc
1.安装gcc基本开发工具环境 yum groupinstall 'Development Tools' 2.安装完成后查看安装是否成功 whereis gcc 3.查看gcc版本 gcc --ver ...
- textbox约束输入值问题解答
网上很多关于文本框只能输入数字的,今天又找了一遍,发现以前的写法居然有点问题! onkeypress="if (event.keyCode<48 || event.keyCode> ...