Fatal编程技术网
  • javascript/
  • Javascript '$routeProvider'；不显示'；模板URL'；棱角分明

Javascript '$routeProvider'；不显示'；模板URL'；棱角分明

javascript angularjs

Javascript '$routeProvider'；不显示'；模板URL'；棱角分明,javascript,angularjs,angular-ui-router,Javascript,Angularjs,Angular Ui Router,我正在Angular中设置一个项目，希望配置一些路由。我正试图通过“ngRoute”实现这一目标。然而，“$routeProvider”并没有显示“templateUrl”的内容，不过它可以很好地加载控制器 routes.js app.config(function($routeProvider){ $routeProvider .when("/",{template:"<div>I am here</div>",controller:"dashboard

我正在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 ! "});
});
视图/dashboard.html

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


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

谢谢

附言：现在很好用。事实上，它以前也工作得很好。只是数据被隐藏在侧边栏和导航栏后面。
无论如何，谢谢。

我想您忘了将指令放入index.html。这是angular应该放置模板内容的地方。

由于缓存，出现状态代码304（未修改）

您能否尝试在
app.js
中注入
$httpProvider
，并尝试设置
无缓存
，如下所示

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 ! "});
});

app.config（函数（$routeProvider，$httpProvider）{
$httpProvider.defaults.headers.common['Pragma']='no cache'；
$routeProvider
.when（“/”，{模板：“我在这里”，控制器：“dashboardController”}）
.when（“/userList”，{templateUrl:“/views/userList.html”，controller:“userListController”}）
.when（“/createUser”，{templateUrl:“/views/createUser.html”，controller:“createUserController”}）
。否则（{模板：“错误404:找不到页面！”）；
});
希望这有帮助

设置路由时，尝试将当前目录引用（
/
）添加到模板路径

按如下方式在路由中进行位修改

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.config（函数（$routeProvider）{
$routeProvider
.when（“/”，{模板：“我在这里”，控制器：“dashboardController”}）
.when（“/userList”，{templateUrl:”./views/userList.html），controller:“userListController”}）
.when（“/createUser”，{templateUrl:”./views/createUser.html），controller:“createUserController”}）
。否则（{模板：“错误404:找不到页面！”）；
});
请注意，更改
/views/userList.html
=>
/views/userList.html
看起来错误出现在模板的
ng href
和路由中。当我将
ng href=“{{'createUser'}}}”更改为
ng href=“#！/createUser”
时，问题得到了解决，可能有更好的方法修复它，但这样就可以了。路由必须在URL之前有
/
，但这取决于这些部分/模板的位置


这是一个有效的工具：
@luniroman-nope。不起作用。请扩展你的问题。为我们提供完整的index.html文件。如我所见，您忘记在模板中声明您的应用程序，
@luniroman。我只是忘了在这里复印。它的行为仍然是一样的。好吧，那么，你能提供更多的信息吗？不显示内容是什么意思？有错误吗？您能同时添加index.html文件吗？@iamrkheers您的意思是说您收到了404错误吗？没有错误，什么都没有。正如我所说的，由于它切换不同的控制器，路由工作正常。只是视图部分不起作用。如果打开开发控制台，您应该会找到对
/views/userList.html
的请求，是否加载成功？@iamrkheers我已更新代码，以便在
app.js
级别执行相同的操作。你能试试吗？什么意思。请详细说明。在我更新的代码中，我刚刚插入了
httpProvider
模块，并尝试将
cache
参数设置为
no cache


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 ! "});
});