欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

Angular路由简单学习

程序员文章站 2022-04-25 21:02:18
现在非常流行单页面应用，传统都是通过ajax请求数据，前端拿到数据渲染到页面，这种无刷新的视图切换非常棒！但是致命的缺点就是刷新後无法保持原来的视图，解决此问题的一个方法是...

现在非常流行单页面应用，传统都是通过ajax请求数据，前端拿到数据渲染到页面，这种无刷新的视图切换非常棒！但是致命的缺点就是刷新後无法保持原来的视图，解决此问题的一个方法是使用 hash，监听hashchange事件来进行视图切换，另一个方法是用html5的history api，通过pushstate()记录操作历史，监听popstate事件来进行视图切换，也有人把这叫pjax技术。

现在开始介绍angular的$route！

 <!doctype html>
<html ng-app="myapp">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<title>$route</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-route.min.js"></script>
</head>
<body>

<div ng-controller="aaa">
 <a href="#aaa">首页</a>
 <a href="#bbb">内容</a>
 <a href="#ccc">标题</a>
 <div ng-view></div>
</div>

<script type="text/javascript">

var m1 = angular.module('myapp',['ngroute']);

m1.config(['$routeprovider',function($routeprovider){
 $routeprovider.when('/aaa',{
  template : '<h1>aaa</h1>'
 }).when('/bbb',{
  template : '<h1>bbb</h1>'
 }).when('/ccc',{
  template : '<h1>ccc</h1>'
 }).otherwise({ //默认哈希值，哈希值出现错误也可以执行
  redirectto : '/aaa'
 });
}]);
m1.controller('aaa',['$scope',function($scope){

}]);
</script>
</body>
</html>

上面的例子很简单， 除了用template之外还可以用templateurl引入html的模板文件。

Angular路由简单学习

 在when传入控制器的指向，实现不同的页面显示不同的数据。

<!doctype html>
<html ng-app="myapp">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<title>$route</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-route.min.js"></script>
</head>
<body>

<div ng-controller="aaa">
 <a href="#aaa">首页</a>
 <a href="#bbb">内容</a>
 <a href="#ccc">标题</a>
 <div ng-view></div>
</div>

<script type="text/javascript">

var m1 = angular.module('myapp',['ngroute']);

m1.config(['$routeprovider',function($routeprovider){
 $routeprovider.when('/aaa',{
  template : '<h1>aaa</h1>{{name}}',
  controller : 'aaa' //控制器指向
 }).when('/bbb',{
  template : '<h1>bbb</h1>{{name}}',
  controller : 'bbb'
 }).when('/ccc',{
  template : '<h1>ccc</h1>{{name}}',
  controller : 'ccc'
 }).otherwise({
  redirectto : '/aaa'
 });
}]);
m1.controller('aaa',['$scope',function($scope){
 $scope.name = 'xiecg-aaa';
}]);
m1.controller('bbb',['$scope',function($scope){
 $scope.name = 'xiecg-bbb';
}]);
m1.controller('ccc',['$scope',function($scope){
 $scope.name = 'xiecg-ccc';
}]);

</script>
</body>
</html>
 

以事件的方式映射路由页面。

<!doctype html>
<html ng-app="myapp">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<title>$route</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-route.min.js"></script>
</head>
<body>

<div ng-controller="aaa">
 <a href="javascript:void(0);" ng-click="$location.path('aaa')">首页</a>
 <a href="javascript:void(0);" ng-click="$location.path('bbb')">内容</a>
 <a href="javascript:void(0);" ng-click="$location.path('ccc')">标题</a>
 <div ng-view></div>
</div>

<script type="text/javascript">

var m1 = angular.module('myapp',['ngroute']);

m1.config(['$routeprovider',function($routeprovider){
 $routeprovider.when('/aaa',{
  template : '<h1>aaa</h1>{{name}}',
  controller : 'aaa' //控制器指向
 }).when('/bbb',{
  template : '<h1>bbb</h1>{{name}}',
  controller : 'bbb'
 }).when('/ccc',{
  template : '<h1>ccc</h1>{{name}}',
  controller : 'ccc'
 }).otherwise({
  redirectto : '/aaa'
 });
}]);
m1.controller('aaa',['$scope','$location',function($scope,$location){
 $scope.name = 'xiecg-aaa';
 $scope.$location = $location;
}]);
m1.controller('bbb',['$scope',function($scope){
 $scope.name = 'xiecg-bbb';
}]);
m1.controller('ccc',['$scope',function($scope){
 $scope.name = 'xiecg-ccc';
}]);

