在 AngularJS 中找不到 404答案

【问题标题】：404 Not Found in AngularJS在 AngularJS 中找不到 404
【发布时间】：2017-07-08 06:18:45
【问题描述】：

我刚开始使用 AngularJS。当我尝试实现以下示例时，我得到了

404 未找到

这是我的 main.html

<!DOCTYPE html>
<html ng-app="demoApp">
<script src="angular.min.js"></script>
<head>
    <title>main page</title>
</head>
<body>

<div ng-view></div>

<script>
var demo = angular.module('demoApp',[]);

demo.config(function ($routeProvider){
    $routeProvider
        .when ('foo',{
            controller : 'SimpleController',
            templateUrl: 'first.html'
        })      
    });

demo.controller('SimpleController',function($scope){
    $scope.customers = [
        {name: 'sac',city:'abcd'},
        {name: 'mac',city:'efgh'},
        {name: 'nalaka',city:'ijkl'}
    ];
});
</script>

</body>
</html>

我的第一个.html

<ul>
    <li ng-repeat="cus in customers ">{{ cus.name }}</li>
</ul>

当我访问localhost/foo 时，我收到 404 异常。我刚开始使用 AngularJS。所以任何解决这个问题的帮助/指南都会对我有很大的帮助。

提前致谢

【问题讨论】：

404 用于哪个资源？服务器是在 80 端口还是其他端口运行？
在此服务器上找不到请求的 URL /foo。端口 80

标签： javascript angularjs routing http-status-code-404 angularjs-routing

【解决方案1】：

您应该在页面上引用angular-route.min.js 文件，然后在您的应用程序中包含ngRoute 模块。

var demo = angular.module('demoApp',['ngRoute']);

您应该将您的.when 条件更正为以下

.when('/foo',

由于您没有在路由中启用html5mode，您可以通过localhost/#/foo URL 访问该页面。

var demo = angular.module('demoApp', ['ngRoute']);

demo.config(function($routeProvider) {
  $routeProvider
    .when('/foo', {
      controller: 'SimpleController',
      templateUrl: 'first.html'
    })
    // By default it will open foo
    .otherwise({redirectTo: '/foo'})
});

demo.controller('SimpleController', function($scope) {
  $scope.customers = [{
      name: 'sac',
      city: 'abcd'
    },
    {
      name: 'mac',
      city: 'efgh'
    },
    {
      name: 'nalaka',
      city: 'ijkl'
    }
  ];
});

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-route.min.js"></script>
<div ng-app="demoApp">
  <div ng-view></div>
  <script type="text/ng-template" id="first.html">
    Content of the template.
  </script>

</div>

【讨论】：

我刚拿到索引页。
我使用了 https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js CDN 和 ['ngRoute'] ，但还是一样
@Sachith 确保您应该使用相同版本的 angular.js 和 angular-route.js .. 出于稳定性原因.. 否则它可能会损坏...也可以通过每次按 F12 来检查控制台检查错误..
相同版本。 1.6.1.还是想不通。感谢您的宝贵时间。
我修改了，但还是一样的 404 错误。谢谢您的帮助。我现在累了。