CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrap
Sam
Sam

Reputation: 67

angular js routing not working in localhost

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' });
}]);

Upvotes: 0

Views: 2974

Answers (3)

Upalr
Upalr

Reputation: 2148

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' });
}]);

Upvotes: 2

Nick Satija
Nick Satija

Reputation: 181

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

Upvotes: 2

John S.
John S.

Reputation: 26

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']);

Upvotes: 0

Related Questions