前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >AngularJs(3)

AngularJs(3)

作者头像
py3study
发布2020-01-14 12:10:25
1.6K0
发布2020-01-14 12:10:25
举报
文章被收录于专栏:python3

<!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>

代码语言:javascript
复制
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019/07/02 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档