这个例子，按照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的方式
时间： 2024-11-07 21:39:48