参数不起作用的角度路线

Angular route with parameters not working

本文关键字：度路 不起作用 参数      更新时间：2023-09-26

我想有一个对象作为我的路由的参数，但我从一个数字开始来测试路由，但它不起作用。

这是我的路线：

// 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:///

我发现问题出在我的主路由上，如果我更改"重定向到："/"，网址更好，但仍然有错误： 

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

编辑我的应用程序 ：

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

在我的索引中使用.html像这样：

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

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

  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. 完成所有这些更改后，在更改函数内部的角度视图时，只需记住一件事：要在 Angular 中更改函数内部的视图，您必须做两件事：

    1. 从$location服务调用path方法，您需要使用它(以及您需要测试的任何其他服务，即：$routeParams和$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");

      • 现在在您的控制器中或任何更改 URL 的位置
        $location.path("/voir_message/2");
      • 然后，若要更新当前路由及其参数，请在$route服务上调用 reload 方法。
        $route.reload()

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

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

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

此外，请确保在索引.html文件中的某个位置<ng-view></ng-view>，否则当您的应用被引导时，Angular 不会加载您的路由

相关文章：