利用ionic1 、angularJs1 框架来做的一款app (三)实现路由ion-tabs

目录

(1) . 导包

(2) . 写js路由

(3) . 绘制html页面

(4) . 在controller.js 添加声明对应controller

(5) . 在index.html声明整个app用这个模型

(6) . 三个html页面

(7) . 效果图

---

(1) . 导包

(2) . 写js路由

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider

  .state('tab', {

      url: '/tab',

      abstract: true,

      controller: 'tabCtrl',

     templateUrl: 'templates/tabs.html'

  })

  .state('tab.pendingWork', {

     url: '/pendingWork',

     views: {

         'tab-pendingWork': {

         templateUrl: 'templates/tab-pendingWork.html',

         controller: 'pendingWorkCtrl'

         }

     }

  })

  .state('tab.doneWork', {

     url: '/doneWork',

     views: {

         'tab-doneWork': {

         templateUrl: 'templates/tab-doneWork.html',

         controller: 'doneWorkCtrl'

         }

    }

  })

  .state('tab.aboutSoftware', {

     url: '/aboutSoftware',

     views: {

         'tab-aboutSoftware': {

         templateUrl: 'templates/tab-aboutSoftware.html',

         controller: 'aboutSoftwareCtrl'

         }

     }

  });

  $urlRouterProvider.otherwise('/tab/pendingWork')

});

(3) . 绘制html页面

(4) . 在controller.js 添加声明对应controller

.controller('tabCtrl',function($scope){})

.controller('pendingWorkCtrl', function($scope, Chats) {

})

.controller('doneWorkCtrl', function($scope, $stateParams, Chats) {

})

.controller('aboutSoftwareCtrl', function($scope) {

});

(5) . 在index.html声明整个app用这个模型

(6) . 三个html页面

待办事务











已办事务











关于我们

(7) . 效果图