NodeJSエクスプレスオブジェクトをAngularJSに渡す1.6

Question

Expressを使用して動作するNodeJS APIがあります。私は、ページのデータを取得するためにNodeJSからAngularJSへのパラメータを正しく渡す方法が混乱しています。

注：私はに基づいてJSONオブジェクトを返すために二つの経路、1ページをレンダリングすると、1を設定している How do I pass node.js server variables into my angular/html view?

：私の質問は、この質問の延長（ないリピート）であります書籍ID（エンティティの一意のID）。ページが読み込まれると、Angularは$ httpを使用してGETリクエストを送信し、JSONエンドポイントからデータを取得します。

これは機能していますが、例のブックIDを角度でハードコードしました。

質問：ブックIDを角型コントローラに渡すにはどうすればよいですか？

/*EXPRESS ROUTES*/ 
//Render page 
router 
    .route('/detail/:book_id') 
    .get(ctrlRequest.detailPage); 

//Return JSON data 
router 
    .route('/detail/json/:book_id') 
    .get(ctrlRequest.detailJSON); 


/*NODEJS CONTROLLERS*/ 
//Render page 
module.exports.detailPage = function(req, res) { 
    res.render('transfer_request_detail.pug', { 
     title: 'Transfer Request Detail' 
    }); 
}; 

//Return JSON data 
module.exports.detailJSON = function(req, res) { 
    getModel().read(req.params.book_id, (err, entity) => { 
    if (err) { 
     console.log('Request Detail JSON unable to return data results. Error message: ', err); 
     return; 
    } else { 
     res.json(entity); 
    } 
    }); 
}; 

/*ANGULAR WITH HARD-CODED BOOK ID*/ 
//QUESTION: HOW TO PASS THE BOOK ID IN DYNAMICALLY? 
function DetailPageController($http) { 
    var vm = this; 
    $http({ 
     url: '/detail/json/5761233819297931', //HARD-CODED ID HOW TO PASS IN DYNAMICALLY? 
     method: 'GET' 
    }).then(function (response){ 
    vm.book = response.data; 
    console.log('API worked', response); 
    },function (error){ 
    console.log('API error: ', error); 
    }); 
} 

UPDATE：。これはおそらく、あなたのアプリケーションがどのように使われるかに依存して例えば

」、アプリはブックのリストを表示することがありますExpressから取り出され、ユーザーは詳細ページを見るために1をクリックします。その場合、フロントエンドはExpressからブックIDの完全なリストを取得します。アプリケーションの動作を説明してください。

ユースケース1： ユーザーが新しいブックフォームを送信すると、ノードアプリケーションは詳細ページを表示するURLにリダイレクトします。 '/ detail /：book_id'となります。私はAngularを使用して、作成された本の詳細を表示するためのデータテーブルを構築したいと考えています。

ユースケース2： 今後、別のユースケースとして、ログインしているユーザーが作成したすべての書籍を表示することになります。この場合、Angularを使用して、データテーブル内のすべてのブックを表示したいと考えています。ルートは '/ mybooks /：username'のようなものになります。また、ユーザーは、単一のブックの詳細ページ（ユースケース1）にリンクするリンクをクリックする必要があります。

UPDATE 2：

私は、URLのうち、IDを抽出するためにrouteParamsを使用してみました。それは私が必要としているもののように見えますが、うまくいきません。ルートはExpressではなくAngularではなくサーバー側で作成されたことに注意してください。

$routeParams //Object 
$routeParams.book_id //undefined 

https://docs.angularjs.org/api/ngRoute/service/ $ routeParams

UPDATE 3：

私はハックの回避策のビットでこれを解決することができました。私はこのソリューションに満足しているわけではありません。なぜなら、これはかなりハッキリですが、少なくとも当分の間は機能します。

このコードをAngularコントローラで使用してURLからIDを抽出しました。

var relpath = $location.path().split('/'); 
var book_id = relpath[3]; 

UPDATE 4： 私は振り出しに戻っていますようだから、見えます。このソリューションは、高速ルーティングを壊しました。このソリューションでは、locationProvider HTMLモードが有効になっているため、このスレッドで説明したのと同じ問題が発生しています。メニューリンクをクリックするとページが読み込まれず、直接入力すると読み込まれます。

Angular routing doesn't work when URL is directly visited in browser but works when clicked to?

Answer 1

あなたはtemplate literalsを使用することができます：あなたのURL文字列に。

function DetailPageController($http, id = 5761233819297931) { 
var vm = this; 
$http({ 
    url: `/detail/json/${id}`, //HARD-CODED ID HOW TO PASS IN DYNAMICALLY? 
    method: 'GET' 
}).then(function (response){ 
vm.book = response.data; 
console.log('API worked', response); 
},function (error){ 
console.log('API error: ', error); 
}); 

}