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‘); })
时间: 2024-10-28 10:28:34