Question

我有3个页面：索引（父页面），主页和注册。我做了一个控制器注册控制器有一个功能注册在控制台中打印用户来自表单输入。当我从URL删除路由时，这样＆＃34; localhost / angular-project /＆＃34;链接工作，直到我刷新它给我状态代码404找不到。我不知道为什么？这是我的代码

的index.html

    <!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <base href="/angular-project/">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Project</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Vogator</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a ui-sref="home">Home <span class="sr-only">(current)</span></a></li>
                    <li><a ui-sref="signup">Signup</a></li>
                </ul>
            </div>
        </div>  
    </nav>

    <div ui-view></div>

    <script src="lib/jquery.js"></script>
    <script src="lib/bootstrap.js"></script>
    <script src="lib/angular.js"></script>
    <script src="lib/angular-ui-router.js"></script>
    <script src="js/app.js"></script>
    <script src="js/routes.js"></script>
    <script src="js/controllers.js"></script>
</body>
</html>

home.html的

<h1>Welcome</h1>

signup.html

    <h1>Signup</h1>

<form class="form-horizontal" novalidate name="signupForm" ng-submit="submitted=true;signup()">

    <input type="text" name="name" ng-model="user.name" required class="form-control" placeholder="Enter your name">
    <p ng-if="signupForm.name.$error.required && submitted">Please enter your name</p>

    <input type="text" name="email" ng-model="user.email" required class="form-control" placeholder=" Enter your email">
    <p ng-if="signupForm.email.$error.required && submitted">Please enter your email</p>
    <p ng-if="signupForm.email.$error.email && submitted">Please enter valid email</p>

    <input type="text" name="mobile" ng-model="user.mobile" required class="form-control" placeholder="Enter your mobile">
    <p ng-if="signupForm.mobile.$error.required && submitted">Please enter your mobile</p>

    <input type="password" name="password" ng-model="user.password" required class="form-control" placeholder="Enter your password">
    <p ng-if="signupForm.password.$error.required && submitted">Please enter your password</p>

    <button name="button">Signup</button>
</form>

app.js

'use strict';
angular.module('myApp', ['ui.router'])

controller.js

    angular.module("myApp").controller("signupController", function($scope){
    $scope.signup = function(){
        console.log($scope.user);
    }
})

routes.js

    angular.module("myApp")
.config(function($stateProvider, $urlRouterProvider, $locationProvider){
    $urlRouterProvider.otherwise('/home');
    $stateProvider
    .state('home',{
        url: '/home',
        templateUrl: 'templates/home.html'
    })
    .state('signup',{
        url:'/signup',
        templateUrl: 'templates/signup.html',
        controller: 'signupController'
    });

    $locationProvider.html5Mode(true);
})

Answer 1

我得到了我在这里缺少的东西，我在位于“wamp / bin / apache / apache2.4.23 / conf”的httpd.conf文件中将AllowOverride从none更改为all，我在项目根目录中创建了.htaccess文件夹，我把这个代码放在里面，瞧

    <IfModule mod_rewrite.c>
    Options +FollowSymlinks
    RewriteEngine On
    # Don't rewrite files or directories
    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^ - [L]

    # Rewrite everything else to index.html to allow html5 state links
    RewriteRule ^ index.html [L]
</IfModule>

代码引用：.htaccess, #AngularJS, UI-Router: Configure Apache server to work with html5Mode

在刷新页面上找不到Angularjs ui-router-404

1 个答案: