Question

我正在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']);

视图/ dashboard.html

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

视图/ createUser.html

<h1>Create User</h1>

视图/ 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（文件夹）处于同一级别，而所有3个视图都在views文件夹中。

感谢。

PS：现在工作正常。事实上，它之前也很好地运作。只是数据被隐藏在侧边栏和导航栏后面。不管怎样，谢谢。

Answer 1

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

Answer 2

由于缓存而发生状态代码304（未修改）。

您可以尝试在$httpProvider中注入app.js并尝试设置下面给出的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 ! "});
});

希望这有帮助！

Answer 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 =＆gt; ./views/userList.html

'$ routeProvider'没有在Angular中显示'templateUrl'的内容

3 个答案: