同時使用Angular routeProvider和Express路線

Question

我正在嘗試使angular的routeProvider來管理我的應用程序的所有路由。 我在angular（客戶端）的app.js文件中相應地定義了我的路線：

(function(){

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

app.config(function($routeProvider){
    $routeProvider
        .when("/single/:street/:buildingNumber/:apartmentNumber", {
            templateUrl: "/views/single.html'",
            controller: "ListingCtrl"
        })
        .otherwise({redirectTo:"/"});
});
}());

但是，當在瀏覽器上寫一個URL（例如/ single）時，該請求嘗試由我的后端express / node api處理。 因此，由於后端路由是例如/ api / foo，所以未找到。 如何確保Angular的routeProvider始終管理我的請求？

更重要的是，應用程序的基本流程是什么？ 當客戶端編寫URL時，應用程序如何知道URL是由express js還是由routeProvider處理的？

Answer 1

通常，您可以通過在主機名和頁面URL之間使用#符號來區分由角度應用程序處理的URL和快速URL。

例如：

如果要從后端請求URL，請致電： http://host.com/api/foo/ : http://host.com/api/foo/

相反，如果您想從有角度的應用程序中請求URL，則應調用： http://host.com/#/single : http://host.com/#/single

因此，如果要調用角度應用程序URL，請添加#號。

這是一個非常重要的事實，在使用單頁應用程序時需要牢記。

更新：

看看這個種子項目： https : //github.com/btford/angular-express-seed

它使用與項目類似的技術堆棧。 這應該使您更清楚。

Answer 2

我幾天前也遇到過同樣的問題。 問題是，即使您在服務器上調用數據時，它也會將其重定向到客戶端路由並在$routeProvider搜索。

您需要確保在server.js添加類似下面的代碼。 這意味着，無論何時有以/api開頭的調用，它都會將其重定向到服務器端的路由，而不是客戶端路由。

var api = express.Router();
require('./app/routes')(api);
app.use('/api', api);

在您的工廠中，當我們按如下所示進行呼叫時，它將轉到服務器端route.js而不是客戶端。

$resource('/api/adduser')