angular路由

###使用案例
```

test

首页
游戏

```
`time.html`
```

金刚葫芦娃

```

路由控制器使用

  • 注：不需要在html中定义控制器
var app = angular.module("myApp", ['ui.router']);

app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){

  //默认路由，与下面定义的路由匹配

  $urlRouterProvider.otherwise('/lol');

  //路由定义规则

  $stateProvider

          .state('lol', {

            url:'/lol',

            templateUrl: 'time.html',

            controller: ['$scope',function($scope){   //直接在内部写控制器

            }]

          })

          .state('dota', {

            url:'/dota',

            template: '<h1>王者荣耀</h1>',

            controller: 'ctrl'                        //引入外部控制器

          })

app.controller("ctrl", ['$scope', function($scope){

            }]);

$state服务

  • 实现路由中转
  • 判断用户是否登录，若未登录，则跳转到登录页面
app.controller("ctrl", ['$scope','$state', function($scope,$state){

              $scope.go = function(url){ //这里的方法随便命名

                  $state.go(url);    //$state的go方法实现跳转，这个方法必须是go方法

              }

time.html

<button ng-click="go('dota')">跳转</button> <!-- 这里的方法随便命名,点击后跳转到指定路由，不要加‘/ ’-->

$stateParams

  • 在dota路由处加上{id}，显示数据id
  • 模板处加上ui-sref="dota({id:v.id})，实现 跳转到dota路由，并显示id
var app = angular.module("myApp", ['ui.router']);

app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){

  //默认路由，与下面定义的路由匹配

  $urlRouterProvider.otherwise('/lol');

  //路由定义规则

  $stateProvider

          .state('lol', {

            url:'/lol',

            templateUrl: 'time.html',

            controller: ['$scope',function($scope){   //直接在内部写控制器

            }]

          })

          .state('dota', {

            url:'/dota{id}',                          //要加上{id}，才会显示id

            template: '<h1>王者荣耀</h1>',

            controller: 'ctrl'                        //引入外部控制器

          })

app.controller("ctrl", ['$scope','$stateParams', function($scope,$stateParams){

              $scope.data = [

              {id:1,name:"刘恺威",title:"王鸥"},

              {id:2,name:"飞刀又见飞刀",title:"李元芳"}

              ];

              var id = $stateParams.id;

              if(id){

                for(var i=0;i<$scope.data.length;i++){

                  if(id==$scope.data[i].id){

                      $scope.name=$scope.data[i].name;

                  }

                }

              }

            }]);

time.html

<ul ng-repeat="v in data">

   <li><a href="" ui-sref="dota({id:v.id})">{{v.name}}</a></li>  <!-- 跳转到dota路由，并显示id -->

</ul>

<p>{{name}}</p>

父子嵌套路由

  • 将父级路由模板内加入<div ui-view></div>，子级模板内容会在父级模板中显示，最后一起通过父级路由加载到首页的<div ui-view></div>
  • 写法一 lol.dota,父级下的路由
  • 写法二 parent:lol,指定该路由的父级
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test</title>

</head>

<body ng-app="myApp">

 <a href="" ui-sref="lol">首页</a>  <!-- ui-serf的值对应state的第一个参数 -->

 <a href="" ui-sref="lol.dota">游戏</a>              <!-- ui-serf的值对应state的url参数 -->

 <a href="" ui-sref="youku">视频</a>

 <div ui-view></div>                                <!-- 首页的<div ui-view></div> -->

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

<script src="jquery-3.1.1.min.js"></script>

<script src="http://cdn.bootcss.com/angular-ui-router/1.0.0-beta.3/angular-ui-router.min.js"></script>

<script>

var app = angular.module("myApp", ['ui.router']);

app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){

  //默认路由，与下面定义的路由匹配

  $urlRouterProvider.otherwise('/lol');

  //路由定义规则

  $stateProvider

          .state('lol', {

            url:'/lol',

            templateUrl: 'time.html',

          })

          .state('lol.dota', {                        //父级下的路由写法

            url:'/lol.dota',

            template: '<h1>王者荣耀</h1>',

          })

          .state('youku', {

            url:'/youku',

            template: '<h1>黑海夺金</h1>',

            parent:'lol'                              //指定该路由的父级

          })

}])

</script>

</body>

</html>

time.html

<h1>金刚葫芦娃{{name}}</h1>

<div ui-view></div>     <!-- 将父级路由模板内加入<div ui-view></div>，子级模板内容会在父级模板中显示 -->

ui.route视图概念——ui-view

  • 本案例效果为T字型网页，点击左侧导航栏，改变右侧显示
  • views里写ui-view对应的视图
  • 左侧模板，可以点击跳转到不同路由，从而改变右侧视图显示
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test</title>

    <style>

      div[ui-view="left"]{background-color: #ccc; float:left;}

      div[ui-view="right"]{}

    </style>

</head>

<body ng-app="myApp">

 <div ui-view="top"></div>

 <div ui-view="left"></div>

 <div ui-view="right"></div>

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

<script src="jquery-3.1.1.min.js"></script>

<script src="http://cdn.bootcss.com/angular-ui-router/1.0.0-beta.3/angular-ui-router.min.js"></script>

<script>

var app = angular.module("myApp", ['ui.router']);

app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){

  //默认路由，与下面定义的路由匹配

  $urlRouterProvider.otherwise('/my');

  //路由定义规则

  $stateProvider

          .state('my', {

            url:'/my',

            views: {                             //显示ui-view中的视图

              top:{templateUrl: 'time.html'},

              left:{templateUrl: 'left.html'},

              right:{templateUrl: 'right.html'}

            }

          })

          .state('game', {

            url:'/game',

            views: {

              top:{templateUrl: 'time.html'},

              left:{templateUrl: 'left.html'},

              right:{templateUrl: 'game.html'}

            }

          })

}])

