参数不起作用的角度路线

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：'/'，URL会更好，但仍然有错误：

.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，您实际上看不到该url，因此没有理由需要它。 所以我删除了它。 它有所帮助。
// 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. 从$location服务调用path方法，您将需要使用您在调用angular.bootstrap时返回的应用injector来抓取它（以及需要测试的任何其他服务，即$routeParams和$route ），如下所示：
  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");
  - 然后，要更新当前路由及其参数，请调用$route服务上的reload方法。
    $route.reload()

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

var ctrl = $controller('VoirMessageController',{'$scope':$rootScope.$new()});

就是这样，如果您添加对console.log($scope);的调用console.log($scope); 在控制器内部，您将看到$scope现在包含{ 'message' : 2 }

另外，请确保您在index.html文件内的某个位置具有<ng-view></ng-view> ，否则当应用程序启动时，角度不会加载您的路由

参数不起作用的角度路线

问题描述

1 个解决方案

解决方案1
0 2016-10-26 20:00:33

参数不起作用的角度路线

问题描述

1 个解决方案

解决方案1 0 2016-10-26 20:00:33

解决方案1
0 2016-10-26 20:00:33