未找到AngularJS ngRoute 404页面

时间:2017-10-04 17:41:19

标签: javascript angularjs ngroute

我一直试图找出为什么我的观点不起作用。我不确定我是否缺少依赖关系或只是有一些简单的错误。

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

  

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

     

-lib
  -CSS
  -partials
  -scripts

     

-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>

1 个答案:

答案 0 :(得分:1)

您缺少依赖 <form> Show form? <input type="radio" id="showform" value="yes" name="showform" onchange="showhideForm(this.value)">Yes <input type="radio" id="showform" value="no" name="showform" onchange="showhideForm(this.value)">No </form> <script type="text/javascript"> function showhideForm(showform) { if (showform == "yes") { document.getElementById("div1").style.display = 'block'; document.getElementById("div2").style.display = 'none'; } if (showform == "no") { document.getElementById("div2").style.display = 'block'; document.getElementById("div1").style.display = 'none'; } } </script> <div id="div1" style="display:none"> <?php // define variables and set to empty values $nameErr = $emailErr = $genderErr = $websiteErr = ""; $name = $email = $gender = $comment = $website = ""; if ($_SERVER["REQUEST_METHOD"] == "POST") { if (empty($_POST["name"])) { $nameErr = "Name is required"; } else { $name = test_input($_POST["name"]); // check if name only contains letters and whitespace if (!preg_match("/^[a-zA-Z ]*$/",$name)) { $nameErr = "Only letters and white space allowed"; } } if (empty($_POST["email"])) { $emailErr = "Email is required"; } else { $email = test_input($_POST["email"]); // check if e-mail address is well-formed if (!filter_var($email, FILTER_VALIDATE_EMAIL)) { $emailErr = "Invalid email format"; } } if (empty($_POST["website"])) { $website = ""; } else { $website = test_input($_POST["website"]); // check if URL address syntax is valid if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]* [-a-z0-9+&@#\/%=~_|]/i",$website)) { $websiteErr = "Invalid URL"; } } if (empty($_POST["comment"])) { $comment = ""; } else { $comment = test_input($_POST["comment"]); } if (empty($_POST["gender"])) { $genderErr = "Gender is required"; } else { $gender = test_input($_POST["gender"]); } } function test_input($data) { $data = trim($data); $data = stripslashes($data); $data = htmlspecialchars($data); return $data; } ?> <p><span class="error">* required field.</span></p> <form method="post" action="<?php echo htmlspecialchars($_SERVER[" PHP_SELF "]);?>"> Name: <input type="text" name="name"> <span class="error">* <?php echo $nameErr;?></span> <br><br> E-mail: <input type="text" name="email"> <span class="error">* <?php echo $emailErr;?></span> <br><br> Website: <input type="text" name="website"> <span class="error"><?php echo $websiteErr;?></span> <br><br> Comment: <textarea name="comment" rows="5" cols="40"></textarea> <br><br> Gender: <input type="radio" name="gender" value="female">Female <input type="radio" name="gender" value="male">Male <span class="error">* <?php echo $genderErr;?></span> <br><br> <input type="submit" name="submit" value="Submit"> </form> </div> <div id="div2" style="display:none">display form 2 </div>

ngRoute

你的控制器也应该是,

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

<强> DEMO