CODEWITHSUNDEEP
javascriptangularjs
user2729272
user2729272

Reputation: 359

Why AngularJS routes are not working in local?

I have html file which implements AngularJS routes as follows,

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>

You can find the working version here

But why is it not working when I run the same in my local browser :(

Here is the chrome console error:

enter image description here

Any help appreciated! :)

Upvotes: 2

Views: 2439

Answers (4)

nima ansari
nima ansari

Reputation: 582

There is a Chrome Extension called Web Server for Chrome. you can add it and then lunch it, in browse dialog choose your working folder, then it gives you a Local URL, you can test your app there.

Upvotes: 0

rohit garg
rohit garg

Reputation: 133

the work around to make ng-view work in local is to put the content of other htmls in the script tag as 

<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>

in the same HTML from where the call is being made.

ngview makes an AJAX call to load the content of external HTMLs or seperate HTMLs , chrome does not allow AJAX call for local resources , IE 11 also shows 'Access is denied' error message.

when including in script tags , this AJAX call is not made.

Upvotes: 0

gustavodidomenico
gustavodidomenico

Reputation: 4681

It is important to make it clear. For security reasons, Chrome (for example) won't allow you to load local files (ie: the templates for your views). My suggestion is to set up a web server to test your applications:

  1. Use the free edition of the Visual Studio Express for web development.
  2. Use gruntjs to quickly set up your project.

Alternatively you can use inline templates in place of loading it externally, but it does not seems to be a good practice.

Edit:

Using the console error print that you posted, Chrome is blocking your ajax request. You can bypass this restriction using a command line argument:

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

However I would encourage you to set up a simple local web server, It will prevent you for some headaches while your are learning...

Upvotes: 4

Vlada
Vlada

Reputation: 1659

You can use Firefox for test. Route and ajax will work. But it is better to set up a web server like @gustavodidomenico said

Upvotes: 0

Related Questions