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. Android 手机卫士3--设置中心

    1.要点击九宫格中的条目,需要注册点击事件 // 注册九宫格单个条目的点击事件 gv_home.setOnItemClickListener(new OnItemClickListener() { / ...

  2. 图片的赖加载(lazyLoad)

    懒加载的意义(在线demo预览) 尽管很多公司的网页都有一些限制,比如页面的最大的图片大小不得大于50k,也有很多图片优化工具fis3.gulp等等,但是如果图片太多还是会影响页面的加载速度,快则几十 ...

  3. 【HTML5&CSS3进阶03】Jser与Csser如何一起愉快的翻新老组件

    上次,我们形成了两种header的布局,一种flexbox,一种float,最后与身边做重构的同事交流下来,选择了float的布局. 事实上布局的选型不需要我关注,我的参与或者一些意见多数是自我提升, ...

  4. Undefined symbols for architecture arm64解决方案

    在iOS开发中经常遇到的一个错误是Undefined symbols for architecture arm64,这个错误表示工程某些地方不支持arm64指令集.那我们应该怎么解决这个问题了?我们不 ...

  5. 高仿ios版美团框架项目源码

    高仿美团框架基本已搭好.代码简单易懂,适合新人.适合新人.新人. <ignore_js_op>     源码你可以到ios教程网那里下载吧,这里我就不上传了,http://ios.662p ...

  6. 最新Android系统版本与API等级对应关系表

    最新Android系统版本与API等级对应关系表 从Android官网拷过来的,方便查阅... 官网地址:https://developer.android.com/guide/topics/mani ...

  7. chrome浏览器限制的端口

    1,    // tcpmux 7,    // echo 9,    // discard 11,   // systat 13,   // daytime 15,   // netstat 17, ...

  8. 关于bundle install 的一点补充

    在第一次运行bundle install之后,生成了Gemfile.lock文件,里面记录gem的具体版本号,按照官方文档说明,以后运行bundle install就不会再依据Gemfile,而是根据 ...

  9. freeswitch模块之event_socket

    这是我之前整理的关于freeswitch mod_event_socket的相关内容,这里记录下,也方便我以后查阅. mod_event_socket以socket的形式,对外提供控制FS一种途径, ...

  10. crontab 启动 、运行 和编辑 查看

    cron服务是Linux的内置服务,但它不会开机自动启动.可以用以下命令启动和停止服务: /sbin/service crond start /sbin/service crond stop /sbi ...