0

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

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

所以我有：

  1. 用于桌面的 index.html
  2. mobile.html 移动端

两者都在我想处理我的逻辑的地方调用 init.js，我的问题是由于某种原因路由没有按我预期的那样工作，我不知道为什么。

桌面：

  1. 我去example.com
  2. 重定向到 example.com/#/steps/age/0
  3. 刷新页面，它停留在 example.com/#/steps/age/0

这按预期工作

移动的：

  1. 我去 example.com/mobile.html
  2. 重定向到 example.com/mobile.html#/steps/age/0
  3. 刷新页面，而不是停留在相同的 url，而是转到 example.com/steps/age/0#/steps/age/0

这不能按预期工作（预计在第 2 步中刷新后会保持在相同的 url 中）

下面的代码：

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");
});

有人可以请教吗？谢谢。

4

1 回答 1

1

Angular 正在检查整个路径以查看它应该路由到的位置。所以当你example.com/mobile.html#/steps/age/0有没有匹配的路线时，它会代替你的路线，而不是mobile.html你/steps/age/0#/steps/age/0从你的otherwise. 根本问题是 angular 不知道是什么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使用其自己的 Angular 应用程序和路由，这可能是有益的，因为您不会遇到桌面指令泄漏到移动设备中。您可以将所有指令和控制器注入其中，但仍然可以很好地分离索引和移动。您可以更进一步并重定向到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'
})

但现在我在漫无边际，我不能 100% 确定这会奏效。结束编辑

于 2014-07-30T15:00:03.493 回答