Fatal编程技术网
  • javascript/
  • Javascript Can'；我没有正确的路线

Javascript Can'；我没有正确的路线

javascript angularjs

Javascript Can'；我没有正确的路线,javascript,angularjs,Javascript,Angularjs,我正在开发一个angularjs应用程序。我还是个新手，正在努力理解它 我已经组装了一个基本的应用程序，但我似乎无法让它正常运行。我的控制器代码如下： var unarcoQS = angular.module('unarcoQS',['ngResource', 'ngCart', 'ngRoute', 'angular.filter']); unarcoQS.factory('productService', function ($resource) { return $reso

我正在开发一个angularjs应用程序。我还是个新手，正在努力理解它

我已经组装了一个基本的应用程序，但我似乎无法让它正常运行。我的控制器代码如下：

    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

var unarcoQS=angular.module（'unarcoQS'，['ngResource'，'ngCart'，'ngRoute'，'angular.filter']）；
unarcoQS.factory（'productService'，函数（$resource）{
返回$resource（'http://example.com/api/service', {});
});
unarcoQS.config（['$routeProvider'，'$locationProvider'，
函数（$routeProvider，$locationProvider）{
$routeProvider
。当（“/”{
templateUrl:'template/home.html'，
控制器：“homeCtrl”
})
。当（“/类别”{
//templateUrl:'template/category.html'，
主页
当我转到
http://myapp.com/
我看到了正确的模板（home.html）。当我导航到
http://myapp.com/category
如果我使用
templateUrl
，我最终会得到一个404

如果我使用一个字符串和
模板
，它最终会显示出来

我知道我错过了一些简单的东西，但我就是不明白

感谢所有帮助！！

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

第一个问题-客户端路由的HTML5模式：

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

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

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

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

仅供参考，如果需要多个视图，可以使用

要使用AngularJS HTML5模式，您需要查看服务器端URL重写的更改。

您的索引或主html文件的头部分是否有
？路由器使用它来确定位置。我有。很抱歉，我忘了发布。当它说404时，请求的位置是什么？我的链接如下所示：
/#%2F类别%2
但在我的nav文件中，我有
/#/category/
另一件我应该注意的事情是
homeCtrl
中的console.log记录了两次 
    <!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>