Question

当我尝试使用angular运行本地项目时，我从Chrome获得404状态。我不确定问题出在哪里，我已经尝试过类似问题的建议答案。

这是我的指令文件：

'use strict';

/**
 * @ngdoc directive
 * @name stockDogApp.directive:stkWatchlistPanel
 * @description
 * # stkWatchlistPanel
 */
angular.module('stockDogApp')
  .directive('stkWatchlistPanel', function ($location, $modal, WatchlistService) {
    return {
      templateUrl: 'views/templates/watchlist-panel.html',
      restrict: 'E',
      scope : {},
      link: function($scope){
        $scope.watchlist = {};
        var addListModal = $modal({
          scope : $scope,
          template: 'views/templates/addlist-modal.html',
          show : false

        });

        $scope.watchlists = WatchlistService.query();

        $scope.showModal = function(){
          addListModal.$promise.then(addListModal.show);
        };
        $scope.createList = function(){
          WatchlistService.save($scope.watchlist);
          addListModal.hide();
          $scope.watchlist = {};
        };
        $scope.deleteList = function(list){
          WatchlistService.remove(list);
          $location.path('/');
        };
      }
    };
  });

这是我的'app'文件夹的树视图

|-- 404.html
|-- favicon.ico
|-- images
|   `-- yeoman.png
|-- index.html
|-- robots.txt
|-- scripts
|   |-- app.js
|   |-- controllers
|   |-- directives
|   |   `-- stk-watchlist-panel.js
|   `-- services
|       `-- watchlist-service.js
|-- styles
|   `-- main.css
`-- views
    `-- templates
        |-- addlist-modal.html
        `-- watchlist‐panel.html

当我在控制台中加载index.html时，我收到了一个找不到页面的错误。

Error: [$compile:tpload] Failed to load template: views/templates/watchlist-panel.html (HTTP status: 404 Not Found)
http://errors.angularjs.org/1.4.4/$compile/tpload?p0=views%2Ftemplates%2Fwatchlist-panel.html&p1=404&p2=Not%20Found

我也尝试从根文件夹输入完整路径，但它仍然没有检测到页面。

我不确定这是否是原因，但看看chrome开发人员工具显示源标签中没有app文件夹（它只显示'bower_components'，'scripts'，'styles'和index html的

**更新**

看来，角度无法看到的唯一文件夹是app中的views文件夹。我不确定问题出在哪里。 grunt可能有问题吗？

ngtemplates: {
  dist: {
    options: {
      module: 'stockDogApp',
      htmlmin: '<%= htmlmin.dist.options %>',
      usemin: 'scripts/scripts.js'
    },
    cwd: '<%= yeoman.app %>',
    src: 'views/{,*/}*.html',
    dest: '.tmp/templateCache.js'
  }
},

Answer 1

我想这是因为你写了template: 'views/templates/addlist-modal.html'而不是templateUrl: 'views/templates/addlist-modal.html'

Answer 2

Error: [$compile:tpload] Failed to load template: xyz.html (HTTP status: 404 Not Found)

可能是由web.config

中的以下设置引起的

 <system.webServer>
    <handlers>
      <remove name="BlockViewHandler"/>
      <add name="BlockViewHandler" path="*" verb="*" preCondition="integratedMode" type="System.Web.HttpNotFoundHandler" />

这会阻止对Views目录中的文件的任何直接请求。此文件阻止了对此文件的Angular xhr请求。

评论并查看是否有效。请谨慎使用，因为它允许访问您的文件。

Answer 3

我只是将你的指令粘贴到我的工作应用程序中，它运行正常。你停下来开始咕噜咕噜吗？第16页的注释可能解释了为什么没有动态拾取目录。

Answer 4

晚了聚会，但对某些人可能有用。
在我的情况下，这是因为指令的网址和$ templateCache中的字母大小写不同：
指令中的路径：

templateUrl: 'somedirectory/somefile.html'

$ templateCache中的路径：

$templateCache.put('someDirectory/somefile.html', 'html template here...');

有人。

错误：$ compile：tpload无法加载模板Http状态：404

4 个答案: