AngularJS 路由带参数示例

在学习 Angular 的路由之前，我们先快速回顾一下单页应用程序。

什么是单页应用程序？

单页应用程序（SPAs）是只加载单个 HTML 页面的 Web 应用程序，并根据用户与 Web 应用程序的交互动态更新页面。

AngularJS 中的路由是什么？

AngularJS 中的路由是一种创建单页应用程序的方法。它允许您为 Web 应用程序中的不同内容创建不同的 URL。AngularJS 路由还可以根据所选的路由显示多个内容。它在 URL 的 # 符号之后指定。

让我们来看一个通过 URL http://example.com/index.html 托管的网站的例子。

在此页面上，您将托管应用程序的主页面。假设该应用程序正在组织一个活动，并且有人想查看显示的各种活动，或者想查看特定活动的详细信息或删除某个活动。在启用了路由的单页应用程序中，所有这些功能都可以通过以下链接访问：

http://example.com/index.html#ShowEvent

http://example.com/index.html#DisplayEvent

http://example.com/index.html#DeleteEvent

将使用 # 符号以及不同的路由（ShowEvent、DisplayEvent 和 DeleteEvent）。

因此，如果用户想查看所有活动，他们将被定向到链接（http://example.com/index.html#ShowEvent），否则
如果他们只想查看特定活动，他们将被重定向到链接（ http://example.com/index.html#DisplayEvent），或者
如果他们想删除活动，他们将被定向到链接 http://example.com/index.html#DeleteEvent。

请注意，主 URL 保持不变。

使用 $routeProvider 添加 AngularJS 路由

正如我们之前讨论的，AngularJS 中的路由用于将用户路由到应用程序的不同视图。并且此路由在同一 HTML 页面上进行，因此用户会获得他们没有离开页面的体验。

为了实现路由，必须按照任何特定顺序在您的应用程序中实现以下主要步骤。

引用 angular-route.js。这是一个由 Google 开发的 JavaScript 文件，其中包含所有路由功能。需要将其放置在您的应用程序中，以便它可以引用路由所需的所有主要模块。
下一个重要步骤是从您的应用程序中添加对 ngRoute 模块的依赖。此依赖是必需的，以便可以在应用程序中使用路由功能。如果未添加此依赖项，则无法在 angular.JS 应用程序中使用路由。

以下是此语句的通用语法。这只是一个带有 ngRoute 关键字包含的普通模块声明。

var module = angular.module("sampleApp", ['ngRoute']);

下一步是配置您的 $routeProvider。这对于提供应用程序中的各种路由是必需的。以下是此语句的通用语法，它非常不言自明。它只是说明当选择相关路径时，使用路由向用户显示给定的视图。

when(path, route)

从您的 HTML 页面链接到您的路由。在您的 HTML 页面中，您将添加指向应用程序中各种可用路由的引用链接。

<a href="#/route1">Route 1</a><br/>

最后是包含 ng-view 指令，它通常会放在一个 div 标签中。当选择相关路由时，它将用于注入视图的内容。

AngularJS 路由示例

现在，让我们来看一个使用上述步骤的路由示例。

在我们的 AngularJS 带有参数的路由示例中，

我们将向用户提供 2 个链接，

一个是显示 Angular JS 课程的主题，另一个是显示 Node.js 课程。
当用户点击任一链接时，将显示该课程的主题。

步骤 1) 将 angular-route 文件作为脚本引用包含进来。

此路由文件对于使用多个路由和视图的功能是必需的。可以从 angular.JS 网站下载此文件。

步骤 2) 添加 href 标签，这些标签将代表“Angular JS 主题”和“Node JS 主题”的链接。

步骤 3) 添加一个带有 ng-view 指令的 div 标签，它将代表视图。

这将允许在用户点击“Angular JS 主题”或“Node JS 主题”时将相应的视图注入。

步骤 4) 在 AngularJS 的脚本标签中，添加“ngRoute 模块”和“$routeProvider”服务。

代码解释

第一步是确保包含“ngRoute 模块”。有了它，Angular 将自动处理您应用程序中的路由。由 Google 开发的 ngRoute 模块具有所有使路由成为可能的功能。通过添加此模块，应用程序将自动理解所有路由命令。
$routeprovider 是一个服务，Angular 使用它在后台监听被调用的路由。因此，当用户点击链接时，$routeprovider 会检测到这一点，然后决定走哪个路由。
为 Angular 链接创建一个路由 – 此块表示当点击 Angular 链接时，将注入 Angular.html 文件，并使用 Controller ‘AngularController’ 处理任何业务逻辑。
为 Node 链接创建一个路由 – 此块表示当点击 Node 链接时，将注入 Node.html 文件，并使用 Controller ‘NodeController’ 处理任何业务逻辑。

步骤 5) 接下来是添加控制器来处理 AngularController 和 NodeController 的业务逻辑。

在每个控制器中，我们都创建一个键值对数组来存储每门课程的主题名称和描述。数组变量 ‘tutorial’ 已添加到每个控制器的作用域对象中。

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
</head>
<body ng-app="sampleApp">
<title>Event Registration</title>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>

<h1> Guru99 Global Event</h1>

<div class="container">
    <ul>
        <li><a href="#Angular">Angular JS Topics</a></li>
        <li><a href="#Node.html">Node JS Topics</a></li>
    </ul>
    <div ng-view></div>
</div>

<script>
    var sampleApp = angular.module('sampleApp',['ngRoute']);
    sampleApp.config(['$routeProvider',

        function($routeProvider){
        $routeProvider.
        when('/Angular',{
            templateUrl : '/Angular.html',
            controller: 'AngularController'
        }).
        when("/Node", {
            templateUrl: '/Node.html',
            controller: 'NodeController'
        });
    }]);
    sampleApp.controller('AngularController',function($scope) {

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]
    });

    sampleApp.controller('NodeController',function($scope){

        $scope.tutorial = [
            {Name:"Promises",Description :"Power of Promises"},
            {Name:"Event",Description :"Event of Node.js"},
            {Name:"Modules",Description :"Modules in Node.js"}
            ]
    });

</script>
</body>
</html>

步骤 6) 创建名为 Angular.html 和 Node.html 的页面。对于每个页面，我们执行以下步骤。

这些步骤将确保数组中的所有键值对都显示在每个页面上。

使用 ng-repeat 指令遍历 tutorial 变量中定义的每个键值对。
显示每个键值对的名称和描述。

Angular.html

<h2>Anguler</h2>
<ul ng-repeat="ptutor in tutorial">
    <li>Course : {{ptutor.Name}} - {{ptutor.Description}}</li>
</ul>

Node.html

<h2>Node</h2>
<ul ng-repeat="ptutor in tutorial">
    <li>Course : {{ptutor.Name}} - {{ptutor.Description}}</li>
</ul>

如果代码成功执行，在浏览器中运行代码时将显示以下输出。

输出

如果您点击 AngularJS 主题链接，将显示如下输出。

输出清楚地表明，

当点击“Angular JS 主题”链接时，我们在代码中声明的 routeProvider 决定注入 Angular.html 代码。
这段代码将被注入到包含 ng-view 指令的“div”标签中。此外，课程描述的内容来自 AngularController 中定义的作用域对象中的“tutorial variable”。
当点击 Node.js 主题时，也会发生相同的结果，Node.js 主题的视图将被显现。
另外，请注意页面 URL 保持不变，只有 # 标签之后的路由会发生变化。这就是单页应用程序的概念。URL 中的 #hash 标签是分隔符，用于分隔路由（在我们的例子中是上图中所示的‘Angular’）和主 HTML 页面（Sample.html）。

在 AngularJS 中创建默认路由

AngularJS 中的路由还提供了设置默认路由的便利。这是在现有路由没有匹配时选择的路由。

默认路由是通过在定义 $routeProvider 服务时添加以下条件来创建的。

下面的语法只是简单地意味着，如果没有匹配到任何现有路由，则重定向到另一个页面。

otherwise ({
    redirectTo: 'page'
});

让我们使用上面的相同示例，并在我们的 $routeProvider 服务中添加一个默认路由。

function($routeProvider){
$routeProvider.

when('/Angular',{
templateUrl : 'Angular.html',
controller: 'AngularController'
}).

when("/Node", {
templateUrl: 'Node.html',
controller: 'NodeController'
}).
otherwise({
    redirectTo:'/Angular'
});
}]);

代码解释

这里我们使用与上面相同的代码，唯一的区别是我们使用了 otherwise 语句和“redirectTo”选项来指定在未指定路由时应加载哪个视图。在我们的例子中，我们希望显示 ‘/Angular’ 视图。

如果代码成功执行，在浏览器中运行代码时将显示以下输出。

输出

从输出中，

您可以看到默认显示的视图是 angular JS 视图。
这是因为当页面加载时，它会进入 $routeProvider 函数中的‘otherwise’选项并加载‘/Angular’视图。

如何从 AngularJS 路由访问参数

Angular 还提供了在路由期间提供参数的功能。参数会添加到 URL 中的路由末尾，例如 http://guru99/index.html#/Angular/1。在此 Angular 路由示例中，

http://guru99/index.html 是我们的主应用程序 URL
# 符号是主应用程序 URL 和路由之间的分隔符。
Angular 是我们的路由
最后 ‘1’ 是添加到我们路由的参数。

URL 中参数的语法如下所示

HTMLPage#/route/parameter

您会注意到参数位于 URL 中路由之后。

因此，在我们的 AngularJS 路由示例中，上面的 Angular JS 主题，我们可以像下面这样传递参数：

