首页大前端 AngularJS AngularJS教程

路由

阅读2937

更新时间2025-08-11

动画

应用程序

什么是 AngularJS 中的路由？

如果您想导航到应用程序中的不同页面，但也希望应用程序成为 SPA（单页应用程序），并且没有页面重载，则可以使用 ngRoute 模块。

ngRoute 模块将您的应用程序路由到不同的页面，而无需重新加载整个应用程序。

实例

导航到 "red.htm"、"green.htm" 和 "blue.htm"：

主页

红色绿色蓝色

运行实例 »

点击 "运行实例" 按钮查看在线实例

我需要什么？

为了使你的应用程序为路由做好准备，你必须包含 AngularJS Route 模块：

然后，您必须将 ngRoute 添加为应用程序模块中的依赖项：

var app = angular.module("myApp", ["ngRoute"]);

现在您的应用程序可以访问提供 $routeProvider 的路由模块。

请使用 $routeProvider 在应用程序中配置不同的路由：

app.config(function($routeProvider) {
  $routeProvider
  .when("/", {
    templateUrl : "main.htm"
  })
  .when("/red", {
    templateUrl : "red.htm"
  })
  .when("/green", {
    templateUrl : "green.htm"
  })
  .when("/blue", {
    templateUrl : "blue.htm"
  });
});

它去哪里了？

您的应用程序需要一个容器来放置路由提供的内容。

这个容器就是 ng-view 指令。

可以通过三种不同的方式在应用程序中包含 ng-view 指令：

实例

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

运行实例 »

点击 "运行实例" 按钮查看在线实例

应用程序只能有一个 ng-view 指令，这将是该路由提供的所有视图的占位符。

$routeProvider

使用 $routeProvider，您可以定义当用户单击链接时要显示的页面。

实例

定义 $routeProvider：

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
  $routeProvider
  .when("/", {
    templateUrl : "main.htm"
  })
  .when("/london", {
    templateUrl : "london.htm"
  })
  .when("/paris", {
    templateUrl : "paris.htm"
  });
});

运行实例 »

点击 "运行实例" 按钮查看在线实例

使用应用程序的 config 方法定义 $routeProvider。在应用程序加载时将执行在 config 方法中注册的工作。

控制器

使用 $routeProvider，您还可以为每个“视图”定义一个控制器。

实例

添加控制器：

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
  $routeProvider
  .when("/", {
    templateUrl : "main.htm"
  })
  .when("/london", {
    templateUrl : "london.htm",
    controller : "londonCtrl"
  })
  .when("/paris", {
    templateUrl : "paris.htm",
    controller : "parisCtrl"
  });
});
app.controller("londonCtrl", function ($scope) {
  $scope.msg = "I love London";
});
app.controller("parisCtrl", function ($scope) {
  $scope.msg = "I love Paris";
});

运行实例 »

点击 "运行实例" 按钮查看在线实例

"london.htm" 和 "paris.htm" 是普通的 HTML 文件，您可以在其中添加 AngularJS 表达式，就像在 AngularJS 应用程序的其他 HTML 部分一样。

这些文件看起来像这样：

london.htm

London

London is the capital city of England.

It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

paris.htm

Paris
Paris is the capital city of France.
The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.

{{msg}}

模板

在前面的例子中，我们在 $routeProvider.when 方法中使用了 templateUrl 属性。

您还可以使用 template 属性，它允许您直接在属性值中编写 HTML，而不是引用页面。

实例

编写模板：

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
  $routeProvider
  .when("/", {
    template : "Main
Click on the links to change this content"
  })
  .when("/banana", {
    template : "Banana
Bananas contain around 75% water."
  })
  .when("/tomato", {
    template : "Tomato
Tomatoes contain around 95% water."
  });
});

运行实例 »

点击 "运行实例" 按钮查看在线实例

otherwise 方法

在前面的例子中，我们使用了 $routeProvider 的 when 方法。

您还可以使用 otherwise 方法，当其他所有路由都不匹配时，它将成为默认路由。

实例

如果既没有点击 "Banana" 链接也没有点击 "Tomato" 链接，请告诉他们：

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
  $routeProvider
  .when("/banana", {
    template : "Banana
Bananas contain around 75% water."
  })
  .when("/tomato", {
    template : "Tomato
Tomatoes contain around 95% water."
  })
  .otherwise({
    template : "None
Nothing has been selected"
  });
});

运行实例 »

点击 "运行实例" 按钮查看在线实例

动画

应用程序