Question

我希望有一个对象作为我的路线的参数，但我从一个数字开始测试路线并且它不起作用。

以下是我的路线：

// configure our routes
    app.config(function($routeProvider, $locationProvider) {
        $routeProvider

            // route for the home page
            .when('/', {
                controller  : 'ApplicationController',
                templateUrl : './includes/home/home.html',
            })

            .when('/voir_message/:message', {
                templateUrl : './includes/messages/voir_message.html',
                controller : 'VoirMessagesController',
                controllerAs : 'controller'
            })

            .otherwise({redirectTo : '/'});

        // use the HTML5 History API
        $locationProvider.html5Mode(true);

    });

我的控制器：

app.controller('VoirMessagesController', function($scope, $rootScope, $location, userService, dataRefreshServices){
    $scope.message = $routeParams.message;
});

当我需要改变路线时，我使用：

$location.path('voir_message/1');

哪个不起作用，当我点击我的链接（调用javascript函数并调用此行）时，我的页面被重定向到file：///

1 - 为什么？如果我删除路由中的“/ 1”和“：message”（所以没有传递任何参数），它可以正常工作。

2 - 如果我需要放置我的对象，我可以只放“JSON.stringify（myObject）”而不是“1”吗？

3 - 关于我的路线的最后一个问题，为什么地址以“file：///”开头？例如，索引页面是“file：///”（我正在使用nodewebkit），所以当我加载应用程序时，我有以下错误：

Failed to load resource: net::ERR_FILE_NOT_FOUND file:///

我发现问题出在我的主要路线上，如果我更改“redirectTo：'/'网址更好但仍有错误：

.when('/home', {
                controller  : 'ApplicationController',
                templateUrl : './includes/home/home.html',
            })

            .otherwise({redirectTo : '/home'});

编辑我的申请：

var app = angular.module('client', ['ngRoute', 'pascalprecht.translate']);

在我的index.html中使用，如下所示：

<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="client">

Answer 1

好的，所以我让它工作，但需要做一些事情才能使它正常工作以及更多来正确测试它。

你设置html5历史api我不是100％肯定，但这似乎是问题的一部分，因为使用node-webkit你真的没有看到网址，没有理由需要这个。所以我删除了它。它有所帮助。

// use the HTML5 History API
$locationProvider.html5Mode(true);
您使用以下内容在html中引导您的应用：
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="client"> 使用node-webkit我无法在没有手动引导角度应用程序的情况下测试$location服务，因此请删除data-ng-app="client"部分。
因为我们删除了ng-app指令，我们现在需要在代码中手动引导应用程序，这是完美的，因为引导应用程序会返回应用程序dependencyInjector，我们需要测试$location服务。
当你输入时，你要求angular从文件系统加载文件：
templateUrl : './includes/home/home.html', 在你的路由定义对象里面，还有从哪里加载那个文件？因此，不要让它从您的文件系统加载文件，只需使用angulars html模板语法将html直接提供给您的应用程序：
<script type="text/ng-template" id="home.html">

</script>

然后更改路径定义对象templateUrl属性以匹配脚本标记的id，即： templateUrl : "home.html",
一旦完成所有这些更改，在更改函数内部的角度视图时，只需要记住一件事：要以角度改变函数内部的视图，你必须做两件事：
1. 从path服务调用$location方法，您需要获取该方法（以及您需要测试的任何其他服务，即：$routeParams和{{1使用您拨打$route时返回的应用injector：
  
  angular.bootstrap
  var $injector = angular.bootstrap(document.body,['client']);
  var $location = $injector.get("$location");
  // these arent from your example, but needed for testing
  var $route = $injector.get("$route");
  var $rootScope = $injector.get("$rootScope");
  var $routeParams = $injector.get("$routeParams");
  - 现在在你的控制器或任何改变网址的地方 var $controller = $injector.get("$controller");
  - 然后更新当前路由及其参数调用$location.path("/voir_message/2");服务上的reload方法。
    $route

现在实际测试它是否有效我们需要使用我们在一秒钟之前加载的额外服务来加载控制器，如下所示：

$route.reload()

就是这样，如果您在控制器内添加了对var ctrl = $controller('VoirMessageController',{'$scope':$rootScope.$new()});的调用，您会看到console.log($scope);现在包含$scope

另外，请确保您的index.html文件中有{ 'message' : 2 }某个位置，或者当您的应用启动时，角度不会加载您的路线

参数不起作用的角度路线

1 个答案: