稍复杂的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的方式

posted @ 2016-09-16 23:42  魔豆  阅读(2632)  评论(0)  编辑  收藏  举报