Question

我必须为现有网站构建一个应用程序，但不幸的是，该网站（我无法控制）检测到用户设备并重定向到移动版本。

我正在尝试重用相同的js文件但不同的html文件。

所以我有：

index.html for desktop
mobile.html for mobile

两者都调用init.js我想处理我的逻辑，我的问题是由于某种原因路由不能按预期工作，我无法弄清楚原因。

桌面：

我去example.com
重定向到example.com /＃/ steps / age / 0
刷新页面并保留在example.com /＃/ steps / age / 0

这可以按预期工作

移动：

我转到example.com/mobile.html
重定向到example.com/mobile.html#/steps/age/0
刷新页面而不是保留在同一个网址中，转到example.com/steps/age/0#/steps/age/0

这不能按预期工作（预计会在步骤2中刷新后保留在同一个网址中）

以下代码：

angular
.module('profileToolApp', ["ngRoute", "ngResource", "ngSanitize"])
.config(function($routeProvider, $locationProvider){
    $routeProvider
    .when('/steps/:steps*', {
        templateUrl : 'profile-app.html',
        controller : 'example'
    })
    .otherwise({
        redirectTo: '/steps/age/0'
    });
})
.controller('example', function($scope, $routeParams, $resource, $location){
    console.log("example controller");
});

任何人都可以提出建议吗？感谢。

Answer 1

Angular正在检查整个路径，以查看它应该路由到哪里。所以当你有example.com/mobile.html#/steps/age/0时没有匹配的路线，所以它代替了mobile.html代替你的路线，所以你从/steps/age/0#/steps/age/0得到otherwise。根本问题是，角度对mobile.html的含义没有意义，并将其作为参数。

一种解决方案是使用路线分隔您的网页。

$routeProvider
    .when('/', {
        templateUrl : 'desktop.html', //was 'index.html pre edit
        controller : 'example'
    })
    .when('/mobile/', {
        templateUrl : 'mobile.html',
        controller : 'example'
    })
    .when('/steps/:steps*', {
        templateUrl : 'profile-app.html',
        controller : 'example'
    })
    .when('/mobile/steps/:steps*', {
        templateUrl : 'mobile-profile-app.html',
        controller : 'example'
    })
    .otherwise({
        redirectTo: '/'
    });
})

控制器可能会根据需要而有所不同。

替代方法是让mobile.html使用自己的角度应用程序和路由，这可能是有益的，因为您不会遇到泄漏到移动设备中的桌面指令。您可以将所有指令和控制器注入其中，但仍然可以很好地分离索引和移动。您可以更进一步，重定向到m.example.com，但这是一个不同的主题。

编辑我犯了一个错误。让templateUrl成为index.html有点不对劲。 index.html应包含您的ng-app和ng-view指令，可能包含控制器。任何常见的html都应该驻留在那里。 desktop.html和mobile.html应包含这些平台的特定HTML。

作为一个事后的想法，在那些你可以有一个名为profile的指令，它可以完成你的所有个人资料工作，如果ng-switch是steps，你可以使用$routeProvider .when('/steps?/:steps?', { templateUrl : 'desktop.html', //was 'index.html pre edit controller : 'example' }) .when('/mobile/steps?/:steps?', { templateUrl : 'mobile.html', controller : 'example' })。在范围内定义，并使用：

{{1}}

但现在我在散步，我不是百分百肯定会工作的。 结束编辑

Angular RouteProvider重定向到另一个html文件

1 个答案: