routes.js剖析

您可自由转发此文， 但请保留出处：Ionic在线学习网站 http://www.ioniconline.com

里面可以放置一些配置相关的内容，包括有界面布局配置，url路由配置等。
这些模块配置，是通过调用angular的config函数得以完成的，例子：

angular.module('starter.routes', [])

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

$ionicConfigProvider： 进行设备界面布局全局配置的内置全局变量；

$stateProvider、$urlRouterProvider ： 进行路由状态配置的内置全局变量；

ionicConfigProvider可以对tabs风格位置，导航栏标题显示，界面转换动画等进行配置，如：

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

$ionicConfigProvider.platform.ios.tabs.style('standard'); //iOS tabs样式配置

$ionicConfigProvider.platform.ios.tabs.position('bottom');// iOS tabs展示位置配置

$ionicConfigProvider.platform.android.tabs.style('standard');// android tabs样式配置

$ionicConfigProvider.platform.android.tabs.position('bottom');// android tabs展示位置配置

$ionicConfigProvider.navBar.alignTitle('center');// 导航栏标题居中配置$ionicConfigProvider.platform.ios.navBar.alignTitle('center');// iOS 导航栏标题居中配置

$ionicConfigProvider.platform.android.navBar.alignTitle('left');// android 导航栏标题居左配置$ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-ios-arrow-thin-left');// iOS返回按钮图标配置

$ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-android-arrow-back');// android返回按钮图标配置$ionicConfigProvider.platform.ios.views.transition('ios');// iOS界面切换配置

$ionicConfigProvider.platform.android.views.transition('android');// android界面切换配置

}

路由配置 : 状态配置结合额外路由配置机制实现。

在访问路由配置这块，ionic没有使用AngularJS的路由模块（ng-route），而是使用 angular-ui项目的ui-route模块。ionic库里面已经整合了ui-route模块，使用时不需要单独引入。

可以抽象地认为视图布局有多个状态，比如：video/music/gallery。 在一个时刻，视图界面只能对应一种状态，而这些状态是在 $stateProvider中配置完成，配置的内容有模板，对应的url，状态机名字，视图等。

状态机配置：

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

$stateProvider

.state('video', {

url: '/video',

templateUrl: 'video.html'

})

.state('music', {

url: '/music',

templateUrl: 'music.html'

});

.state('gallery', {

url: '/gallery',

templateUrl: 'gallery.html'

});});

状态切换触发

由ui-router中定义的指令ui-sref用来触发状态迁移：

<a ui-sref="video">Go video view</a>

<a ui-sref="music">Go musicview</a>

<a ui-sref="gallery">Go galleryview</a>

触发流程，例如点击音乐链接：

1、跳转触发是状态机服务抽取到 ui-sref="gallery"里面的状态机：gallery并驱动跳转；

2、状态机服务在状态配置里面匹配相应的状态机来进行处理（video/music/gallery）；

3、状态机服务在状态配置里面定位到匹配的服务后找出对应定义的处理模板；

4、使用对应的模板渲染显示在ui-view指令指定的视图窗口中。

默认路由处理：

非 $state 的额外的路由，通过 $urlRouterProvider配置完成，例如：

将默认页设置为/home的URL。

$urlRouterProvider.when("","/home");

注意哦，这里用的是URL，别写错成state了。

任何额外页面的定向：

$urlRouterProvider.otherwise("/home");

您可自由转发此文， 但请保留出处：Ionic在线学习网站 http://www.ioniconline.com