【问题标题】:AngularJS ngRoute 404 page not found找不到AngularJS ngRoute 404页面
【发布时间】:2017-10-04 17:41:19
【问题描述】:

我一直在试图弄清楚为什么我的观点不起作用。我不确定我是否缺少依赖项或只是有一些简单的错误。

当我通过 pycharm 运行程序时会显示 index.html 页面,当我单击指向不同视图的链接之一时,它会显示未找到的 404 页面。

我的项目文件夹下有这些目录:

-lib
-css
-部分
-脚本

-index.html

谁能看到我做错了什么?谢谢。


AngularJS js 文件:

  var mainApp = angular.module('mainApp', []);
    mainApp.config(['$routeProvider',
      function ($routeProvider) {
        $routeProvider
            .when('/home', {
                templateUrl: '/partials/home.html',
                controller: 'controller_home'
            })
            .when('/about', {
                templateUrl: '/partials/about.html',
                controller: 'controller_about'
            })
            .when('/cart', {
                templateUrl: 'partials/cart.html',
                controller: 'controller_cart'
            })
            .when('/contact', {
                templateUrl: 'partials/contact.html',
                controller: 'controller_contact'
            })
            .when('/myAccount', {
                templateUrl: 'partials/myAccount.html',
                controller: 'controller_myAccount'
            })
            .otherwise({
                redirectTo: '/partials/home'
            });
    }]);

mainApp.controller('controller_home', ['$scope', function controller_home($scope) {
    $scope.message = "$scope.message : from controller_home";
}])
    .controller('controller_about', ['$scope', function controller_about($scope) {
    $scope.message = "$scope.message : from controller_about";
}])
    .controller('controller_cart', ['$scope', function controller_cart($scope) {
    $scope.message = 'this is the cart';
}]);

HTML 文件:

<!DOCTYPE html>
<html lang="en" ng-app="mainApp">
<head>
    <meta charset="UTF-8">
    <title>My Webpage Title</title>

    <!--Stylesheet index.css-->
    <link rel="stylesheet" href="CSS/index.css" type="text/css">
    <link rel="stylesheet" href="CSS/animations.css" type="text/css">

    <script src="lib/angular.min.js"></script>
    <script src="lib/angular-route.min.js"></script>
    <script src="scripts/mainApp.js"></script>
</head>

<body>
    <!--Site Header-->
    <div class="header">
        <h1>Header to Page</h1>
    </div>

    <br>

    <!--Site Navigation Bar-->
    <div>
        <a href="/home">Product</a> |
        <a href="/cart">Cart</a> |
        <a href="/about">About</a> |
        <a href="/contact">Contact</a> |
        <a href="/myAccount">My Account</a><br/>
        <div ng-view></div>
    </div>

    <br>

    <!--Site Footer-->
    <footer class="footer">
        <br>
        <br>
        <br>
    </footer>

    <footer class="footer-disclaimer">
        <ul class="navbar">
            <li><a href="policy.html">Policy and Agreement</a></li>
            <li><a href="privacy.html">Privacy Policy</a> </li>
        </ul>
    </footer>
</body>

【问题讨论】:

  • about.html、cart.html、contact.html、home.html 和 myAccount.html 具有显示一些文本的简单 div
  • 请放一个Plunker的链接...

标签: javascript angularjs ngroute


【解决方案1】:

你缺少依赖ngRoute

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

你的控制器也应该是,

mainApp.controller('controller_home', ['$scope', function($scope) {
    $scope.message = "$scope.message : from controller_home";
}])
mainApp.controller('controller_about', ['$scope', function($scope) {
    $scope.message = "$scope.message : from controller_about";
}])
mainApp.controller('controller_cart', ['$scope', function($scope) {
    $scope.message = 'this is the cart';
}]);

DEMO

【讨论】:

  • 添加 ngRoute 依赖项后,我仍然收到相同的错误。不过感谢您的回复。
  • 非常感谢,我删除了我的代码并使用了您的代码来解决问题。
  • 如果有帮助则标记为答案
猜你喜欢
  • 2017-08-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-06-28
  • 2016-08-01
  • 2016-08-01
  • 2015-10-22
  • 2014-03-20
相关资源
最近更新 更多