Angular.JS unsuccessfully tries to load a view with the OPTIONS HTTP method -
i have been following along angularjs fundamentals in 60-ish minutes tutorial
http://www.youtube.com/watch?v=i9mhiguzkem
i doing fine until got 52 minutes in when tutor tests out app. @ point in app trying load view. when tried load app saw nothing in window. opened chrome dev tools > network , saw status view1.html, view supposed loaded in, load cancelled. noticed angular tried call via options method. here screenshot:
in attempt solve issue came across question
angularjs performs options http request cross-origin resource
and similarity problem angular using options retrieve data. difference in case, angular retrieving cross-origin resource. makes sense not in case. trying load view located on system. here directory structure of angularapp folder located on ubuntu 12.10 desktop:
. ├── app.html ├── partials │ ├── view1.html │ └── view2.html └── scripts └── angular.js the url use view app
file:///home/max/desktop/angularapp/app.html
what doing wrong?
here app.html code:
<!doctype html> <html data-ng-app="demoapp"> <head> <title>app</title> </head> <body> <div> <!-- placeholder 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> and here 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>
it isn't angularjs problem, cors problem - loading resources computer considered "cross-origin-like", there no server (namely, browser's origin "null"). marcoseu said, using server way go - python , node.js have simple implementations, recommend try yeoman (http://www.yeoman.io). integrated workflow solution building js webapps, , plays specially angularjs. (i think main page in yeoman's site has angularjs example)
edit after comment
i vouch yeoman use projects - of developers in angularjs team actively working on yeoman generators, has lot of acceptance, , follows of angular's standard practices. should noted yeoman more serve local http server. controls scaffolding, testing (as in test-driven development, not viewing files in local server), , building app (minifying , concatenating, handle dependencies, , on...)
it complete and, such, can rather complicated (specially when have specific requirements build tasks). if intend deploy 1 or several angularjs apps, can tremendous help!
Comments
Post a Comment