Question

我正在构建一个angularjs应用程序。我还是Angular的新手，并试图理解它。

我已经整理了一个基本的应用程序，但我似乎无法让它正确路由。我的控制器代码如下：

    var unarcoQS = angular.module('unarcoQS',['ngResource', 'ngCart', 'ngRoute', 'angular.filter']);

unarcoQS.factory('productService', function ($resource) {
  return $resource('http://example.com/api/service', {});
});

unarcoQS.config(['$routeProvider', '$locationProvider',
  function($routeProvider, $locationProvider){
    $routeProvider
    .when('/',{
      templateUrl:'template/home.html', 
      controller: "homeCtrl"
    })
    .when('/category',{
      // templateUrl:'template/category.html', <-- DOES NOT WORK
      template: 'Heres Johnny',                <-- WORKS
      controller: "catCtrl"
    })
    .when('/products/:PartNumber', {
      templateUrl: 'template/product.html'
    })
    .otherwise({redirectTo:'/'});

    $locationProvider.html5Mode(true);


}]);

// Controllers
unarcoQS.controller ('homeCtrl', ['$scope', 'productService', 'ngCart', '$filter', function($scope, productService, ngCart) {
  console.log('Home');
}]); //end homeCtrl

unarcoQS.controller ('catCtrl', ['$scope', 'productService', 'ngCart', '$filter', function($scope, productService, ngCart) {
  ngCart.setTaxRate(7.5);
  ngCart.setShipping(2.99);

  var queryParams = {};
  productService.query(queryParams, {}, function (response) {
    $scope.products = response;
  });

  $scope.filtering = function(filter){
    $scope.catFilter = filter;
    // console.log(filter);
  };
}]); //end catCtrl

index.html：

    <!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js"> <!--<![endif]-->
  <head>
    <meta charset="UTF-8">
    <title>Home page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <base href="/quick-ship/">

    <!-- Styles -->
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

    <!-- Scripts -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-resource/1.6.1/angular-resource.min.js"></script>
    <script src="node_modules/ngCart/dist/ngCart.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.min.js"></script>
    <!-- <script src="js/pagination.js"></script> -->
    <script src="js/controller.js"></script>

  </head>
  <body ng-app="unarcoQS">
    <div ng-include="'includes/header.html'"></div>

    <div ng-view></div>

    <footer class="fluid-container" ng-include="'includes/footer.html'"></footer>


  </body>
</html>

当我转到http://myapp.com/时，我看到了正确的模板（home.html）。当我导航到http://myapp.com/category时，如果我使用templateUrl，我最终会获得404。

如果我使用的字符串和template最终会显示出来。

我知道我错过了一些简单的东西，但我只是没有得到它。

任何和所有的帮助表示赞赏！

Answer 1

根据聊天中的讨论，我总结了下面的调查和解决方案：

第一期 - 客户端路由的HTML5模式：

服务器端：使用此模式需要在服务器端重写URL，基本上你必须重写所有你的入口点的链接应用程序（例如index.html）。需要标签也是对于这种情况很重要，因为它允许AngularJS区分在作为应用程序库的url部分和路径之间应该由应用程序处理。 - Source

接下来，在禁用html5mode之后，我们必须更改类别的锚点href值以在路由之前使用哈希值。

第二个问题 - 模板中嵌套的ng-view：

我们遇到的下一个问题是在类别模板中使用了嵌套的ng-view指令，这导致浏览器中的堆栈溢出错误，因为Angular期望整个应用程序中只有一个指令类型。删除后，我们设法运行您的应用程序。

仅为了您的信息，如果您需要多个视图，则可以使用Ui-Router。

您需要查看服务器端更改以进行URL重写以使用AngularJS html5mode。

无法让ngRoute正确路由

1 个答案: