Question

在AngularJS应用程序中使用ui-router，它不能正确呈现视图。

这是 app.js 文件的实现：

'use strict';

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

angular.module('myApp').config(['$stateProvider', '$urlRouterProvider', '$locationProvider', '$httpProvider',
function($stateProvider, $urlRouterProvider, $locationProvider, $httpProvider){

    // Login Route
    $stateProvider.state('login', {
        url: '/login',
        templateUrl: '/app/views/login.html',
        controller: 'loginController'
    });

    $stateProvider.state('home', {
        url: '/home',
        templateUrl: '/app/views/home.html'
    });

    $urlRouterProvider.otherwise('/home');

    $locationProvider.html5Mode(true);
}]);

这就是index.html：

<!DOCTYPE html>
<html class="no-js" lang="en" data-ng-app="myApp">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="./vendor/bootswatch/bootstrap.css" media="screen">
    <link rel="stylesheet" href="./vendor/bootswatch/bootswatch.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="./css/style.css">

    <script src="./bower_components/angular/angular.min.js"></script>
    <script src="./bower_components/angular-route/angular-route.min.js"></script>
    <script src="./bower_components/angular-cookies/angular-cookies.min.js"></script>
    <script src="./bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
    <script src="./app/app.js"></script>
    <script src="./app/modules/login/module.js"></script>
    <script src="./app/modules/home/module.js"></script>
</head>

<body data-ng-cloak>

    <div class="container" data-ui-view></div>

    <script src="./vendor/jquery/jquery-1.10.2.min.js"></script>
    <script src="./vendor/bootstrap/js/bootstrap.min.js"></script>
    <script src="./vendor/bootswatch/bootswatch.js"></script>
</body>
</html>

问题是，当启动应用程序并将此URL（localhost：8000 / login）或（localhost：8000 / home）传递给浏览器时，它以（未找到）

此问题的原因是该URL不包含“＃”。示例：

[localhost：8000 /＃/ home] - ＆gt;运作良好

[localhost：8000 / home] - ＆gt;根本不工作，并显示“未找到”

Answer 1

问题在于您的.html5Mode(true)。您需要更新.htaccess。这一切都取决于您的应用程序，但这是您可以做的一个示例。这对许多Apache用户都有用，所以希望它也适合你。

您还需要处理找到的已知<base href>错误here

<VirtualHost *:80>
    ServerName my-app

    DocumentRoot /path/to/app

    <Directory /path/to/app>
        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]
    </Directory>
</VirtualHost>

来源：This post。

$ stateProvider返回＆＃34;未找到＆＃34;

1 个答案: