angular, nodeで簡単な検索機能を作成しています。
ejs(html)に検索バーを設置し、検索ボタンを押すと、検索ワードがangular経由でnodeに渡り、DBに対してSELECTをかけて、取得したJSONを検索結果ページ(別html)に表示させたいです。
現状は、top.ejsからangularのdoSearch()メソッドを呼び出すと同時に検索結果ページに遷移し、ajaxでdoSearchからnodeのメソッドを実行しています。
html
1<body ng-controller="MainController"> 2 <%- include('header.ejs') %> 3 <div class="container top-head"> 4 <h1><%= title %></h1> 5 <div class="col-md-8 col-md-offset-2 search-area"> 6 <form name="search" method="GET" action="result"> 7 <div class="input-group input-group-lg"> 8 <input type="text" class="form-control" placeholder="Please write name" ng-model="keyword"> 9 <span class="input-group-btn"> 10 <button class="btn btn-default" type="submit" ng-click="doSearch()"><span class="glyphicon glyphicon-search"></span></button> 11 </span> 12 </div> 13 </form> 14 </div> 15 </div> 16 </body>
javascript
1angular.module('app', []) 2.controller('MainController', ['$scope', '$http', function($scope, $http) { 3 $scope.doSearch = function() { 4 var keyword = $scope.keyword; 5 var $uri ='/result/' + keyword; 6 $http({ 7 method : 'GET', 8 url : $uri 9 }).then(function (response){ 10 $scope.users = response.data; 11 }).error(function(data, status, headers, config) { 12 }); 13 }; 14}]);
javascript
1var express = require('express'); 2var config = require('../config.json'); 3var router = express.Router(); 4 5/* GET home page. */ 6router.get('/', function(req, res, next) { 7 res.render('search_result', { title: "検索結果"}); 8}); 9 10router.get('/:keyword', function(req, res, next) { 11 var keyword = req.params.keyword; 12 //とりあえず、keywordが取得できているのは確認して、別の値を返しています。 13 //本来は DBにSELECTしてJSONを取得します。 14 var result = [ 15 {"name":"taguchi", "score":52.22}, 16 {"name":"tanaka", "score":38.22}, 17 {"name":"yamada", "score":11.11} 18 ]; 19 res.status(200).send(result); 20}); 21 22module.exports = router;
上記に加えて、検索結果用のhtmlがあるのですが、nodeからangularに返って来たJSONを表示させることができません。angularのthenのところにはちゃんとnodeからJSONが返って来ています。
どうすれば、遷移した後のページにnodeから返って来たJSONを表示させることができるのでしょうか。
あなたの回答
tips
プレビュー