javascript - 在 AngularJS 中找不到 404

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

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

404 Not Found

这是我的 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。所以解决这个问题的任何帮助/指南对我来说都是一个很大的帮助。

提前致谢

最佳答案

您应该在页面上引用 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>

关于javascript - 在 AngularJS 中找不到 404,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42319670/

相关文章:

javascript - 如何在express中实现DRY路由器

javascript - 动态元素上的 jQuery find() 和 each()

javascript - 如何绕过框架或任何嵌入式框架上的 "Blocked call to navigator.vibrate because user hasn' t”?

javascript - CSS 过渡仅在第一次应用时有效

linux - 如何将 IP 地址添加到 NAT 表 (Linux Debian) - POSTROUTING 链

php - 根据数据库结果设置 Yii2 catchAll 路由

javascript - Kendo网格和Jquery复选框值

javascript - 单击时动态更改列大小

javascript - 最小值 18 和最大值 99 带前导零的正则表达式

javascript - 获取我的页面开始运行 angularjs 的时间