angular js routing not working in localhost

Question

i trying to use angular js routing method to the web app i am building, bt i was not able to route through the directory, i am getting a 404 error, below is my codes.

<!doctype html>
<html ng-app="AngularStore">
  <head>
<link rel="stylesheet" type="text/css" href="src/bootstrap/cerulean.css">
<script type="text/javascript" src="src/jquery/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="src/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="src/angular/angular.min.js"></script>
<script type="text/javascript" src="src/angular/angular-route.js"></script>
<script src="product.js" type="text/javascript"></script>
<script src="store.js" type="text/javascript"></script>
<script src="shoppingCart.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script src="controller.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css"/>
  </head>
  <body>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span10 offset1">
                <h1 class="well" >
                    <a href="default.html">
                        <img src="img/logo.png" height="60" width="60" alt="logo"/>
                    </a>
                    Angular Store
                </h1>
                <div ng-view></div>
            </div>
        </div>
     </div>
  </body>
</html>

here is my app.js file

var storeApp = angular.module('AngularStore', []).
  config(['$routeProvider', function($routeProvider) {
  $routeProvider.
    when('/store', { 
      templateUrl: '/partials/store.html',
      controller: 'storeController' }).
    when('/products/:productSku', {
      templateUrl: '/partials/product.html',
      controller: 'storeController' }).
    when('/cart', { 
      templateUrl: '/partials/shoppingCart.html',
      controller: 'storeController' }).
    otherwise({
      redirectTo: '/store' });
}]);

This seems to be a web-app issue and not an Angular one since you are getting a 404 page. — kensplanet
– kensplanet, Commented Nov 16, 2015 at 5:03

Nick Satija · Accepted Answer · 2015-11-16 05:28:22Z

2

Your code is definitely needs 'ngRoute'

 var storeApp = angular.module('AngularStore', ['ngRoute']).

here is a plnkr http://plnkr.co/edit/X9gyEPm6v126kobj0lTa
Other thing you could be doing wrong is providing template paths relative to root

templateUrl: 'partials/store.html',

instead of

templateUrl: '/' + 'partials/store.html',

answered Nov 16, 2015 at 5:28

Nick Satija

1817 bronze badges

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

1 Comment

Nick Satija Over a year ago

happy to help, can you please tell us what was different in your code and can you please mark this as an accepted answer?

Upalr · Accepted Answer · 2015-11-16 06:06:15Z

2

You should load ngRoute along with your app module declaration.

  var storeApp = angular.module('AngularStore', ['ngRoute']).
  config(['$routeProvider', function($routeProvider) {
  $routeProvider.
    when('/store', { 
      templateUrl: 'partials/store.html',
      controller: 'storeController' }).
    when('/products/:productSku', {
      templateUrl: 'partials/product.html',
      controller: 'storeController' }).
    when('/cart', { 
      templateUrl: 'partials/shoppingCart.html',
      controller: 'storeController' }).
    otherwise({
      redirectTo: '/store' });
}]);

edited Nov 16, 2015 at 6:06

answered Nov 16, 2015 at 5:08

Upalr

2,1462 gold badges25 silver badges33 bronze badges

2 Comments

Sam Over a year ago

in a seperate js file ?

Upalr Over a year ago

provide your plunker link

John S. · Accepted Answer · 2015-11-16 05:10:02Z

0

Make sure that you load ngRoute along with your app module declaration.

var app = angular.module("app", ['ngRoute']);

It's not enough that you load the script file. For you it should be:

var storeApp = angular.module('AngularStore', ['ngRoute']);

answered Nov 16, 2015 at 5:10

John S.

264 bronze badges

Collectives™ on Stack Overflow

angular js routing not working in localhost

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related