</script>

</body>

</html>


time.html

<h1>童年</h1>


left.html

<div><a href="#/my">动画</a></div>           <!-- 点击切换到不同的路由 -->

<div><a href="" ui-sref="game">游戏</a></div>


right.html

<h1>金刚葫芦娃</h1>


game.html

<h1>超级玛丽</h1>

angular路由——ui.route的更多相关文章

  1. angular路由配置以及使用

    一.生成路由文件 按照惯例,有一个独立模块来配置相关路由,这个模块类的名字叫做AppRoutingModule,位于src/app下的app-routing.module.ts文件中. 使用CLI生成 ...

  2. angular路由详解：

    1.$routeProvider ngRoute模块中的服务 2.otherwise:设置用于路由改变时,与任何其他定义的路由无法匹配的时候执行的代码 3.when:为$route服务定义新的路由 例 ...

  3. 阿里云 Angular 2 UI框架 NG-ZORRO介绍

    说明: Angular2出来后,一直想找个基于Angular2的前端后台管理框架,但一直没有找到比较适合的.前段时间在Angular官网资源无意之间看到NG-ZORRO,NG-ZORRO由阿里计算平台 ...

  4. angular 路由项目例子

    angular 路由是我在工作中体验非常便捷的一点, 这是详细的API ,查看API 可以了解很多东西, https://github.com/angular-ui/ui-router/wiki/Qu ...

  5. Angular路由守卫 canActivate

    作用 canActivate 控制是否允许进入路由. canActivateChild 等同 canActivate,只不过针对是所有子路由. 关键代码 创建路由守卫 import { Injecta ...

  6. Angular路由守卫 canDeactivate

    目的 离开页面时,做出逻辑判断 以ng-alain的项目为基础做演示 效果如图: 关键代码 定义一个CanDeactivateGuardService export class CanDeactiva ...

  7. Angular 路由守卫

    1. 路由 Angular路由: 可以控制页面跳转:可以在多视图间切换: 2. 路由守卫 Angular路由守卫: 在进入或离开某路由时,用于判断是否可以离开.进入某路由::: return true ...

  8. angularjs中使用锚点，angular路由导致锚点失效的两种解决方案

     壹 ❀ 引 公司新项目开发中,首页要做个楼层导航效果(如下图),要求能点击图标对应跳到楼层即可,因为不需要跳转过度动画,也要求最好别用JQ,想着原生js操作dom计算top的兼容性,想着用锚点实现算 ...

  9. 用于实现tab页签切换页面的angular路由复用策略

    使用场景 打开菜单页面的时候,出现对应页面的页签.切换页签,原来的页面信息状态保留,关闭页签则保留的信息删除.使用路由复用策略,保存路由快照.实现效果如图所示 实现过程 概述: 1.在app.modu ...

随机推荐

  1. Using AlloyTouch to control three.js 3D model

    As you can see, the above cube rotation, acceleration, deceleration stop all through the AlloyTouch ...

  2. Normalize.css的使用及下载

    Normalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性.相比于传统的CSS reset,Normalize.css是一种现代的.为HTML5准备 ...

  3. React Native 之TabBarIOS

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  4. android Content Provider介绍

    ContentProvider(内容提供者)是Android中的四大组件之一.主要用于对外共享数据,也就是通过ContentProvider把应用中的数据共享给其他应用访问,其他应用可以通过Conte ...

  5. ios native工程集成react-native的demo

    react-native看到了给现有工程添加react-native环境的时候碰到一个问题: 如何往工程中添加 package.json文件,以及node_modules是怎么来的? 我开始的时候以为 ...

  6. 编译protobuf的jar文件

    1.准备工作 需要到github上下载相应的文件,地址https://github.com/google/protobuf/releases protobuf有很多不同语言的版本,因为我们需要的是ja ...

  7. HTTP Session、Cookie机制详解

    一.什么是http session,有什么用 HTTP协议本身是无状态的,本身并不能支持服务端保存客户端的状态信息,于是,Web Server中引入了session的概念,用来保存客户端的状态信息. ...

  8. sqoop:Failed to download file from http://hdp01:8080/resources//oracle-jdbc-driver.jar due to HTTP error: HTTP Error 404: Not Found

    环境:ambari2.3,centos7,sqoop1.4.6 问题描述:通过ambari安装了sqoop,又添加了oracle驱动配置,如下: 保存配置后,重启sqoop报错:http://hdp0 ...

  9. webapi frombody fromuri的参数绑定规则

    在WebAPI中,请求主体(HttpContent)只能被读取一次,不被缓存,只能向前读取的流. 举例子说明: 1. 请求地址:/?id=123&name=bob 服务端方法: void Ac ...

  10. POJ 3370. Halloween treats 抽屉原理 / 鸽巢原理

    Halloween treats Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 7644   Accepted: 2798 ...