從api加載的路由 - 控制器從未調用

我試圖通過運行ajax調用並在我的RouteProvidor上設置路由來將路由加載到我的angularJS應用中。以下是我的代碼。從api加載的路由 - 控制器從未調用

var app = angular.module('app', ['ngRoute']); 
var appRouteProvider; 

app.config(['$routeProvider', '$locationProvider', 
         function($routeProvider, $locationProvider) { 
    $locationProvider.html5Mode({ 
    enabled: true, 
    requireBase: false 
    }); 
    appRouteProvider = $routeProvider; 

    appRouteProvider.when('/', { 
    templateUrl : '../../app/templates/home.html', 
    controller : 'IndexController' 
    }); 

}]).run(function($http, $route){ 

    url = siteApiRoot+'api/routes'; 

    $http.post(url, jQuery.param([]), { 
     method: "POST", 
     headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, 
    } 
).success(function(data){ 

    for(i in data){ 
     appRouteProvider.when(data[i].route, { 
      templateUrl : data[i].template, 
      controller : data[i].controller 
     }); 
    } 

    console.log($route.routes); 

    }); 
});

console.log輸出一組正確的路由到控制檯，似乎表明路由已被正確分配。但是如果我打開任何應該由路由處理的url。什麼都沒發生。永遠不會調用基本資產負載，即導航欄和頁腳，它們始終保持不變，但路由控制器始終不變。我在這裏想念什麼人。

- UPDATE

Tehcnically我有遵循下列模式路線：

條目列表：

我不知道如何來定義上面 - 基本前兩條路線將調用一個控制器和一個視圖，而第三個路徑調用另一個。然而，我堅持如何在AngularJS中定義這種路由，前提是數據庫中的所有數據都是slu slu聲。硬編碼一些路線，但這似乎也無法正常工作。

另外我還有其他頁面是靜態的 - 例如/ about/site/contact - 在這裏路由時有點丟失。

來源

2016-09-28 Ali

你的問題是，有角已經加載了所有的路線。你可能需要重新加載routeService，但爲什麼你甚至不得不通過ajax獲取你的路由？這聽起來像我的設計不好。 – Xatenev

初始化後不能更改路由器配置，但您可以使用參數化的途徑來處理一切。

您可以在外部服務中獲取路由數據，並使用您需要的任何查找邏輯查找當前參數的相關條目。我認爲這一點是爲這些路線設置不同的模板和控制器。

您可以使用簡單的ng-include來解決這個模板，但是您必須手動實例化控制器。看看$injector而不是$控制器調用這裏的更多細節，因爲你可能需要完全的依賴注入。這裏的RouteController只是將自己的作用域傳遞給創建的控制器（此時的確如同任何通用服務一樣），該控制器已經通過路由器連接到container.html。請注意，ng-include會創建一個子範圍，因此如果要爲模板中的範圍指定新變量，則必須小心。

（如果這是一個問題，您可以手動獲取，構建並附加模板：查看$templateRequest,$templateCache和$ compile服務。（您必須創建一個指示將其連接到DOM））

這裏是準系統的示例代碼：

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

app.service("getRouteConfig", function($http) { 

    var routeRequest = $http.post(url, jQuery.param([]), { 
     method: "POST", 
     headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, 
    } 

    return function(params) { 
    return routeRequest.then(function(routes) { 
     // find route entry in backend data for current city, category/slug 
     return routes[params.city][params.slug]; 
    }); 
    } 
}) 

app.controller("RouteController", function(route, $scope, $controller) { 
    $controller(route.controller, {$scope: $scope}); 

}) 

app.config(function($routeProvider) { 

    $routeProvider.when('/', { 
    templateUrl : '../../app/templates/home.html', 
    controller : 'IndexController' 
    }); 
    $routeProvider.when('/:city/:url', { 
    templateUrl : '../../app/templates/container.html', 
    controller : 'RouteController', 
    resolve: { 
     route: function(getRouteConfig, $routeParams) { 
     return getRouteConfig($routeParams); 
    } 
    } 
    }); 

});

container.html：

<ng-include src='$resolve.route.template'>

來源

2016-09-28 15:41:52 yscik

我想我在這裏得到的主要 - 技術上我有一套路線，就像你看過我擁有的路線一樣。我只需要知道如何決定哪個控制器針對哪個路由使用，因爲路由非常相似，只能通過某些基本邏輯來檢測，即如果/：param是數組中的元素，則使用X控制器，否則使用Y控制器。我會在哪裏放置邏輯？ – Ali

在'getRouteConfig'服務的註釋中，您可以從後端獲取'routes'集合，並從url模式獲取'params'。（在這種情況下，'/：city /：slug'模式會產生一個'params.city'和'params.slug'，您可以用它來選擇要使用的路線） – yscik

我明白了 - 只有一件事是我卡住btw - 路線對象的值。路線中應該返回什麼[params.city] [params.slug] ;.我修改了我的代碼，所以我不必進行http調用，而只是將參數的值與通過服務檢索的數組進行比較... – Ali

角度配置功能用於設置配置，用於初始化服務。這意味着試圖改變run()函數的配置將不會發生任何事情，因爲配置已被使用。

一種可能的選擇是從發送到客戶端的實際js文件中的服務器提供配置。否則，使用$http不能更改配置。

有更多的討論在這裏：use $http inside custom provider in app config, angular.js

來源

2016-09-28 11:21:30

請檢查我的問題的更新，我想在這裏解決的問題 – Ali

從api加載的路由 - 控制器從未調用

回答

相關問題