Ionic 整理项目结构 - 抽离 + 功能模块划分

标签： ionic

ionic start myApp tabs 在官方 tabs 案例模板进行改造

重新整理结构

为什么要抽离

• controller.js 所有的控制器都在 controller.js 中，就会动不动就几百行上千行，对于查找运维定位都很不方便

• app.js 所有的路由文件都在这里，那每个合作的人都会修改这个文件，那就会产生大量的冲突，非常不方便，所以要分离

抽取步骤：

• app.js run 控制项目启动的
• config.js config 控制不同平台兼容性。ionic 虽然显示一套代码，但是 ionic在不同的平台上显示的效果是不一样的
• global.js constant 全局变量
  我们会有很多的变量，服务器地址，版本号等等都是不经常改变的，只要一引入对应模块，我们就可以公用这些变量
• route.js config 控制路由跳转的
  全局路由模块

按照MVC思想，进行功能模块划分：

Controller: 业务逻辑的一些功能
Service(Factory): 和服务器进行数据请求访问
Html页面: 功能界面
Route: 子功能路由 js，控制我们的页面跳转

---

我们进行抽取

• config.js 配置模块

// 配置模块， 控制不同平台的兼容性angular.module( 'config', [] )    .config( function( $ionicConfigProvider ) { // 引入了 $ionicConfigProvider 服务        // ionicConfigProvider 服务中 platform 平台下 两种系统 tabs的 定位方式        $ionicConfigProvider.platform.android.tabs.position( "bottom" );        $ionicConfigProvider.platform.ios.tabs.position( "bottom" );    })

• global.js 全局变量模块

// 全局变量模块angular.module( 'global', [] )    .constant( "GlobalVariable", {   // 定义全局恒定不变的变量        'SERVER_PATH': '127.0.0.1:8080/',  // 服务器地址        'VERSION': '1.0.1'  // 版本号    })

• route.js 全局路由模块
  将 app.js 中内容全选复制过来，删除不需要的内容。

angular.module('route', ['starter.controllers', 'starter.services']).config(function($stateProvider, $urlRouterProvider) {  $stateProvider    .state('tab', {    url: '/tab',    abstract: true,    templateUrl: 'templates/tabs.html'  })  .state('tab.dash', {    url: '/dash',    views: {      'tab-dash': {        templateUrl: 'templates/tab-dash.html',        controller: 'DashCtrl'         // 写完这个controller之后，会自动帮我们把这个controller作用域加到当前页面里        // 我们在页面中看不到有加 controller，但是作用域已经加上了      }    }  })  ...

• app.js 引入依赖，去掉原来的路由相关代码

angular.module('starter', ['ionic','config', 'global', 'route']).run(function($ionicPlatform) {  // 平台自检  $ionicPlatform.ready(function() {    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard    // for form inputs)    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);      cordova.plugins.Keyboard.disableScroll(true);    }    if (window.StatusBar) {      // org.apache.cordova.statusbar required      StatusBar.styleDefault();    }  });})

• index.html 全局引入

    <!-- 全局 js 文件 -->    <script src="js/app.js"></script>    <script src="js/route.js"></script>    <script src='js/global.js'></script>    <script src="js/config.js"></script>    <script src="js/controllers.js"></script>    <script src="js/services.js"></script> 

---

功能模块 js 的整理步骤

• 创建四个文件
  

  Controller: 业务逻辑的一些功能
  Route: 子功能路由 js，控制我们的页面跳转
  Service文件: 和服务器进行数据请求访问
  Html页面: 功能界面

MVC结构分层思想，是为了降低代码耦合度。以引导页为例

• guidePage.html

    <!-- 引导页面 -->    <ion-view view-title="引导页">    我是引导页面    </ion-view>

• guidePage_controller.js

// guidePage 引导页业务逻辑// 页面功能： 引导页功能         创建日期： 2017.1.4// 创建者: Jepson              修改日期：2017.1.4// 创建模块 guidePage.controller, 引入依赖 guidePage.service// 加上 点 表示规范，知道从哪来的// 公司里面 GPT.TeamA.guidePage.controller  GPT公司团队A的...angular.module( 'guidePage.controller', ['guidePage.service'] )    // 约定控制器 首字母大写，表示规范    .controller( 'GuidePageCtrl', [ '$scope', '$state', function( $scope, $state ) {    }])

• guidePage_service.js

// guidePage 引导页页面请求模块angular.module( 'guidePage.service', [] )    .factory( 'GuidePageFty', function() {        return null;    })

• guidePage_route.js

// guidePage页面子路由// 创建路由模块，引入控制器模块angular.module( 'guidePage.route', ['guidePage.controller'] )    // 这里用的 UI Router 要注入两个服务 $stateProvider $urlRouterProvider    .config( function( $stateProvider, $urlRouterProvider ) {        $stateProvider            .state( 'guidePage', {                url: '/guidePage',                templateUrl: 'areas/guidePage/guidePage.html',                controller: 'GuidePageCtrl'            })    })

• index.html 引入

    <!-- 功能模块 js -->    <script src="areas/guidePage/guidePage_controller.js"></script>    <script src="areas/guidePage/guidePage_route.js"></script>    <script src="areas/guidePage/guidePage_service.js"></script>

• route.js 我们这里guidePage只是子路由，所以还需要在总路由上引入一下

// 下面的 constroller 控制器就是从 starter.controllers服务来的，所以要引入angular.module('route', [  'guidePage.route',   // 引入引导页 子路由  'starter.controllers',   'starter.services'  ])  ...

• 启动 …/#/guidePage 可以看到引导页了！

• 这里 index.html 的内容要注释掉下面这部分，就可以看见 ‘我是引导页面’ 这些字了

    <!--<ion-nav-bar class="bar-stable">      <ion-nav-back-button>      </ion-nav-back-button>    </ion-nav-bar>-->