2014-09-16 3 views
1

У меня есть HTML-файл, который реализует AngularJS маршруты следующим образом,Почему маршруты AngularJS не работают на местном уровне?

index.html:

<!DOCTYPE html> 
<html ng-app="demo"> 
<head> 
    <link rel="stylesheet" href="style.css"> 
</head> 
<body> 
    <div ng-view> 
    </div> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script> 
    <script src="http://code.angularjs.org/1.2.1/angular-route.min.js"></script> 
    <script> 
    // Code goes here 
var demo = angular.module('demo', ['ngRoute']); 
demo.config(function($routeProvider){ 
    $routeProvider.when('/', { 
    controller: 'testController', 
    templateUrl: 'test.html' 
    }) 
})  
var controllers = {}; 
controllers.testController = function($scope){ 
    $scope.first = "Info"; 
    $scope.customers=[ 
     {name:'jerry',city:'chicago'}, 
     {name:'tom',city:'houston'}, 
     {name:'enslo',city:'taipei'} 
    ]; 
} 
demo.controller(controllers) 
    </script> 
</body> 
</html> 

test.html:

<div> 
    <input type="text" ng-model="name"/> 
    </br> 
    {{first}} 
    </br> 
    <ul> 
     <li ng-repeat="cust in customers | filter:name">{{cust.name | uppercase}} - {{cust.city}}</li> 
    </ul> 
</div> 

Вы можете найти рабочую версию here

Но почему это не работает, когда я запускаю то же самое в своем местном owser :(

Здесь ошибка консоли хром:

enter image description here

Любая помощь оценили! :)

+2

Проверьте ошибки на экране. Чтобы быть конкретным, 'Не удалось загрузить ресурс: Origin null не разрешен Access-Control-Allow-Origin'. Вероятно, это блокировка и не загрузка вида. – gustavodidomenico

ответ

4

Важно прояснить ситуацию. Из соображений безопасности Chrome (например) не позволит загружать локальные файлы (то есть: шаблоны для ваших просмотров). Мое предложение - настроить веб-сервер для тестирования ваших приложений:

  1. Используйте бесплатную редакцию Visual Studio Express для веб-разработки.
  2. Используйте gruntjs, чтобы быстро настроить свой проект.

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

Edit:

Использование печати консоли ошибок, которые Вы отправляли сообщение, Chrome блокирует ваш запрос Ajax. Вы можете обойти это ограничение, используя аргумент командной строки:

chrome.exe --allow-file-access-from-files 

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

0

Вы можете использовать Firefox для тестирования. Маршрут и ajax будут работать. Но лучше настроить веб-сервер, как @gustavodidomenico сказал

0

работа вокруг, чтобы сделать нг-вид работы в местных, чтобы поставить содержание других HTMLs в тэгом, как

<script type="text/ng-template" id="index22.html"> 
This is index 2 template. 
</script> 

<script type="text/ng-template" id="index33.html"> 
    This is index 3 template. 
</script> 

в том же HTML, из которого производится вызов.

ngview вызывает вызов AJAX для загрузки содержимого внешних HTML или отдельных HTML-файлов, хром не позволяет вызов AJAX для локальных ресурсов, в IE 11 также отображается сообщение об ошибке «Отказано в доступе».

при включении в теги сценария, этот вызов AJAX не производится.

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