Sample.html#/Angular/1

Sample.html#/Angular/2

Sample.html#/Angular/3

这里的参数 1、2 和 3 实际上可以代表 topicid。

让我们详细了解一下如何实现带参数的 Angular 路由

步骤 1) 将以下代码添加到您的视图

添加一个表格向用户显示 Angular JS 课程的所有主题
为显示“Controllers”主题添加一个表格行。对于此行，将 href 标签更改为“Angular/1”，这意味着当用户点击此主题时，参数 1 将与路由一起传递到 URL 中。
为显示“Models”主题添加一个表格行。对于此行，将 href 标签更改为“Angular/2”，这意味着当用户点击此主题时，参数 2 将与路由一起传递到 URL 中。
为显示“Directives”主题添加一个表格行。对于此行，将 href 标签更改为“Angular/3”，这意味着当用户点击此主题时，参数 3 将与路由一起传递到 URL 中。

步骤 2) 在 Routeprovider 服务函数中添加 topic id
在 routeprovider 服务函数中，添加 :topicId 以表示 URL 中路由之后的任何参数都将被分配给变量 topicId。

步骤 3) 向控制器添加必要的代码

确保在定义控制器函数时首先将“$routeParams”作为参数添加。此参数可以访问 URL 中传递的所有路由参数。
“routeParams”参数引用了作为路由参数传递的 topicId 对象。我们在这里将‘$routeParams.topicId’变量附加到我们的作用域对象中，作为变量‘$scope.tutotialid’。这样做是为了能够在视图中通过 tutorialid 变量引用它。

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>
<table class="table table-striped">
    <thead>
    <tr> <th>#</th><th>Angular JS topic</th><th>Description</th><th></th> </tr> </thead>
    <tbody>
    <tr>
        <td>l</td><td>l</td><td>Controllers</td>
        <td><a href="#Angular/l">Topic details</a></td>
    </tr>
    <tr>
        <td>2</td><td>2</td><td>Models</td>
        <td><a href="#Angular/2">Topic details</a></td>
    </tr>
    <tr>
        <td>3</td><td>3</td><td>Directives</td>
        <td><a href="#Angular/3">Topic details</a></td>
    </tr>
    </tbody>
</table>

<script>
    var sampleApp = angular.module('sampleApp',['ngRoute']);

    sampleApp.config(
        function($routeProvider){
            $routeProvider.
            when('/Angular/:topicId',{
                templateUrl : 'Angular.html',
                controller: 'AngularController'
            })
        });

    sampleApp.controller('AngularController',function($scope,$routeParams) {

        $scope.tutorialid=$routeParams.topicId

    });
</script>
</body>
</html>

步骤 4) 添加用于显示变量的表达式
在 Angular.html 页面中添加用于显示 tutorialid 变量的表达式，如下所示。

<h2>Anguler</h2>

<br><br>{{tutorialid}}

如果代码成功执行，在浏览器中运行代码时将显示以下输出。

输出

在输出屏幕上，

如果您点击第一个主题的“主题详情”链接，数字 1 将附加到 URL 中。
然后，Angular.JS routeprovider 服务会将此数字作为“routeparam”参数获取，并可以由我们的控制器访问。

如何使用 Angular $route 服务

$route 服务允许您访问路由的属性。在控制器中定义函数时，$route 服务作为参数可用。控制器中 $route 参数可用的一般语法如下；

myApp.controller('MyController',function($scope,$route)

myApp 是为您的应用程序定义的 angular.JS 模块
MyController 是为您应用程序定义的控制器的名称
就像 $scope 变量可用于您的应用程序一样，它用于将信息从控制器传递到视图。$route 参数用于访问路由的属性。

让我们看看如何使用 $route 服务。

在此示例中，

我们将创建一个简单的自定义变量，名为“mytext”，它将包含字符串“This is angular”。
我们将此变量附加到我们的路由。稍后我们将使用 $route 服务从控制器中访问此字符串，然后随后使用作用域对象在视图中显示它。

所以，让我们看看我们需要执行哪些步骤来实现这一点。

步骤 1) 为路由添加自定义键值对。这里，我们添加了一个名为‘mytext’的键，并为其分配了值“This is angular”。

步骤 2) 向控制器添加相关代码

将 $route 参数添加到控制器函数。$route 参数是 Angular 中定义的关键参数，它允许访问路由的属性。
路由中定义的“mytext”变量可以通过 $route.current 引用进行访问。然后将其分配给作用域对象中的‘text’变量。之后就可以在视图中相应地访问 text 变量了。

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>
<table class="table table-striped">
    <thead>
    <tr> <th>#</th><th>Angular JS topic</th><th>Description</th><th></th> </tr> </thead>
    <tbody>
    <tr>
        <td>l</td><td>l</td><td>Controllers</td>
        <td><a href="#Angular/l">Topic details</a></td>
    </tr>
    <tr>
        <td>2</td><td>2</td><td>Models</td>
        <td><a href="#Angular/2">Topic details</a></td>
    </tr>
    <tr>
        <td>3</td><td>3</td><td>Directives</td>
        <td><a href="#Angular/3">Topic details</a></td>
    </tr>
    </tbody>
</table>

<script>
    var sampleApp = angular.module('sampleApp',['ngRoute']);

    sampleApp.config(['$routeProvider',
        function($routeProvider){
            $routeProvider.
            when('/Angular/:topicId',{
                mytext:"This is angular",
                templateUrl : 'Angular.html',
                controller: 'AngularController'
            })
        }]);

    sampleApp.controller('AngularController',function($scope,$routeParams,$route) {

        $scope.tutorialid=$routeParams.topicId;
        $scope.text=$route.current.mytext;

    });
</script>
</body>
</html>

步骤 3) 从作用域对象添加对 text 变量的引用作为表达式。这将添加到我们的 Angular.html 页面中，如下所示。

这将导致文本“This is angular”被注入到视图中。{{tutorialid}} 表达式与上一主题中看到的相同，它将显示数字‘1’。

<h2>Anguler</h2>

<br><br>{{text}}

<br><br>

如果代码成功执行，在浏览器中运行代码时将显示以下输出。

输出

从输出中，

当我们在表格中点击任何链接时，我们都可以看到文本“This is angular”也显示出来了。主题 ID 也同时显示出来。

启用 HTML5 路由

HTML5 路由主要用于创建干净的 URL。这意味着从 URL 中删除哈希标签。因此，当使用 HTML5 路由时，路由 URL 将如下所示：

Sample.html/Angular/1

Sample.html/Angular/2

Sample.html/Angular/3

这个概念通常被称为向用户展示漂亮的 URL。

有两种主要步骤需要为 HTML5 路由执行。

配置 $locationProvider
设置相对链接的基地址

让我们详细了解如何在上面的示例中执行上述步骤。

步骤 1) 将相关代码添加到 angular 模块

向应用程序添加 baseURL 常量 – 这对于 HTML5 路由是必需的，以便应用程序知道应用程序的基础位置。
添加 $locationProvider 服务。此服务允许您定义 html5Mode。
将 $locationProvider 服务的 html5Mode 设置为 true。

步骤 2) 删除所有链接的 # 标签（‘Angular/1’、‘Angular/2’、‘Angular/3’），以创建易于阅读的 URL。

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>
<table class="table table-striped">
    <thead>
    <tr> <th>#</th><th>Angular JS topic</th><th>Description</th><th></th> </tr> </thead>
    <tbody>
    <tr>
        <td>l</td><td>l</td><td>Controllers</td>
        <td><a href="Angular/l">Topic details</a></td>
    </tr>
    <tr>
        <td>2</td><td>2</td><td>Models</td>
        <td><a href="Angular/2">Topic details</a></td>
    </tr>
    <tr>
        <td>3</td><td>3</td><td>Directives</td>
        <td><a href="Angular/3">Topic details</a></td>
    </tr>
    </tbody>
</table>

<script>
    var sampleApp = angular.module('sampleApp',['ngRoute']);
    sampleApp.constant("baseUrl","https://:63342/untitled/Sample.html/Angular");

    sampleApp.config(
        function($routeProvider,$locationProvider){
            $routeProvider.
            when('/Angular/:topicId',{
                templateUrl : 'Angular.html',
                controller: 'AngularController'
            })
        });

    sampleApp.controller('AngularController',function($scope,$routeParams,$route) {

        $scope.tutorialid=$routeParams.topicId

    });
</script>
</body>
</html>

如果代码成功执行，在浏览器中运行代码时将显示以下输出。

输出

从输出中，

您可以看到访问应用程序时没有 # 标签。

摘要

路由用于在同一网页上向用户呈现不同的视图。这基本上是单页应用程序中使用的概念，单页应用程序几乎适用于所有现代 Web 应用程序。
可以为 angular.JS 路由设置默认路由。它用于确定将向用户显示的默认视图。
参数可以通过 URL 作为路由参数传递到路由。然后，这些参数随后通过在控制器中使用 $routeParams 参数进行访问。
$route 服务可用于在路由中定义自定义键值对，然后可以从视图中访问这些键值对。
HTML5 路由用于从 angular 的路由 URL 中删除 # 标签，以形成漂亮的 URL。

什么是单页应用程序？

AngularJS 中的路由是什么？

使用 $routeProvider 添加 AngularJS 路由

相关文章

AngularJS 路由示例

在 AngularJS 中创建默认路由

如何从 AngularJS 路由访问参数

如何使用 Angular $route 服务

启用 HTML5 路由

摘要

订阅新闻通讯