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‘);
})

ionic--配置路由