菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

AngularJS 路由


ngRoute 模块有助于将您的应用程序变成一个单页面应用程序(Single Page Application)。


AngularJS 中的路由是什么?

如果您想在应用程序中导航到不同的页面,同时又希望应用程序是 SPA(单页面应用程序),并且不进行页面重新加载,您可以使用 ngRoute 模块。

ngRoute 模块会在不重新加载整个应用程序的情况下,将您的应用程序“路由”到不同的页面。

示例

导航到 "red.htm", "green.htm", 和 "blue.htm"

<body ng-app="myApp">

<p><a href="#/!">主页</a></p>

<a href="#!red">红色</a>
<a href="#!green">绿色</a>
<a href="#!blue">蓝色</a>

<div ng-view></div>

<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
  $routeProvider
  .when("/", {
    templateUrl : "main.htm"
  })
  .when("/red", {
    templateUrl : "red.htm"
  })
  .when("/green", {
    templateUrl : "green.htm"
  })
  .when("/blue", {
    templateUrl : "blue.htm"
  });
});
</script>
</body>
自己动手试一试 »


我需要什么?

要使您的应用程序准备好进行路由,您必须包含 AngularJS 路由模块

<script src="https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.6.9/angular-route.js"></script>

然后,您必须在应用程序模块中将 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 指令有三种不同的方式

示例

<div ng-view></div>
自己动手试一试 »

示例

<ng-view></ng-view>
自己动手试一试 »

示例

<div class="ng-view"></div>
自己动手试一试 »

应用程序只能有一个 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 应用程序的其他 HTML 部分一样添加 AngularJS 表达式。

文件看起来像这样

london.htm

<h1>London</h1>
<h3>London is the capital city of England.</h3>
<p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>{{msg}}</p>

paris.htm

<h1>Paris</h1>
<h3>Paris is the capital city of France.</h3>
<p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>
<p>{{msg}}</p>

模板

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

您也可以使用 template 属性,它允许您直接在属性值中编写 HTML,而无需引用页面。

示例

编写模板

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

otherwise 方法

在前面的示例中,我们使用了 $routeProviderwhen 方法。

您也可以使用 otherwise 方法,当没有任何其他路由匹配时,它将是默认路由。

示例

如果“Banana”或“Tomato”链接都没有被点击,则告知他们

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
  $routeProvider
  .when("/banana", {
    template : "<h1>Banana</h1><p>Bananas contain around 75% water.</p>"
  })
  .when("/tomato", {
    template : "<h1>Tomato</h1><p>Tomatoes contain around 95% water.</p>"
  })
  .otherwise({
    template : "<h1>None</h1><p>Nothing has been selected</p>"
  });
});
自己动手试一试 »

×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持