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

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

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

这会给用户一种感觉，仿佛他们从未离开过该页面。在 Angular 中，可以通过视图与路由结合来实现这一点。

在本教程中，您将学习-

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

什么是视图？

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

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

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

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

下面的图表和后续解释演示了如何将此应用程序制作成单页应用程序。

现在，在 AngularJS 中，我们不再拥有两个不同的网页，一个用于“查看订单”，另一个用于“新订单”，而是会创建两个不同的视图，即“查看订单”和“新订单”，放在同一个页面上。

我们的应用程序中还将有两个引用链接，分别是 #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”。
这段代码的意思是，默认显示给用户的视图是 DisplayEvent 视图。

步骤 4) 添加控制器以处理业务逻辑。

接下来是添加控制器来处理“显示事件”和“添加新事件”功能区的业务逻辑。

我们只是为每个控制器在作用域对象中添加一个消息变量。当适当的视图显示给用户时，将显示此消息。

<!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 页面也将有一个标题标签来显示文本“显示事件”，还有一个消息表达式来显示消息“这是为了显示事件”。

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

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

add_event.html

<h2>Add New Event</h2>

{{message}}

show_event.html

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

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

输出

从输出中，我们可以注意到两点：

地址栏将反映当前显示的是哪个视图。由于默认视图是显示“显示事件”屏幕，因此地址栏显示的是“DisplayEvent”的地址。
这一部分是视图，它是在运行时动态创建的。由于默认视图是“显示事件”视图，所以这就是显示给用户的内容。

现在点击页面上显示的“添加新事件”链接。您将看到以下输出。

输出

地址栏现在将反映当前视图是“添加新事件”视图。请注意，您仍然在同一个应用程序页面上。您不会被重定向到新的应用程序页面。
这一部分是视图，它现在将更改为显示“添加新事件”功能区的 HTML。因此，现在这一部分将显示标题标签“添加新事件”和文本“这是为了添加新事件”。

什么是视图？

AngularJS 中的 ng-view 指令

如何在 AngularJS 中实现 ng-view

相关文章

订阅新闻通讯