質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.49%
Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Q&A

0回答

3966閲覧

angular, nodeで簡単な検索機能を作成したい

null368

総合スコア39

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

0グッド

1クリップ

投稿2016/12/18 14:34

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を表示させることができるのでしょうか。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問