网络编程 
首页 > 网络编程 > 浏览文章

AngularJS监听路由变化的方法

(编辑:jimmy 日期: 2026/2/26 浏览:3 次 )

使用AngularJS时,当路由发生改变时,我们需要做某些处理,此时可以监听路由事件,常用的是$routeStartChange, $routeChangeSuccess。完整例子如下:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>AngularJS监听路由变化</title>
</head>
<body ng-app="ngRouteExample">
  <div id="navigation"> 
   <a href="#/home" rel="external nofollow" >Home</a>
   <a href="#/about" rel="external nofollow" >About</a>
  </div>
   
  <div ng-view></div>

  <script type="text/ng-template" id="home.html">
   <h1> Home </h1>
   <table>
    <tbody>
     <tr ng-repeat="x in records" style="background:#abcdef;">
      <td>{{x.Name}}</td>
      <td>{{x.Country}}</td> 
     </tr>     
    </tbody>
   </table>
  </script>

  <script type="text/ng-template" id="about.html">
   <h1> About </h1>
   <p>在输入框中尝试输入:</p>
   <p>姓名:<input type="text" ng-model="name"></p>
   <p>你输入的为: {{name}}</p>
  </script>

  <script src="/UploadFiles/2021-04-02/angular.min.js">

上述的例子是AngularJS 1的,对于Angular2是否也可以用,还没尝试过,有机会验证了再记录下咯~~

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

上一篇:JavaScript和JQuery获取DIV值的方法示例
下一篇:微信小程序开发之入门实例教程篇
高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。