Я следовал вместе с AngularJS Основы В 60-иш минут учебникAngular.JS безуспешно пытается загрузить представление с помощью метода HTTP OPTIONS
http://www.youtube.com/watch?v=i9MHigUZKEM
я делал хорошо, пока я не получил 52 минуты, когда репетитор проверяет приложение. На этом этапе приложения мы пытаемся загрузить представление. Когда я попытался загрузить свое приложение, я ничего не увидел в своем окне. Я открыл Chrome Dev Tools> Network и увидел, что статус для View1.html, который должен был быть загружен, был Load Cancelled. Я также заметил, что Angular попытался назвать это методом OPTIONS. Вот скриншот:
В моей попытке решить эту проблему, я наткнулся на этот SO вопрос
AngularJS performs an OPTIONS HTTP request for a cross-origin resource
и сходство с моей проблемой было то, что Угловая использует OPTIONS, чтобы получить данные. Разница заключалась в том, что в этом случае Angular получал ресурс кросс-происхождения. Так что это имеет смысл, но не в моем случае. Все, что я пытался сделать, это загрузить представление, которое было расположено в моей системе. Вот структура каталога моей AngularApp папок расположены на моем Ubuntu 12.10 рабочего стола:
.
├── app.html
├── Partials
│ ├── View1.html
│ └── View2.html
└── scripts
└── angular.js
URL, который я использую для просмотра моего приложения является
file:///home/max/Desktop/AngularApp/app.html
Что я делаю не так?
Вот app.html код:
<!DOCTYPE HTML>
<html data-ng-app="demoApp">
<head>
<title>App</title>
</head>
<body>
<div>
<!-- Placeholder for views -->
<div data-ng-view=""></div>
</div>
<script src="scripts/angular.js"></script>
<script>
var demoApp = angular.module('demoApp', []);
demoApp.config(function ($routeProvider) {
$routeProvider
.when('/view1',
{
controller: 'SimpleController',
templateUrl: 'Partials/View1.html'
})
.when('/view2',
{
controller: 'SimpleController',
templateUrl: 'Partials/View2.html'
})
.otherwise({ redirectTo: '/view1' });
});
demoApp.controller('SimpleController', function ($scope) {
$scope.customers = [
{ name: 'Hasbro Meclan', city: 'New South Rolly' },
{ name: 'Haley Meclan', city: 'New South Rolly' },
{ name: 'Sammy Watson', city: 'New South Rolly' },
{ name: 'Sammy Warboy', city: 'Onice City' }
];
$scope.addCustomer = function() {
$scope.customers.push(
{
name: $scope.newCustomer.name,
city: $scope.newCustomer.city
});
};
});
</script>
</body>
</html>
А вот View1.html
<div class="container">
<h2>View 1</h2>
Name:
<br/>
<input type="text" data-ng-model="filter.name" />
<br/>
<ul>
<li data-ng-repeat="cust in customers | filter:filter.name | orderBy:city">
</ul>
<br/>
Customer Name:<br/>
<input type="text" data-ng-model="newCustomer.name" />
<br/>
Customer City:<br/>
<input type="text" data-ng-model="newCustomer.city" />
<br/>
<button data-ng-click="addCustomer()">Add Customer</button>
<br/>
<a href="#/view2">View 2</a>
</div>
Как вы это делаете? Вы используете Йомен? – 2013-05-09 18:03:14
Да - Yeoman подделывает проекты (используя структуру в угловом семени, которая является «стандартом»), упрощает зависимости от других js-приложений/плагинов/фреймворков и ужасно упрощает тестирование (что означает просмотр предварительных результатов через js-сервер) , Кроме того, он отлично подходит для работы с sass-lang, который я использую. –
приятно, да я тоже использую Sass. Я установил его и начну его проверять. Благодаря! – 2013-05-09 20:38:08