angular js路由在localhost中不起作用

angular js routing not working in localhost

本文关键字：不起作用 localhost js 路由 angular      更新时间：2023-09-26

我试图使用angular js路由方法到我正在构建的web应用程序，但我无法通过该目录进行路由，我得到了一个404错误，下面是我的代码。

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

这是我的app.js文件

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

您的代码肯定需要'ngRoute'

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

这是一个plnkrhttp://plnkr.co/edit/X9gyEPm6v126kobj0lTa
你可能做错的另一件事是提供相对于根的模板路径

templateUrl: 'partials/store.html',

而不是

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

您应该将ngRoute与应用程序模块声明一起加载。

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

请确保将ngRoute与应用程序模块声明一起加载。

var app=angular.module（"app"，['ngRoute']）；

仅仅加载脚本文件是不够的。对你来说应该是：

var storeApp=angular.module（'AngularStore'，['ngRoute']）；

相关文章：