</script>
</body>
</html>
  

项目更复杂，页面相同(首页&index)，数据不同，需要对url进行传参。

<!doctype html>
<html ng-app="myapp">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<title>$route</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-route.min.js"></script>
</head>
<body>

<div ng-controller="aaa">
 <a href="javascript:void(0);" ng-click="$location.path('aaa/123')">首页</a>
 <a href="javascript:void(0);" ng-click="$location.path('bbb')">内容</a>
 <a href="javascript:void(0);" ng-click="$location.path('ccc')">标题</a>
 <a href="javascript:void(0);" ng-click="$location.path('aaa/456')">index</a>
 <div ng-view></div>
</div>

<script type="text/javascript">

var m1 = angular.module('myapp',['ngroute']);
m1.config(['$routeprovider',function($routeprovider){
 $routeprovider.when('/aaa/:num',{
  template : '<h1>aaa</h1>{{name}}',
  controller : 'aaa'
 }).when('/bbb',{
  template : '<h1>bbb</h1>{{name}}',
  controller : 'bbb'
 }).when('/ccc',{
  template : '<h1>ccc</h1>{{name}}',
  controller : 'ccc'
 }).otherwise({
  redirectto : '/aaa/:num'
 });
}]);

m1.controller('aaa',['$scope','$location','$routeparams',function($scope,$location,$routeparams){
 $scope.name = 'xiecg-aaa';
 $scope.$location = $location;
 console.log($routeparams); //不同的数据
}]);
m1.controller('bbb',['$scope',function($scope){
 $scope.name = 'xiecg-bbb';
}]);
m1.controller('ccc',['$scope',function($scope){
 $scope.name = 'xiecg-ccc';
}]);
</script>
</body>
</html>

Angular路由简单学习

路由的事件监听。

<!doctype html>
<html ng-app="myapp">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<title>$route</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-route.min.js"></script>
</head>
<body>

<div ng-controller="aaa">
 <a href="#aaa">首页</a>
 <a href="#bbb">内容</a>
 <a href="#ccc">标题</a>
 <div ng-view></div>
</div>

<script type="text/javascript">

var m1 = angular.module('myapp',['ngroute']);

m1.run(['$rootscope',function($rootscope){
 //路由切换之前触发的事件
 $rootscope.$on('$routechangestart',function(event,current,pre){
  console.log(event);  //事件对象
  console.log(current); //路径对应的数据值
  console.log(pre);  //上一个路径
 });
}]);

m1.config(['$routeprovider',function($routeprovider){
 $routeprovider.when('/aaa',{
  template : '<h1>aaa</h1>'
  //templateurl : 'temp.html'
 }).when('/bbb',{
  template : '<h1>bbb</h1>'
 }).when('/ccc',{
  template : '<h1>ccc</h1>'
 }).otherwise({ //默认哈希值，哈希值出现错误也可以执行
  redirectto : '/aaa'
 });
}]);
m1.controller('aaa',['$scope',function($scope){

}]);

</script>
</body>
</html>
 

补充：angular事件的传播机制。

<div ng-controller="aaa">
 {{count}}
 <div ng-controller="aaa" ng-click="$emit('myevent')">
  {{count}}
  <div ng-controller="aaa">
   {{count}}
  </div>
 </div>
</div>
<script type="text/javascript">
var m1 = angular.module('myapp',[]);

m1.controller('aaa',['$scope',function($scope){
 $scope.count = 0;
 $scope.$on('myevent',function(e){
  //console.log(e.targetscope);  //当前的
  //console.log(e.currentscope); //目标的
  //console.log(e.name);   //事件名
  //e.stoppropagation();   //阻止冒泡
  $scope.count++;
 });
}]);
</script>

前面嵌套了三个controller，我们在中间的controller上绑定了click事件，使用$emit点击的时候，上面的controller也会触发事件。

Angular路由简单学习

如果是$broadcast点击就是往下传播。

Angular路由简单学习

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇： Ubuntu 17.10安装phpMyAdmin数据库管理工具配置详解

下一篇： AngularJS开发教程之控制器之间的通信方法分析

推荐阅读