Question

我知道routeProvider主题已经被提升了一千多次，但我仍然无法弄清楚为什么我的代码无效。问题是，我认为是使用routeProvider，当我尝试访问localhost时，会显示找不到资源：8080 / login

以下是代码：

的index.html

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Strona Logowania</title>
    <link rel="stylesheet" type="text/css" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>

<div class="jumbotron">
    <div class="container">
        <div class="col-xs-offset-2 col-xs-8">
            <div ng-view></div>
        </div>
    </div>
</div>

<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-resource/angular-resource.min.js"></script>
<script src="../bower_components/angular-route/angular-route.min.js"></script>

<script src="../scripts/app.js"></script>
<script src="../scripts/controllers.js"></script>
<script src="../scripts/services.js"></script>

</body>
</html>

app.js

'use strict';

var app = angular.module('myApp', ['ngRoute', 'services', 'controllers']);

app.config(['$routeProvider', '$locationProvider',
                    function($routeProvider, $locationProvider) {
                        $locationProvider.html5Mode(true);
                        $routeProvider.
                        when('/login', {
                            controller: 'loginCtrl',
                            templateUrl: '../page/login.html'
                        }).
                        when('/home', {
                            controller: 'homeCtrl',
                            templateUrl: '../page/home.html'
                        }).
                        otherwise({
                                      redirectTo: '/login'
                                  });
                    }]);

controllers.js

'use strict';

var cont = angular.module('controllers', ['services']);

cont.controller('loginCtrl', ['$scope', 'usersFactory', '$window',
                              function ($scope, usersFactory, $window) {

                                  $scope.login = function () {
                                      usersFactory.create($scope.user).$promise
                                          .then(function (response) {

                                              $window.location.href = "/page/test.html";
                                          }, function (response) {

                                              $scope.errorMessage = "Bledne dane logowania";
                                          });

                                  }

                              }]);

cont.controller('homeCtrl', ['$scope', 'usersFactory', '$window']);

的login.html

<div class="container">
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" aria-selected="true">Davay bilet</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a class="nav dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">PL<span class="caret"></span></a>
                        <ul class="nav dropdown-menu">
                            <li><a href="#">PL</a></li>
                            <li><a href="#">EN</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</div>
<div class="jumbotron">
    <form name="myForm">
        <div>
            <label>Login*:</label>
            <input type="text" ng-model="user.ldapLogin" name="ldapLogin"/>
        </div>
        <div>
            <label>Hasło*:</label>
            <input type="password" ng-model="user.password" name="password"/>
        </div>
        <button ng-click="login()" type="submit" class>Loguj</button>
    </form>
</div>

当我使用添加的ng-controller将login.html插入index.html时，它可以正常工作。

Answer 1

确保templateUrl is set correctly。角度中的相对路径指的是实例化应用程序的文档（即index.html）。假设你有一个像这样的结构：

root/scripts/myApp.js
root/page/login.html
root/index.hmtl

正确的引荐将是templateUrl: 'page/login'，而不是预期的templateUrl: '../page/login'。根据角度，您无需在文件夹结构中向下一级。

Answer 2

我认为templateUrl是相对于当前网址而不是文件系统路径，因为视图是在客户端加载的。所以我认为下面的代码应该有效：

$routeProvider
    .when('/login', {
        controller: 'loginCtrl',
        templateUrl: '/page/login.html'
    })
    .when('/home', {
        controller: 'homeCtrl',
        templateUrl: '/page/home.html'
    })
    .otherwise({
        redirectTo: '/login'
    });

找不到AngularJS routeProvider资源

2 个答案: