“$routeProvider”未在 Angular 中显示“templateUrl”的内容答案

【问题标题】：'$routeProvider' not displaying the content of 'templateUrl' in Angular“$routeProvider”未在 Angular 中显示“templateUrl”的内容
【发布时间】：2017-11-01 07:25:20
【问题描述】：

我正在 Angular 中设置一个项目，并且想要配置一些路由。我正在尝试通过“ngRoute”来实现这一目标。然而，'$routeProvider' 并没有显示 'templateUrl' 的内容，但是它加载了控制器就好了。

routes.js

app.config(function($routeProvider){
    $routeProvider
    .when("/",{template:"<div>I am here</div>",controller:"dashboardController"})
    .when("/userList",{templateUrl:"/views/userList.html",controller:"userListController"})
    .when("/createUser",{templateUrl:"/views/createUser.html",controller:"createUserController"})
    .otherwise({template:"Error 404 : Page not found ! "});
});

app.js

var app = angular.module('updatedAngularProject',['ngRoute']);

views/dashboard.html

<div>
        <h1 style="color:white;">fgsdgsdgsdgsdgsdgsgasdgdggasdfshfghfg</h1>
</div>

views/createUser.html

<h1>Create User</h1>

views/userList.html

<h1>User List</h1>

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <title>Welcome To | Bootstrap Based Admin Template - Material Design</title>
    <!-- Favicon-->
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,cyrillic-ext" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">

    <!-- Bootstrap Core Css -->
    <link href="resources/plugins/bootstrap/css/bootstrap.css" rel="stylesheet">

    <!-- Waves Effect Css -->
    <link href="resources/plugins/node-waves/waves.css" rel="stylesheet" />

    <!-- Animation Css -->
    <link href="resources/plugins/animate-css/animate.css" rel="stylesheet" />

    <!-- Morris Chart Css-->
    <link href="resources/plugins/morrisjs/morris.css" rel="stylesheet" />

    <!-- Custom Css -->
    <link href="resources/css/style.css" rel="stylesheet">

    <!-- AdminBSB Themes. You can choose a theme from css/themes instead of get all themes -->
    <link href="resources/css/themes/all-themes.css" rel="stylesheet" />

    <!-- Angular -->

    <script src="node_modules/angular/angular.js"></script>

    <script src="node_modules/angular-route/angular-route.js"></script>

    <script src="app.js"></script>

    <script src="services/mainService.js"></script>
    <script src="services/userListService.js"></script>
    <script src="services/createUserService.js"></script>
    <script src="services/dashboardService.js"></script>

    <script src="controllers/mainController.js"></script>
    <script src="controllers/userListController.js"></script>
    <script src="controllers/dashboardController.js"></script>
    <script src="controllers/createUserController.js"></script>

    <script src="routes.js"></script>
</head>
<body ng-app="updatedAngularProject">
<div class="menu">
                <ul class="list">
                    <li class="header">MAIN NAVIGATION</li>
                    <li class="active">
                        <a ng-href="#/">
                            <i class="material-icons">home</i>
                            <span>Home</span>
                        </a>
                    </li>
                    <li>
                        <a ng-href="#/{{'createUser'}}">
                            <i class="material-icons">text_fields</i>
                            <span>Typography</span>
                        </a>
                    </li>
                    <li>
                        <a ng-href="#/{{'userList'}}">
                            <i class="material-icons">layers</i>
                            <span>Helper Classes</span>
                        </a>
                    </li>
            </div>
            <ng-view></ng-view>
</body>
</html>

所有 3 个控制器都工作正常，因为它们中的“console.logs”可以完美打印。

我的文件夹结构是 routes.js、index.html、app.js 和 views(folder) 处于同一级别，而所有 3 个视图都在 views 文件夹内。

谢谢。

PS：它现在工作正常。事实上，它之前也运行得很好。只是数据被隐藏在侧边栏和导航栏后面。无论如何，谢谢。

【问题讨论】：

@LuninRoman 不。不起作用。
请扩展您的问题。为我们提供完整的 index.html 文件。
如我所见，您忘记在模板中声明您的应用，<body ng-app="updatedAngularProject">
@LuninRoman 就在那里。我只是忘了在这里复制它。它的行为仍然相同。

标签： javascript angularjs angular-ui-router

【解决方案1】：

我想你忘了把 <ng-view></ng-view> 指令放到 index.html 中。这是 Angular 应该放置您的模板内容的地方。

【讨论】：

好的，那么，您能提供更多信息吗？ not displaying the content 是什么意思？有什么错误吗？请您也添加您的 index.html 文件好吗？
@iamrkcheers 您的意思是说您收到 404 错误吗？
没有错误，没有。正如我所说，路由工作正常，因为它切换了不同的控制器。只是视图部分不起作用。
如果你打开一个开发控制台，你应该找到/views/userList.html的请求，是否加载成功？

【解决方案2】：

由于缓存而出现状态码 304（未修改）。

您可以尝试在您的app.js 中注入$httpProvider 并尝试设置no-cache，如下所示？

app.config(function($routeProvider, $httpProvider){
    $httpProvider.defaults.headers.common['Pragma'] = 'no-cache';

    $routeProvider
    .when("/",{template:"<div>I am here</div>",controller:"dashboardController"})
    .when("/userList",{templateUrl:"/views/userList.html",controller:"userListController"})
    .when("/createUser",{templateUrl:"/views/createUser.html",controller:"createUserController"})
    .otherwise({template:"Error 404 : Page not found ! "});
});

希望这会有所帮助！

【讨论】：

@iamrkcheers 我更新了代码以在app.js 级别执行相同的操作。可以试试吗？
你是什么意思。能否请您详细说明。
在我更新的代码中，我刚刚注入了httpProvider 模块并尝试将cache 参数设置为no-cache

【解决方案3】：

在设置路由时尝试将当前目录引用 (./) 添加到模板路径。

在您的路由中进行如下修改，

app.config(function($routeProvider){
    $routeProvider
    .when("/",{template:"<div>I am here</div>",controller:"dashboardController"})
    .when("/userList",{templateUrl:"./views/userList.html",controller:"userListController"})
    .when("/createUser",{templateUrl:"./views/createUser.html",controller:"createUserController"})
    .otherwise({template:"Error 404 : Page not found ! "});
});

注意更改/views/userList.html => ./views/userList.html

【讨论】：

【解决方案4】：

看起来错误出现在您的 ng-href 和模板路由中。当我将ng-href="{{'createUser'}}" 更改为ng-href="#!/createUser" 时，问题解决了，可能有更好的方法来解决它，但这样就可以了。路由必须在 url 之前有 ./，但这取决于这些部分/模板的位置。

这是一个正常工作的插件：https://plnkr.co/edit/z2rll9leOZUAqPkxFiRF?p=preview

【讨论】：