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