Angular路由简单学习

网络编程 2024/11/15 佚名

3 2 1

现在非常流行单页面应用，传统都是通过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="/UploadFiles/2021-04-02/angular.min.js">

上面的例子很简单， 除了用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="/UploadFiles/2021-04-02/angular.min.js">
 
以事件的方式映射路由页面。


<!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="/UploadFiles/2021-04-02/angular.min.js">
  
项目更复杂，页面相同(首页&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="/UploadFiles/2021-04-02/angular.min.js">


路由的事件监听。


<!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="/UploadFiles/2021-04-02/angular.min.js">
 
补充：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,路由 
                                
                                    标签：
                                        Angular,路由
                                     

                            
                        
                        
                            
                                免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
                                如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
                            
                        
                        
                            
                                
                                    上一篇
                                    详解Angular的内置过滤器和自定义过滤器【推荐】
                                
                            
                            
                                
                                    下一篇
                                    详解Angular的双向数据绑定(MV-VM)
                                
                            
                        
                        
                        狼山资源网 Copyright www.pvsay.com
                        
                            
                                
                                
                                    评论“Angular路由简单学习”
                                
                            
                            
                                
                                    
                                        
                                            
                                                Angular路由简单学习
                                            
                                            
                                                
                                            
                                            
                                                
                                                
                                                
                                            
                                            
                                        
                                    
                                    
                                    
                                        暂无“Angular路由简单学习”评论...