Angular路由简单学习_网络技术_宿州市腾雀网络科技有限公司

Angular路由简单学习

发布时间 - 2026-01-10 22:07:39 点击率：次

现在非常流行单页面应用，传统都是通过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的模板文件。

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

路由的事件监听。

<!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也会触发事件。

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

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

# Angular # 路由 # Angularjs制作简单的路由功能demo # 使用AngularJS对路由进行安全性处理的方法 # angular中使用路由和$location切换视图 # AngularJS 路由详解和简单实例 # AngularJS 路由和模板实例及路由地址简化方法(必看) # angular.js之路由的选择方法 # AngularJS监听路由的变化示例代码 # 简单讲解AngularJS的Routing路由的定义与使用 # Angular2 (RC5) 路由与导航详解 # AngularJs ng-route路由详解及实例代码 # 首页 # 出现错误 # 都是 # 也有 # 也会 # 可以用 # 很简单 # 往下 # 定了 # 这叫 # 大家多多 # 人把 # charset # text # utf # script # title # content # http # meta

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：c++怎么使用vcpkg包管理器_c++ 依赖集成与Mani

下一篇：Java里为什么要使用自定义异常_Java异常设计规范说明

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：c++怎么使用vcpkg包管理器_c++ 依赖集成与Mani

下一篇：Java里为什么要使用自定义异常_Java异常设计规范说明