AngularJS ng-view 示例
詹姆斯·哈特曼
知名网站，例如 Gmail 使用单页应用程序（SPA）的概念。当用户请求不同的页面时，应用程序不会跳转到其他页面；它会在当前页面内显示新页面的视图，让用户感觉仿佛从未离开过。AngularJS 也通过视图和路由实现了同样的效果。
⚠️ 支持通知： AngularJS 已达到 生命终结日期为2021年12月31日 并且不再接收任何补丁或安全修复。以下指令对于维护现有的 AngularJS 1.x 应用程序仍然有效；在现代系统中，该指令不再适用。 角度方向 等价物是 <router-outlet>.
什么是视图？
视图是指向用户显示的内容。无论用户想看什么，应用程序都会显示与之匹配的视图。
视图和路由的组合将应用程序划分为逻辑视图，并将每个视图绑定到一个路由。 调节器这使得应用程序更易于管理。
假设有一个订购应用程序，客户可以在其中查看订单和下新订单。下图展示了如何将其简化为单页应用程序。
不再使用两个独立的网页，一个用于“查看订单”，一个用于“新订单”， AngularJS 使用同一页面上的两种视图，分别通过两个引用链接访问。 #show 和 #new:
- 导航到
MyApp/#show无需离开当前页面即可显示“查看订单”视图。仅刷新当前页面的相应部分。 - 导航到
MyApp/#new对“新订单”视图也执行相同的操作。
将应用程序拆分成多个视图，可以使其易于管理和更改，每个视图都有一个对应的控制器，其中包含该功能的业务逻辑。
AngularJS 中的 ng-view 指令
此 ngView 指示 补充 $route 通常情况下，通过将当前路由的渲染模板包含到主布局文件中来提供服务。 index.html.
每次当前路线发生变化时，包含的视图也会随之改变。 $route 配置过程无需重新加载页面。 路线 另有专门介绍；这里重点介绍如何添加多个视图。
下面的流程图显示了整个过程，示例将逐步演示该过程。
如何在 AngularJS 中实现 ng-view
此示例向用户提供两个选项：显示事件和添加事件。点击 添加活动 显示“添加事件”视图，显示事件视图也同样适用。
步骤1） 将 angular-route 文件作为脚本引用引入。使用多个路由和视图需要此文件，该文件可从 AngularJS 网站获取。
步骤2） 添加 href 标签和 div 标签。
- 添加指向“添加新活动”和“显示活动”的 href 标签。
- 添加一个包含以下内容的div
ng-view用于标记视图区域的指令。每当点击任一链接时，匹配的视图都会注入到该区域。
步骤3） 在 AngularJS 脚本标签中添加路由配置。
- 当用户点击 新事件 链接，AngularJS 加载
add_event.html将其标记注入视图，并使用AddEventController用于业务逻辑。 - 当用户点击 显示事件 链接已加载。
show_event.html和用途ShowDisplayController. - 此
otherwise该子句设置向用户显示的默认视图，这里是 DisplayEvent。
步骤4） 添加控制器来处理这两个功能的业务逻辑。每个控制器都只是在其作用域对象上设置一条消息，该消息会在显示匹配的视图时显示。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script> <script src="https://code.angularjs.org/1.8.3/angular-route.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 to display an Event"; }); </script> </body> </html>
⚠️ 对原列表进行三处更正。 首先，链接内容如下： #!NewEvent 路由声明中不带斜杠 /NewEvent因此，没有匹配项。从 AngularJS 1.6 开始，默认哈希前缀为 !这样就得到了正确的地址 #!/NewEvent ——感叹号后面加一个斜杠。其次， ShowDisplayController 将消息设置为“这是显示一个事件”，缺少单词 至 第三，周围的文字引用了这句话。 lib/bootstrap.js 由于是从无法解析且从未使用过的相对路径加载的，因此已被删除。
步骤5） 创建页面 add_event.html 和 show_event.html每个消息都包含一个标头和一个表达式，用于显示其控制器注入的消息。
- 添加事件
<h2>Add New Event</h2> {{message}}
- 显示事件.html
<h2>Show Event</h2> {{message}}
如果代码执行成功，浏览器中将显示以下输出。
输出：
常见的 ng-view 错误及解决方法
几乎所有 ng-view 失败都源于模块配置、地址格式或页面服务方式，而不是指令本身。
- 视图区域保持空白： 这个
ngRoute该模块未列为依赖项，或者angular-route.js未加载。两者都是必需的，并且脚本必须位于之后。angular.min.js. - 链接会更改地址，但页面内容却无法显示： href 与路由不匹配。从 AngularJS 1.6 开始，地址需要
#!/Route；使用为 1.5 版本编写的旧代码#/Route. - 模板加载失败，出现 CORS 错误： 页面直接从磁盘打开。请通过 HTTP 提供服务，因为
templateUrl通过 AJAX 请求获取的文件协议会阻塞该文件。 - 只会显示最后呈现的画面： 多个元素都带有 ng-view 属性。AngularJS 坚持每个页面只能有一个视图区域。
- 首次加载时没有任何显示： 没有
otherwise条款已配置，因此空地址不匹配任何路由。
