博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
AngularJs(3)
阅读量:7084 次
发布时间:2019-06-28

本文共 1524 字,大约阅读时间需要 5 分钟。

<!doctype html>

<html lang="en" ng-app='myApp' >

<head>

<meta charset="UTF-8">

<title>路由一</title>

<script type="text/javascript" src="angular.min.js"></script>

<script type="text/javascript" src="angular-route.min.js"></script>

<script type="text/javascript">

//在模块中的[]中引入ngRoute

var myApp = angular.module('myApp', ['ngRoute'])

//在配置中引入$routeProvider

 myApp.config(['$routeProvider',function($routeProvider){

  $routeProvider

  //根据哈希值确定ng-view视图的内容

  //:num获取传递过来的参数

  .when('/aaa/:num',{

  template : '<p>首页的内容</p>`name`',

  controller : 'one'

  })

  .when('/bbb',{

  template : '<p>分页一的内容</p>`name`',

  controller : 'two'

  })

  .when('/ccc/:num',{

  template : '<p>分页二的内容</p>`name`',

  controller : 'three'

  })

  //设置默认值

  .otherwise({

  redirectTo :'/aaa'

  });

 }]);

  myApp.controller('one',['$scope','$location','$routeParams',function($scope,$location,$routeParams){

   $scope.name='hello';

   $scope.$location=$location;

   //可以获取传递过来的参数

   console.log($routeParams);

  }]);

  myApp.controller('two',['$scope',function($scope){

   $scope.name='hi';

   //$scope.$location=$location;

  }]);

   myApp.controller('three',['$scope','$routeParams',function($scope,$routeParams){

   $scope.name='你好';

   //$scope.$location=$location;

   console.log($routeParams);

  }]);

</script>

</head>

<body ng-controller='one'>

<a href="" ng-click='$location.path("aaa/123")'>首页</a>

<a href="" ng-click='$location.path("bbb")'>分页一</a>

<a href=""  ng-click='$location.path("ccc/333")'>分页二</a>

<div ng-view></div>

</body>

</html>

1
<
br
>
本文转自 沉迷学习中 51CTO博客,原文链接:http://blog.51cto.com/12907581/1933205,如需转载请自行联系原作者
你可能感兴趣的文章
字节和字符,对信息进行编码
查看>>
怎样使用ListView?
查看>>
c++基础类型之signed、unsigned的一个细节
查看>>
反转链表
查看>>
move.js
查看>>
hdu 6044 : Limited Permutation (2017 多校第一场 1012) 【输入挂 组合数学】
查看>>
如何选择硅谷的IT公司
查看>>
CSS Table Gallery
查看>>
OpenJudge Bailian 1088 滑雪 DFS
查看>>
大数相乘
查看>>
简单计算器 (栈)
查看>>
正则表达式学习网站
查看>>
RabbitMQ消费者消息权重,
查看>>
docker内存和cpu调试
查看>>
避开sql注入过滤的几个方法
查看>>
JQuery
查看>>
html和java的交互,利用jsBridge开源框架
查看>>
【hdu6072】Logical Chain
查看>>
Gartner:2013年SIEM市场分析(MQ)
查看>>
特殊命令eval的用法两例
查看>>