Ресурс AngularJS routeProvider не найден

Я знаю, что тема 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>

Когда я вставляю login.html в index.html с добавленным ng-контроллером, он работает нормально.

Источник

2 ответа

Убедитесь, что вы templateUrl is set correctly, Относительные пути в угловых относятся к документу, в котором создается приложение (например, index.html). Предполагая, что у вас есть такая структура:

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

правильный реферал будет templateUrl: 'page/login'не так, как можно было бы ожидать templateUrl: '../page/login', В соответствии с angular нет необходимости идти на один уровень вниз в структуре вашей папки.

Источник

Я думаю templateUrl относительно текущего URL, но не пути к файловой системе, потому что представление загружается на стороне клиента. Поэтому я думаю, что код ниже должен работать:

$routeProvider
    .when('/login', {
        controller: 'loginCtrl',
        templateUrl: '/page/login.html'
    })
    .when('/home', {
        controller: 'homeCtrl',
        templateUrl: '/page/home.html'
    })
    .otherwise({
        redirectTo: '/login'
    });
Источник
Другие вопросы по тегам