ionic--配置路由

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

ionic--配置路由的相关文章

Windows server 2012 搭建VPN图文教程(二)配置路由和远程访问服务

Windows server 2012 搭建VPN图文教程(一)安装VPN相关服务 Windows server 2012 搭建VPN图文教程(二)配置路由和远程访问服务 Windows server 2012 搭建VPN图文教程(三)配置VPN访问账户 Windows server 2012 搭建VPN图文教程(四)客户端访问VPN测试 PartII 配置路由和远程访问服务 本部分主要介绍如何安装和配置路由及远程访问服务的方法,请参考以下操作步骤: (续上)前面提到重新启动操作系统,重启后服务

IP地址的划分和配置路由

IP地址:是一种在Internet上的给主机编址的方式,也称为网际协议地址.常见的IP地址,分为IPv4与IPv6两大类: 路由:路由器能把不是同一个网段的网络设备连接起来,使它们能够建立通信: IP地址分类 A 类:(前八位是网络地址:固定的) 0 000 0000 - 0 111 1111: 1-127 网络数:126, 127 每个网络中的主机数:2^24-2 默认子网掩码:255.0.0.0 公网地址:1.0.0.0 - 9.255.255.255 : 11.0.0.0 - 126.25

Vue2+VueRouter2+webpack 构建项目实战(三):配置路由,运行页面

制作.vue模板文件 通过前面的两篇博文的学习,我们已经建立好了一个项目.问题是,我们还没有开始制作页面.下面,我们要来做页面了. 我们还是利用 http://cnodejs.org/api 这里公开的api来做项目.不过本章节不涉及调用接口等内容.这里,我们假设我们的项目是做俩页面,一个列表页面,一个内容页面.列表页面有分页等,内容页面展示. 因此,我们需要两个模板文件. 我们在src/page目录下面新建两个文件,分别是index.vue和content.vue index.vue代码: <

三层交换机上配置路由

三层交换机上配置路由

配置路由

通过$routeProvider('url',Object)配置路由;第一个参数是路由路径,第二个参数是可配置对象. 配置对象中可以进行设置的属性包括controller. template. templateURL. resolve. redirectTo和reloadOnSearch. 配置一个比较复杂的路由ngular.module('myApp', []).config(['$routeProvider', function($routeProvider) {$routeProvider

网络管理命令和配置路由

前言:简单了解几个有关网络管理的命令并进行一个实验了解配置路由 一,显示网络连接 目前有俩个命令 - netstat,ss netstat通过遍历proc来获取socket信息, 目前属于较旧的命令,也许未来有被丢弃的可能 ss使用netlink与内核tcp_diag模块通信获取socket信息 ,较新的命令,目前与netstat共存 选项 俩者对于常用的选项没什么差别,所以放在一起说,以netstat为例 看一下示例 便于观看,所以以下示例我们都只显示tcp协议相关的,只要知道跟 -u -w

三层交换机配置路由DHCP中继代理

三层交换机配置路由DHCP中继代理 一.实验目的 1.DHCP中继配置2.vlan10 和vlan20对应的客户机能用DHCP服务器获得3.Server2016上搭建两个地址池,分别给vlan10和vlan20两个网端.4.设置单臂路由,通过NAT转换实现访问外网网站(本文在centos上搭建网站) 实验拓扑图: 注:其中C1与win7绑定的同一块虚拟网卡Vnet1,C2是GNS3中PC2,C3与server2016绑定的同一块虚拟网卡Vnet2,C4与CentOS绑定的同一块虚拟网卡Vnet8

简单的三层交换配置路由 实验(华为)

实验名称:简单的三层交换配置路由实验拓扑: 实验需要:1.按图中所示配置设网络备vlan,IP地址2.能够使各pc互相ping通. 实验步骤: 1.配置终端设备: pc1-pc5按照拓扑图中所示配置各个pc的ip地址. 网关配置为 192.168.x.254 pc6配置为 192.168.7.1/24 网关为192.168.7.254 2.配置网络设备 #配置交换设备(Lsw1) 1.创建vlan vlan 1 vlan 2 vlan 3 2.配置端口模式 interface g0/0/1 po

简单的三层交换配置路由实验 (思科)

实验名称:简单的三层交换配置路由 (思科)实验拓扑: 1.配置终端设备: pc1-pc5按照拓扑图中所示配置各个pc的ip地址. 网关配置为 192.168.x.254 pc6配置为 192.168.7.1/24 网关为192.168.7.254 2.配置网络设备 #配置交换设备(sw1) 1.创建vlan vlan 1 vlan 2 vlan 3 2.配置端口模式 interface range fa 0/1 - 3 switchport mode access 3.将端口加入特定vlan i

asp.netCore3.0 中使用app.UseMvc() 配置路由

一.新配置路由策略  在 Asp.Net Core 3.0中默认不再支持app.UserMvc() 方式配置路由 系统. 而是使用新的模式,点击查看asp.netCore3.0区域和路由配置变化 默认使用的话 会抛出异常: InvalidOperationException: Endpoint Routing does not support 'IApplicationBuilder.UseMvc(...)'. To use 'IApplicationBuilder.UseMvc' set 'M