带参数的角度路线不起作用

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

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

1. 您设置 html5 历史 api 我不是 100% 确定，但这似乎是问题的一部分，并且由于使用 node-webkit，您并没有真正看到 url，没有理由需要这个。所以我删除了它。它有帮助。

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

2. 您正在使用 html 引导您的应用程序：
   <html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="client"> 使用 node-webkit 我无法在不手动引导 Angular 应用程序的情况下测试 $location 服务，因此请删除 data-ng-app="client" 部分。

3. 因为我们删除了ng-app 指令，我们现在需要在代码中手动引导应用程序，这非常完美，因为引导应用程序返回应用程序dependencyInjector，我们需要测试$location服务。

4. 当您输入时，您要求 Angular 从您的文件系统加载文件：
   templateUrl : './includes/home/home.html', 在您的路由定义对象内部，它还会从哪里加载该文件？因此，与其要求它从您的文件系统加载文件，只需使用 angulars html 模板语法将 html 直接提供给您的应用程序：
   <script type="text/ng-template" id="home.html">
<!-- your html for the template goes here -->
</script>

   然后更改您的路由定义对象 templateUrl 属性以匹配脚本标签的 id，即： templateUrl : "home.html",

5. 完成所有这些更改后，在更改函数内部的角度视图时，只需记住一件事： 要以角度更改函数内部的视图，您必须做两件事：

   1. 从$location 服务调用path 方法，您需要使用您的应用程序injector 获取它（以及您需要测试的任何其他服务，即：$routeParams 和$route）当你像这样调用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"); 更改网址
      • 然后要更新当前路由及其参数，请调用$route 服务上的reload 方法。
        $route.reload()

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

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

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

另外，请确保您在 index.html 文件中的某处有 <ng-view></ng-view>，否则当您的应用启动时，Angular 不会加载您的路线