1

I'm trying to route something using angular-route.js library, but I don't know how to do properly.

I would like to change a message when the browsers route change, but I get a lot of errors to do that.

index.html

<!doctype html>
<html ng-app="my-app">
  <head>
    <title>Angular controllers</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- AngularJS and JQuery include.  -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular-route.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></link>
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"></link>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </head>

  <body>

    <div class="container">
      <p> <a href="#ShowOrder/1556">Order 1556</a> </p>
      <p> <a href="#ShowOrder/1667">Order 1667</a> </p>
    </div>

    <div ng-view></div>

    <script src="app.js"></script>
  </body>
</html>

app.js

(function (){
  var app = angular.module('my-app', ['ngRoute']);

  app.config (['$routeProvider', function ($routeProvider){
    $routeProvider.when ('/ShowOrder/:orderId', {
      templateUrl           : 'show-order.html',
      controller            : 'ShowOrderCtrl'
    });
  }]);

  app.controller ('ShowOrderCtrl', ['$routeParams', '$scope', function ($routeParams, $scope){
    $scope.order = $routeParams.orderId;
  }]);
})();

show-order.html

<h2>Order #{{order}}</h2>

Here are the details for order <b>#{{order}}</b>.

Error code

XMLHttpRequest cannot load file:///Users/ismaelmoral/GitHub/angularjs-controllers/show-order.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.(anonymous function) @ angular.js:10506sendReq @ angular.js:10325$get.serverRequest @ angular.js:10037processQueue @ angular.js:14551(anonymous function) @ angular.js:14567$get.Scope.$eval @ angular.js:15830$get.Scope.$digest @ angular.js:15641$get.Scope.$apply @ angular.js:15935bootstrapApply @ angular.js:1624invoke @ angular.js:4443doBootstrap @ angular.js:1622bootstrap @ angular.js:1642angularInit @ angular.js:1536(anonymous function) @ angular.js:28289x.Callbacks.l @ jquery.min.js:4x.Callbacks.c.fireWith @ jquery.min.js:4x.extend.ready @ jquery.min.js:4S @ jquery.min.js:4
angular.js:12314 Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///Users/ismaelmoral/GitHub/angularjs-controllers/show-order.html'.
    at Error (native)
    at
Improve this question
5
  • Are you running this from localhost? I see that you are trying to load a view that triggers a cross origin error. Try setting up a server for your localhost to get rid of the error, or, simply move the view's (html) location to the same location as your script. Commented Jun 24, 2015 at 21:02
  • @RaphaelRafatpanah All the files are in the same directory. Commented Jun 24, 2015 at 21:02
  • Can you serve this from a web server? It looks like you are just loading the index as a file in your browser, and your browser isn't allowing a XMLHttpRequest on a 'file://' protocol. It wants an http request. Commented Jun 24, 2015 at 21:04
  • I've tested your code locally and it works as expected. As mentioned use a web server so you can access it at localhost. A simple server is for example serve. Once installed just run serve in your project folder. Commented Jun 24, 2015 at 21:07
  • Its same as like this answer stackoverflow.com/a/31035013/2435473 Commented Jun 24, 2015 at 21:09

2 Answers 2

Reset to default
2

The error is due to the fact you are running your app off the file system. Most browsers restrict XMLHttpRequest calls when using the file:// protocol.

angular-route.js templates are accessed via XMLHttpRequest, this is why you are seeing that error.

The solution is to run the angular app off a web server, e.g. Plnkr

You can turn off this restriction in Chrome (by launching it with --disable-web-security) but this is not recommended.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

I uploaded into a web server, but the server doesn't show me anything. There's no error messages so I don't know if I did a mistake or something.
@JasterTDCClan can you browse to the index.html page on the web server?
Yes, but when I click on the links, the page doesn't show anything new.
@JasterTDCClan It is working here: plnkr.co/edit/gdRCTYeSEwM1EVt576OS?p=preview
@JasterTDCClan are you sure you uploaded show-order.html? Are the files all in the same folder? Is the folder configured as a web site or virtual directory? It works fine in the Plnkr here: plnkr.co/edit/gdRCTYeSEwM1EVt576OS?p=preview
|
1

The error you're getting:

Failed to load 'file:///Users/ismaelmoral/GitHub/angularjs-controllers/show-order.html'.

Means you're trying to AJAX request a local file, you should probably try running your code inside a web server like Apache or Nginx to get it to work. Otherwise the code looks good.

Improve this answer

1 Comment

All files are in the same directory, but I will try to put my project in a web server.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.