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

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>-->