Angular 学习笔记——$rounte
2024-09-03 14:28:30
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script>
<script>
var m1 = angular.module('myApp',['ngRoute']);
m1.config(['$routeProvider',function ($routeProvider){
$routeProvider
.when('/aaa',{
template:'<p>aaaaaaaaaaaa</p>'
}).when('/bbb',{
template:'<p>bbbbbbbbbbb</p>'
}).when('/ccc',{
template:'<p>cccccccccccccc</p>'
})
}])
m1.controller('Aaa',['$scope',function ($scope){ }]) </script>
</head> <body>
<div ng-controller="Aaa">
<a href="#aaa">index</a>
<a href="#bbb">222222</a>
<a href="#ccc">33333</a>
<div ng-view></div>
</div>
</body>
</html>
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script>
<script>
var m1 = angular.module('myApp',['ngRoute']);
m1.config(['$routeProvider',function ($routeProvider){
$routeProvider
.when('/aaa',{
template:'<p>aaaaaaaaaaaa</p>'
}).when('/bbb',{
template:'<p>bbbbbbbbbbb</p>'
}).when('/ccc',{
template:'<p>cccccccccccccc</p>'
})
}])
m1.controller('Aaa',['$scope','$location',function ($scope,$location){
$scope.$location = $location;
}]) </script>
</head> <body>
<div ng-controller="Aaa">
<a href="" ng-click="$location.path('aaa')">index</a>
<a href="" ng-click="$location.path('bbb')">222222</a>
<a href="" ng-click="$location.path('ccc')">33333</a>
<div ng-view></div>
</div>
</body>
</html>
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script>
<script> var m1 = angular.module('myApp',['ngRoute']); m1.config(['$routeProvider',function($routeProvider){ $routeProvider
.when('/aaa/:num',{
template : '<p>首页的内容</p>{{name}}',
controller : 'Aaa'
})
.when('/bbb',{
template : '<p>学员的内容</p>{{name}}',
controller : 'Bbb'
})
.when('/ccc',{
template : '<p>课程的内容</p>{{name}}',
controller : 'Ccc'
})
.otherwise({
redirectTo : '/aaa'
}); }]); m1.run(['$rootScope',function($rootScope){ $rootScope.$on('$routeChangeStart',function(event,current,pre){
console.log(event);
console.log(current);
console.log(pre);
}); }]); m1.controller('Aaa',['$scope','$location','$routeParams',function($scope,$location,$routeParams){ $scope.name = 'hello';
$scope.$location = $location; console.log( $routeParams ); }]);
m1.controller('Bbb',['$scope',function($scope){ $scope.name = 'hi'; }]);
m1.controller('Ccc',['$scope',function($scope){ $scope.name = '你好'; }]); </script>
</head> <body>
<div ng-controller="Aaa">
<a href="" ng-click="$location.path('aaa/123')">首页</a>
<a href="" ng-click="$location.path('bbb')">学员</a>
<a href="" ng-click="$location.path('aaa/456')">课程</a>
<div ng-view></div>
</div>
</body>
</html>
最新文章
- poj2833
- CentOS添加163源
- Java 设计模式之代理模式
- [Maven]Maven 那点事儿
- Linq 中 表连接查询
- 深入理解 C# 协变和逆变
- Java中的访问权限
- 001.android初级篇之ToolBar
- 输入整数n（n<=10000），表示接下来将会输入n个实数，将这n个实数存入数组a中。请定义一个数组拷贝函数将数组a中的n个数拷贝到数组b中。
- Lucene查询条数限制
- Spring boot +Spring Security + Thymeleaf 认证失败返回错误信息
- 你不知道的JS之作用域和闭包（二）词法作用域
- Web GIS离线地图
- 网络七层模型及TCP、UDP，一次HTTP请求都发生了什么
- BSGS&扩展BSGS
- 事件对象event
- GreenDao3.2的简单使用
- spring学习 十六 spring加载属性文件
- idea本地将本地现有的项目和gitlab进行管理并提交到线上
- oracle数据库连接错误解决办法