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

最新推荐文章于 2020-12-03 21:01:36 发布

原创最新推荐文章于 2020-12-03 21:01:36 发布 · 443 阅读

1 ·

CC 4.0 BY-SA版权

本文详细介绍了如何使用Ionic框架结合AngularJS构建一个具备多页面路由和控制器的应用，包括了从导包到实现三个主要功能页面的具体步骤。

(1) . 导包

(2) . 写js路由

(3) . 绘制html页面

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

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

(6) . 三个html页面

(7) . 效果图

(1) . 导包

<script src="js/app.js"></script>

<script src="lib/ionic/js/ionic.bundle.js"></script>

<link href="lib/ionic/css/ionic.css" rel="stylesheet">

(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页面

<ion-tabs class="tabs-icon-top tabs-positive">

       <ion-tab title="待办单据" icon-off="ion-ios-list-outline" icon-on="ion-ios-list" href="#/tab/pendingWork">

               <ion-nav-view name="tab-pendingWork"></ion-nav-view>

       </ion-tab>

       <ion-tab title="已办单据" icon-off="ion-ios-paper-outline" icon-on="ion-ios-paper" href="#/tab/doneWork">

               <ion-nav-view name="tab-doneWork"></ion-nav-view>

       </ion-tab>

       <ion-tab title="关于我们" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/aboutSoftware">

               <ion-nav-view name="tab-aboutSoftware"></ion-nav-view>

       </ion-tab>

</ion-tabs>

(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用这个模型

<body ng-app="starter">

     <ion-nav-bar class="bar-positive">

          <ion-nav-back-button>

          </ion-nav-back-button>

     </ion-nav-bar>

     <ion-nav-view></ion-nav-view>

</body>

(6) . 三个html页面

<ion-view view-title="待办事务">

<ion-content>

待办事务

</ion-content>

</ion-view>



<ion-view view-title="已办事务">

<ion-content class="padding">

已办事务

</ion-content>

</ion-view>



<ion-view view-title="关于我们">

<ion-content>

关于我们

</ion-content>

</ion-view>