AngularJS ng-view 不显示视图答案

【问题标题】：AngularJS ng-view not showing viewAngularJS ng-view 不显示视图
【发布时间】：2023-03-04 15:34:01
【问题描述】：

我正在为前端开发一个带有 AngularJS 的 Web 应用程序，我正在尝试设置路由并显示视图，到目前为止，即使 ng-include 和其他东西对我有用，但 ng-view 却不行我在 Visual Studio 中开发，当我运行应用程序时，它使用的是本地服务器（localhost）

这是我的目录结构

- ASP.NET project
---- Css
---- Scripts
-------- App
-------- app.js
----------- Home
-------------- Controllers
------------------ index-controller.js
---- Views
------- Partials
---------- navbar.html
------- home.html
- index.html

这里是 mi index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Scolaris</title>
    <!--Import materialize.css-->
    <link type="text/css" rel="stylesheet" href="Content/materialize/css/materialize.css" media="screen,projection" />

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body ng-app="app_module">

    <ng-include src="'Views/Partials/navbar.html'"/>

    <div ng-view></div>

    <!--Import jQuery before materialize.js-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="Content/materialize/js/materialize.js"></script>
    <script type="text/javascript" src="Scripts/angular.js"></script>
    <script type="text/javascript" src="Scripts/angular-route.js"></script>
    <script type="text/javascript" src="Scripts/App/app.js"></script>
    <script type="text/javascript" src="Scripts/App/Home/Controllers/index-controller.js"></script>
    <script type="text/javascript" src="Scripts/initialization.js"></script>
</body>
</html>

这是我的 app.js

'use strict';
var app_module = angular.module('app_module', ['ngRoute']);
app_module.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
      .when('/', {
          templateUrl: '/Views/home.html',
          controller: 'indexController'
      })
      .otherwise({
          redirectTo: '/'
      });
}]);
/* tried with ../../Views/home.html, ../Views/home.html, etc and nothing */

当我加载网站时，它会正确加载，如果我看到请求，我可以清楚地看到它正在请求带有 304 状态代码的 home.html，问题是带有 ng-view 的 div 没有显示 home 内的 html。 html，这是什么原因造成的？

【问题讨论】：

控制台有错误吗？尝试删除ng-include 并检查是否ng-view loads。
@Sourabh- 尝试删除加载的 ng-include 和 ng-view，为什么会这样，我怎样才能让它两者一起工作？
index.html 和 Views 文件夹是否在同一目录中？
@HardCodeStuds 这是一个常见问题，我也不确定，但我猜您的ng-view 实例化由于ng-include 而延迟。我想你应该切换到 ui-router 来处理嵌套视图。
@Sourabh-你错了..angularjs中没有这样的东西..基本上ng-include div没有关闭.所以浏览器将ng-view div包装在控制器内..&加载后ng-include 模板 ng-view 的 div 正在被替换，看看我的回答

标签： javascript html angularjs angularjs-directive angular-routing

【解决方案1】：

我通过用 div ng-include="srctoview"> 标记更改 <ng-include> 标记解决了这个问题。如果有人遇到这个问题，我建议这样做，或者像这个答案using a controller

感谢@Sourabh- 引导我找到答案。

【讨论】：

你看过我的回答吗？

【解决方案2】：

正确关闭<ng-include> 指令，因为浏览器将<ng-view> 包装在<ng-include> 内。它将解决问题。正如@pankaj 已经建议的那样。

【讨论】：