Ionic 路由

ionic中路由管理介绍:

在单页应用中,路由的管理是很重要的环节。ionic.js没有使用AngularJS内置的ng-route路由,而是选择了AngularUI项目的ui-router模块。

ui-router的核心理念是将子视图集合抽象为一个状态机,导航意味着状态的切换。在不同的状态下,ionic.js渲染对应的子视图(动态加载的HTML片段)就实现了路由导航的功能。


路由设置

模块导航用< ion-tabs class=”tabs-bottom”>

$stateProvider .state('tab', {

          // cache: false,//是否缓存

         url: "/tab/event",  

         abstract:true,//默认加载

         templateUrl: "templates/event.html"//模板

})

这样模板会默认加载到ion-nav-view中,也可以指定加载到某个ion-nav-view中,使用name属性

//对应的路由写法是

$stateProvider .state('tab', {

         url: "/tab/event",

         views:{

                   "viewType":{

                                //viewType与ion-nav-view的name属性对应,如果dom中没有name属性值是viewType的ion-nav-view,那很有可能不会渲染模板页面

                                templateUrl: "templates/event.html",   //模板

                                controller:'controller_events_list'//controller

                   }

             }  

})

ionic 也支持url参数

url: "/tab/event/:id/:num"

参数按顺序加到url上

注意:引用url的时候必须给足对应的参数,否则路由会跳到空白页,或者出现其他异常

href="#/school/0/0"


$stateParams获取url参数

在controller中注入$stateParams

以上面的为例,取id时调用$stateParams.id,同理取num就是$stateParams.num

页面跳转方法

标签的href

href="#/tab"

js跳转

$location.path("/tab");

要注意在controller里先注入location也可以使用window,同样的,使用前需要依赖注入

$window.location.assign(url);

使用$window需要加#号

父子路由

在布局页面里,通常会有一组页面是同级的,像登录、注册、找回密码。习惯上希望给这三个页面建立一个同级的逻辑关系。这里涉及parent.child写法。

比如下面的代码:

/auth是父级总管,无法加载auth.login还是其他auth.xx,都会默认加载/auth的模板内容,这里我设置成了”“,模板不包含内容。如果/auth中有内容,则是/auth开头的页面共用的。

//登录相关

.state('auth', {

         url: '/auth',

         views:{

                    'otherPage':{

                             templateUrl: ""

                    }

         }

})

//登录界面

.state('auth.login', {

                url: '/login',

                views:{

                       'otherPage':{

                                 templateUrl: "login.html",

                                 controller:'controller_login'

                         }

                }

})

//注册

.state('auth.register', {

              url: '/register',

              views:{

                     'otherPage':{

                             templateUrl: "register.html",

                             controller:"controller_register"

                      }

              } 

})

另外,如果当前路径是/auth时,去加载/auth/register这样的子页面,不会渲染成功。虽然会触发$stateChangeSuccess,但没有渲染模板,dom不会改变。

访问除路由外地址,可以定向访问登录或者其他页面。

// if none of the above states are matched, use this as the fallback

$urlRouterProvider.otherwise('/auth/login');

你可能感兴趣的:(Ionic 路由)