AngularJS 路由允许我们通过不同的 URL 访问不同的内容。###
通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA)。###
注意,Ionic并没有采用Angular的官方路由(ngRoute),最主要的一个原因是ui-router项目很重要的特性ngRoute不支持,比如视图命名,视图嵌套和视图并行(parallel)。这些功能通过ionNavView命令被加入了Ionic得核心功能中。Ionic仅仅只能通过ui-router运行,所以在你的app中使用ngRoute会报错。
app.js页面
上面的.config就是项目中的路由设置,
config()函数 负责配置路由
// 1.配置UI-Router
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
// 2. 添加第一层路由State,调用State函数
.state('tab', { url: '/tab',
abstract: true, // abstract: true 表明此状态不能被显性激活,只能被子状态隐性激活
templateUrl: 'templates/tabs.html'
})
// 3.添加第二层路由State嵌套在tab中的页面
.state('tab.dash', {
url: '/dash',
views: {//是指ng-view
'tab-dash': {
templateUrl: 'templates/tab-dash.html', // 模板
controller: 'DashCtrl' // 控制器
}
}
})
});
// 如果没有任何配置,则跳到该页面“/tab/dash”
$urlRouterProvider.otherwise('/tab/dash');