ionic--配置路由

Posted 2020-10-07 Sun_

1.ng-route

index中引用文件：

<script src="ionic.bundle.js"></script>
<script src="angular.min.js"></script>

<!--如果路径上出现！，可能是angular,js版本和angular-route.min.js版本不兼容，可换一下版本试试-->
<script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script>

index

<div ng-view ></div>

app.js中配置路由：

angular.module("myApp",["ngRoute","myController","serviceController"])  

.config(function($routeProvider){
    $routeProvider.when("/news",{
        templateUrl:"news.html",
        controller:"newscontroller"
    }).when("/news-datails/:aid",{
        templateUrl:"news-datails.html",
        controller:"datailscontroller"
    }).otherwise({
        redirectTo:‘/news‘
    })
});

1.引入 angularjs   引入 angular-route.js
2.定义   ng-app="myAPP"
3.angular.module(‘myAPP‘,[‘ngRoute‘])
4.定义 配置路由
5.定义视图   动态加载的 模板和控制器显示到哪里
  <div ng-view></div>

2.ionic-ui-router

引用文件

<script src="ionic.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="ionic.min.css">

index

<!--公共头部-->

<ion-nav-bar class="bar-calm">
    <ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>


<ion-nav-view></ion-nav-view>

 

子页面模板代码：

<ion-view title="主页">

<!--头部需要添加按钮的时候，加上ion-nav-buttons-->

    <ion-nav-buttons side="right">
         <a  href="#/tabs/list-datail/111" class="button button-clear">详情</a>
    </ion-nav-buttons>


    <ion-content>
        home
    </ion-content>
</ion-view>

 

app.js路由配置

angular.module("myApp",["ionic","shopcontroller","serivecontroller"])
.config(function($stateProvider,$urlRouterProvider){
    $stateProvider.state("list",{
        url:"/list",
        templateUrl:"list.html",
        controller:"listController"
    })
    .state("list-datail",{
            url:"/list-datail/:id",
            templateUrl:"list-datail.html",
            controller:"listDatailController"
        });
    $urlRouterProvider.otherwise("/list");

});

 

1.调用$state.go()方法， js跳转
2.点击包含ui-sref指令的链接  <a ui-sref="productlist">Go State 1</a>
3. 导航到与状态相关联的 url。  <a  href="#/productlist">Go State 2</a>

$stateProvider  配置路由       $urlRouterProvider  默认跳转

<!--ng-view    ngRouter-->       <!--ui-view    ui-router-->

1.定义视图  ion-nav-view ionic中定义视图     默认有动画了
2.ion-nav-bar  定义公共导航
3.ion-view  模板里面的所有东西放在这个里面   title定义公共导航的标题
4.ion-nav-back-button   自动返回按钮

 

3.ionic-ui-router+tabs

引用文件、index、子页模板代码同ionic-ui-router

 

tabs模板代码：

<ion-tabs class="tabs-calm tabs-color-light tabs-icon-top">
    <ion-tab title="首页" icon-on="ion-home" icon-off="ion-home" href="#/tabs/home">
        <ion-nav-view name="tabHome"></ion-nav-view>
    </ion-tab>

<ion-tab title="新闻" icon-on="ion-ios-paper-outline"      

icon-off="ion-ios-paper-outline" href="#/tabs/news">
        <ion-nav-view name="tabNews"></ion-nav-view>
    </ion-tab>
</ion-tabs>

 

路由配置：

angular.module("myApp",["ionic","appController","serviceController"])
  .config(function($stateProvider,$urlRouterProvider){
    $stateProvider.state("tabs",{
        url:"/tabs",
        abstract:true, /*抽象的    只要定义 abstract=true  我们的路由就不会解析这个地址*/
        templateUrl:"tabs.html"
    })
    .state("tabs.home",{
        url:"/home",
        views:{
            "tabHome":{
                templateUrl:"home.html"
            }
        }
    })
        .state("tabs.newsContent",{
            url:"/newsContent/:id",
            views:{
                "tabNews":{
                    templateUrl:"newsContent.html",
                    controller:"listDatailController"
                }
            },
        })
    $urlRouterProvider.otherwise(‘/tabs/home‘);
})