參數不起作用的角度路線

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