2016-05-14 4 views
1

Я новичок в угловом и мне нелегко получить ngRoute, чтобы забрать мой файл шаблона.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, чтобы убедиться, что не было никаких несоответствий в версии, а что нет, но это, похоже, не так.

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

Есть ли что-то, что мне не хватает в приведенном выше коде, что препятствует тому, чтобы мой шаблон отображался в '/'?

Спасибо!

+0

для удаления #, вам нужно использовать html5Mode (истинный) или это может быть достигнуто с помощью .htaccess. –

+0

Вы можете заставить его работать? –

+0

Я все еще не могу получить эту работу. index.html перенаправляет на /index.html#/ и остается пустым. Тот же результат, когда я изменяю для использования html5Mode (true); – chrisl0lz

ответ

0

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

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 

}]); 
0

проблема с вашим when ('/'). Так как ваш url имеет #/home - он выглядит в .when, чтобы найти этот маршрут.

изменить его

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

Я тоже это заметил и изменил свой url на «# /», не повезло. – chrisl0lz

+0

@ chrisl0lz не изменяют ваш URL, ваш url должен быть #/home, изменить ваш .when ('/') на .when ('/ home') –

+0

@ chrisl0lz это работает? –

0

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

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

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

0

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

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

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

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

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

Why AngularJS routes are not working in local?

Смежные вопросы