角度路由器导航 - Javascript

简介

角度路由是AngularJS中的一个核心功能，用于将URL与视图进行映射，展现出动态的单页应用程序。在这种模式下，应用程序的内容和页面刷新是通过AJAX和AngularJS进行处理的，而不是像传统的多页应用程序一样。

使用

使用AngularJS中的路由器需要添加ngRoute模块，使用前需要先在HTML文件中引用angular-route脚本文件。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular-route.js"></script>

接下来，在app.js文件中定义AngularJS应用程序并配置路由器，如下所示：

var app = angular.module('myApp', ['ngRoute']);
app.config(function($routeProvider) {
  $routeProvider
  .when('/', {
    templateUrl : 'main.html',
    controller  : 'mainCtrl'
  })
  .when('/about', {
    templateUrl : 'about.html',
    controller  : 'aboutCtrl'
  })
  .when('/contact', {
    templateUrl : 'contact.html',
    controller  : 'contactCtrl'
  })
  .otherwise({redirectTo: '/'});
});

在这个例子中，我们定义了3个路由：'/'，'/about'和'/contact'，每个路由都有其对应的模板和控制器。通过otherwise方法，我们将重定向未定义的路由到'/'路由上。

要在HTML文件中使用路由器，需要使用ng-view指令，例如：

<div ng-view></div>

然后，在每个模板中，必须指定对应的控制器，例如：

<div ng-controller="aboutCtrl">
  <h2>About Page</h2>
  <p>This is the about page.</p>
</div>

总结

AngularJS的路由器是一个非常强大的功能，可以使单页应用程序更加灵活和易于维护。通过简单添加配置，我们可以轻松地实现url到视图的映射，使得应用程序更加动态。