angular 在 apache 中使用 ngRoute 路由深度链接

Question

我有一个 angular js 应用程序，我在常规 html 页面中使用它还包含 angular 路由

           <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> 
                <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.js"></script>

在我的模块中

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

           mainApp.config(['$routeProvider','$locationProvider',function($routeProvider, $locationProvider) {
            console.log('config ');  
            $routeProvider

              .when('boxAuth', {
                  templateUrl: 'boxReturn.html',
                  controller: 'authController'
              });

              // configure html5 to get links working on jsfiddle
              $locationProvider.html5Mode(true);
            }])

        ;

现在，如果我尝试访问 url http://localhost:8082/boxAuth，它会出现 404 错误

如何使用 angular

深层链接到此 url

Answer 1

嗨，我想你忘了将 <base href="/" /> 添加到你的 index.html

<!doctype html>
<html lang="en" ng-app="mainApp">
    <head>
        <meta charset="UTF-8">
        <title>Angular Demo</title>
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="css/style.css">
        <base href="/" />
    </head>
    <body>
        <div ng-view>
        </div>
        <!-- Scripts -->
        <script src="lib/angular/angular.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.js"></script>
        <script src="js/app.js"></script>
        <script src="js/controllersTest.js"></script>
    </body>
</html>

app.js

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

mainApp.config(['$routeProvider', '$locationProvider',
    function($routeProvider, $locationProvider) {
        $routeProvider.
            when('/boxAuth', {
                templateUrl: 'partials/boxReturn.html',
                controller: 'authController'
            })
            .otherwise({
                redirectTo: '/boxAuth'
            });
        $locationProvider.html5Mode(true);
    }
]);

最后，您需要在根文件夹中添加 .htaccess 文件并粘贴此文件

RewriteEngine On 
Options FollowSymLinks

RewriteBase /

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /#/ [L]

Answer 2

我创建了一个类似的应用程序，这段代码对我有用。希望对你有帮助！

var 模块 = angular.module('MyApp', ['ngRoute']);

            module.config(['$routeProvider', function($routeProvider){
                $routeProvider.
                when('/abc', {
                    templateUrl: 'abc.jsp',
                    controller: 'MyController'
                }).
                when('/xyz.jsp', {
                    templeateUrl: '/Test1/xyz.jsp',
                    controller: 'LoginController'
                }).
                otherwise({
                    redirectTo: ''
                });
            }]);

Answer 3

无论路由如何，您都需要将服务器配置为 return 索引页面，以便您的 angular 应用程序加载

如果您不能这样做，请考虑使用散列 (#) 路由

angular 在 apache 中使用 ngRoute 路由深度链接

angular route deep linking using ngRoute in apache

javascript

angularjs

ngroute