ngRoute не находит шаблон

Я новичок в angular, и мне трудно заставить ngRoute забрать мой файл шаблона.

Вот мой index.html:

<html ng-app="myApp">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-route.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script src="app.js"></script>
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<nav>
    <div>
        <ul>
             <li><a href="#/home">home</a></li>
        </ul>
    </div>
</nav>

<body>
    <div ng-view>
    </div>
</body>


</html>

Вот мой app.js:

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

myApp.controller('MainCtrl', function($scope) {
    $scope.message = 'Hello World';
});

myApp.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
    .when('/home', {
            templateUrl: 'pages/home.html',
            controller: 'MainCtrl'
        })
        .otherwise({
            redirectTo: '/home'
        });
}]);

Вот мои страницы/home.html:

<div ng-controller="MainCtrl">
    <p>Test</p>
    <p>{{ message }}</p>    
</div>

Я вижу, что он добавляет #/ к корневому URL-адресу, так что, возможно, это частично работает; однако похоже, что он не отображает шаблон на странице «pages/home.html».

Я проверил URL-адрес cdn, чтобы убедиться, что не было никаких несоответствий версий, а что нет, но, похоже, это не так.

Это практически мой первый проект на Angular, и я только что вышел из документации, но должно быть что-то, чего я не вижу. Исходя из других серверных проектов, отсутствие трассировки стека меня убивает, ха-ха.

Есть ли что-то, чего мне не хватает в приведенном выше коде, что мешает рендерингу моего шаблона в «/»?

Спасибо!


javascript angularjs ngroute
person execv3    schedule 14.05.2016    source источник
comment
для удаления # вам нужно использовать html5Mode(true) или это также может быть достигнуто с помощью .htaccess.   -  person Afshan Shujat    schedule 14.05.2016
comment
Вы можете заставить его работать?   -  person Wild Widow    schedule 14.05.2016
comment
Я все еще не могу заставить это работать. index.html перенаправляет на /index.html#/ и остается пустым. Тот же результат, когда я изменяю использование html5Mode(true);   -  person execv3    schedule 14.05.2016
comment
Попробуйте включить свой jquery-min.js над скриптом angular js. Вы получаете какую-либо ошибку в консоли?   -  person Afshan Shujat    schedule 14.05.2016
comment
Хороший вызов на консоли. Я получаю: angular.js:12416 Ошибка: [$location:nobase] ошибки .angularjs.org/1.4.5/$location/nobase   -  person execv3    schedule 14.05.2016
comment
@ chrisl0lz вам не нужно добавлять какую-либо службу определения местоположения и маршрутизацию html5Mode. вам нужна только маршрутизация html5mode, когда вы хотите удалить # в URL-адресе. Ваша проблема в другом. Посмотрите на мое решение   -  person Wild Widow    schedule 14.05.2016
comment
Только что отредактировал мой код в вопросе, чтобы отразить мою последнюю попытку.   -  person execv3    schedule 14.05.2016
comment
Последняя попытка привела этого парня в журналы консоли: angular.js:10661 XMLHttpRequest не может загрузить файл:///Users/chris/Git/slcc-eportfolio/pages/home.html. Запросы между источниками поддерживаются только для схем протоколов: http, data, chrome, chrome-extension, https, chrome-extension-resource.   -  person execv3    schedule 14.05.2016
comment
@ chrisl0lz, как я уже сказал, вам не нужна маршрутизация html5Mode. Вернитесь к исходному коду и просто измените .when('/') на .when('/home').   -  person Wild Widow    schedule 14.05.2016
comment
@WildWidow хорошо, попробуй сейчас   -  person execv3    schedule 14.05.2016
comment
Проблема заключалась в том, что Chrome давится локальными файлами, подробности в моем ответе.   -  person execv3    schedule 14.05.2016
comment
Спасибо @AfshanShujat за то, что указал мне на консоль.   -  person execv3    schedule 14.05.2016
comment
Спасибо @WildWidow за то, что следите за моими маршрутами.   -  person execv3    schedule 14.05.2016

Ответы (4)


arrow_upward
0
arrow_downward

Это мой код, и он работает нормально, вы можете получить от него помощь.

var EventList = angular.module("EventList", ['ngRoute' ,'infinite-scroll']);
EventList.config(function($routeProvider) {
    //$locationProvider.html5Mode(true); 
    $routeProvider
        .when('/', {
            templateUrl: 'views/business/business_home_events.html',
            controller: 'EventListController'
         });
});

EventList.controller('EventListController', ['$scope',  '$http', '$route', function($scope,  $http, $route){

        // Do your work

}]);
person Afshan Shujat    schedule 14.05.2016

arrow_upward
0
arrow_downward

проблема с вашим when ('/'). Поскольку ваш URL-адрес имеет #/home, он ищет этот маршрут в .when.

изменить его на

myApp.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
    .when('/home', {          // <-
            templateUrl: 'pages/home.html',
            controller: 'MainCtrl'
        })
        .otherwise({
            redirectTo: '/'
        });
}]);
person Wild Widow    schedule 14.05.2016
comment
Я тоже это заметил и безуспешно изменил свой URL на #/. - person execv3; 14.05.2016
comment
@chrisl0lz не меняйте свой URL, ваш URL должен быть #/home, измените свой .when('/') на .when('/home') - person Wild Widow; 14.05.2016

arrow_upward
0
arrow_downward

Это было раздражающим, но я думаю, что понял это.

Я столкнулся с этой проблемой при локальном тестировании (без nodejs) в Chrome; однако, конечно же, когда я открыл его в Safari, он работал. Кажется, что ngRoute давится локальными файлами в Chrome.

Я нашел ссылку на проблему здесь, которая закрыта, поэтому я предполагаю, что если я обновлюсь до более новой версии, у меня не должно быть этой проблемы.

https://github.com/angular/angular.js/issues/4680

Настройка веб-сервера должна решить эту проблему.

Почему маршруты AngularJS не работают локально?

person execv3    schedule 14.05.2016

arrow_upward
0
arrow_downward

Я выполнил ваш код и отлично работает в Mozilla.

Однако в Chrome возникает проблема с запросом на перекрестное происхождение, если мы запускаем файл без установки server.

Но он отлично работает на хроме, даже если вы поместите его на сервер (может быть, xampp/wampp) и запустите файл. Используемая вами библиотека angular имеет http-запрос на другой сервер.

person Ankur srivastava    schedule 14.05.2016