AngularJS ng-view 示例：如何实现视图

如今，每个人都听说过“单页应用程序”。许多知名网站（例如 Gmail）都使用了单页应用程序（SPA）的概念。

SPA 的概念是，当用户请求不同的页面时，应用程序不会导航到该页面，而是在现有页面本身内显示新页面的视图。

它让用户感觉自己从未离开过该页面。在 Angular 中，借助 Views 和 Routes 也可以实现同样的效果。

在本教程中，您将学习-

什么是视图？
AngularJS 中的 ng-view 指令
如何在 AngularJS 中实现 ng-view（附示例）

什么是视图？

视图是显示给用户的内容。基本上，用户想看到什么，应用程序的视图就会显示给用户。

视图和路由的组合有助于将应用程序划分为逻辑视图，并将不同的视图绑定到控制器。

将应用程序划分为不同的视图并使用路由加载应用程序的不同部分有助于从逻辑上划分应用程序并使其更易于管理。

假设我们有一个订购应用程序，其中客户可以查看订单并下新订单。

下图和后续说明演示了如何将此应用程序制作为单页应用程序。

现在，不再需要两个不同的网页（一个用于“查看订单”，另一个用于“新订单”）， AngularJS，您应该在同一页面中创建两个不同的视图，分别称为“查看订单”和“新订单”。

我们的应用程序中还将有 2 个参考链接，分别称为 #show 和 #new。

因此，当应用程序转到 MyApp/#show 时，它将显示查看订单的视图，同时不会离开该页面。它只会刷新现有页面的部分，其中包含“查看订单”的信息。“新订单”视图也是如此。

因此，通过这种方式，将应用程序分成不同的视图变得更加简单，从而更易于管理，并且在需要时更容易进行更改。

每个视图都有一个相应的控制器来控制该功能的业务逻辑。

AngularJS 中的 ng-view 指令

“ngView” 是一个指令，它通过将当前路线的渲染模板包含到主布局（index.html）文件中来补充 $route 服务。

每次当前路线发生变化时，所包含的视图都会根据 $route 服务的配置进行更改，而无需改变页面本身。

我们将报道路线在后面的章节中，现在，我们将重点介绍如何向我们的应用程序添加多个视图。

以下是整个流程的完整流程图。我们将在下面的示例中详细介绍每个流程。

如何在 AngularJS 中实现 ng-view

让我们看一个如何在 AngularJS 中实现 ng-view 的示例。在我们的示例中，我们将向用户提供两个选项，

一种是显示“事件”，一种是添加“事件”。
当用户点击添加事件链接时，他们会看到“添加事件”的视图，“显示事件”也是如此。

请按照以下步骤执行此示例。

步骤1） 将 angular-route 文件作为脚本引用包含在内。

为了使用多个路由和视图的功能，此路由文件是必需的。该文件可以从 angularJS 网站下载。

步骤2） 添加 href 标签和 div 标签。

在此步骤中，

添加 href 标签，代表“添加新事件”和“显示事件”的链接。
另外，添加一个带有 ng-view 指令的 div 标签，该指令将代表视图。这样，只要用户单击“添加新事件链接”或“显示事件链接”，就会注入相应的视图。

步骤3） 在 Angular JS 的脚本标签中，添加以下代码。

现在我们先不要担心路由，我们将在后面的章节中看到它。现在我们先看看视图的代码。

这段代码的意思是，当用户点击之前在 div 标签中定义的 href 标签“NewEvent”时，它会转到网页 add_event.html，并从那里获取代码并将其注入到视图中。其次，为了处理此视图的业务逻辑，转到“AddEventController”。
这段代码的意思是，当用户点击之前在 div 标签中定义的 href 标签“DisplayEvent”时，它会转到网页 show_event.html，从那里获取代码并将其注入到视图中。其次，为了处理此视图的业务逻辑，转到“ShowDisplayController”。
这段代码的意思是，默认展示给用户看的View是DisplayEvent视图

步骤4） 添加控制器来处理业务逻辑。

接下来是添加控制器来处理“DisplayEvent”和“Add New Event”功能的业务逻辑。

我们只是简单地为每个控制器的每个范围对象添加一个消息变量。当向用户显示适当的视图时，将显示此消息。

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
    <script src="https://code.angularjs.org/1.5.9/angular-route.js"></script>
    <script src="https://code.angularjs.org/1.5.9/angular.min.js"></script>
    <script src="lib/bootstrap.js"></script>

</head>
<body ng-app="sampleApp">

<h1> Guru99 Global Event</h1>

<div class="container">
    <ul><li><a href="#!NewEvent"> Add New Event</a></li>
        <li><a href="#!DisplayEvent"> Display Event</a></li>
    </ul>
    <div ng-view></div>
</div>

<script>
    var app = angular.module('sampleApp',["ngRoute"]);
    app.config(function($routeProvider){
        $routeProvider.
        when("/NewEvent",{
            templateUrl : "add_event.html",
            controller: "AddEventController"
        }).
        when("/DisplayEvent", {
            templateUrl: "show_event.html",
            controller: "ShowDisplayController"
        }).
        otherwise ({
            redirectTo: '/DisplayEvent'
        });
    });
    app.controller("AddEventController", function($scope) {

        $scope.message = "This is to Add a new Event";

    });
    app.controller("ShowDisplayController",function($scope){

        $scope.message = "This is display an Event";

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

步骤5） 创建名为 add_event.html 和 show_event.html 的页面

接下来，创建名为 add_event.html 和 show_event.html 的页面。页面尽量简单，如下所示。

在我们的例子中，add_event.html 页面将有一个标题标签以及文本“添加新事件”，并有一个表达式来显示消息“这是添加新事件”。

类似地，show_event.html 页面也将有一个标题标签来保存文本“显示事件”，并且还有一个消息表达式来显示消息“这是显示事件”。

消息变量的值将根据附加到视图的控制器进行注入。

对于每个页面，我们将添加消息变量，该变量将从每个相应的控制器注入。

添加事件

<h2>Add New Event</h2>

{{message}}

显示事件.html

<h2>Show Event</h2>
	
{{message}}

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

输出：

从输出中，我们可以注意到两件事

地址栏将反映当前显示的视图。由于默认视图是显示“显示事件”屏幕，因此地址栏将显示“DisplayEvent”的地址。
此部分是即时创建的视图。由于默认视图是“显示事件”视图，因此这就是向用户显示的内容。

现在单击显示的页面中的“添加新事件”链接。您现在将获得以下输出。

输出：

地址栏现在将显示当前视图为“添加新事件”视图。请注意，您仍将位于同一申请页面上。您不会被定向到新的申请页面。
此部分是视图，现在它将更改为显示 HTML 用于“添加新事件”功能。因此，现在在此部分中，标题标签“添加新事件”和文本“这是添加新事件”会显示给用户。

什么是视图？

AngularJS 中的 ng-view 指令

如何在 AngularJS 中实现 ng-view

相关文章

每日Guru99新闻简报