routes.js剖析
来源:互联网 发布:易建联新秀赛季数据 编辑:程序博客网 时间:2024/06/08 02:34
您可自由转发此文, 但请保留出处:Ionic在线学习网站 http://www.ioniconline.com
里面可以放置一些配置相关的内容,包括有界面布局配置,url路由配置等。这些模块配置,是通过调用angular的config函数得以完成的,例子:
.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,状态机名字,视图等。
状态机配置:
$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="music">Go musicview</a>
<a ui-sref="gallery">Go galleryview</a>
触发流程,例如点击音乐链接:
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
- routes.js剖析
- Routes
- Node.js项目3文件(view,app,routes)关系
- Shipping Routes
- Shipping Routes
- rails routes
- SERVICE ROUTES
- Routes 起步
- Routes Resource
- Routes RoutesMiddleware
- Routes 起步
- routes 详解
- Routes RoutesMiddleware
- python routes
- webob/routes
- app.js剖析
- filter.js剖析
- service.js剖析
- python之Tkinter控件学习
- (四十二)C++的基本类型(总结)
- 野外居住解决方案
- fir.im Weekly - 1000 个 Android 开源项目集合
- rmi的代码学习
- routes.js剖析
- Android手势使用之 GestureDetector
- firefox中使用ocx的方法
- 业余09—中科院博士教你如何查找外文文献
- Django学习之----model(2)
- (四十三)作业题
- 从STORE 然后从客户销售视图中取值
- android select采用代码实现按钮背景
- beyond compare