[AngularJS/Elasticsearch] 使用AngularJS为基于Elasticsearch的应用创建前端

使用AngularJS为基于Elasticsearch的应用创建前端

如果使用Elasticsearch使用应用的数据源,我们可以很方便的使用AngularJS结合Elasticsearch提供的相关模块为它创建一个前端。

以创建一个简单的员工信息花名册为例。

准备工作

准备工作分为以下两个方面:

添加前端依赖

  1. 安装Bower
  2. 在bower.json中添加对于AngularJS和Elasticsearch的依赖:
"dependencies": {
    "angular": "~1.2.15",
    "elasticsearch": "~2.4.0"
}

准备运行时环境

对于简单的应用和Demo,可以直接使用Node环境中提供的http-server,非常简单快捷。

  1. 安装Node
  2. 安装http-server,通过命令:npm install -g http-server

配置AngularJS以及ES
Client

配置AngularJS

var rosterApp = angular.module(‘rosterApp‘, [‘elasticsearch‘]);

配置Elasticsearch
Client

对于一个只读的应用,我们只需要将搜索的功能暴露出来。可以通过自定义一个factory来实现:

rosterApp.factory(‘rosterService‘,
    [‘$q‘, ‘esFactory‘, ‘$location‘, function($q, elasticsearch, $location){
        var client = elasticsearch({
            host: $location.host() + ":9200"
        });

        var search = function(term, offset){
            var deferred = $q.defer();
            var query = {
                "match": {
                    "_all": term
                }
            };

            client.search({
                "index": ‘roster‘,
                "type": ‘employee‘,
                "body": {
                    "size": 10,
                    "from": (offset || 0) * 10,
                    "query": query
                }
            }).then(function(result) {
                var ii = 0, hits_in, hits_out = [];
                hits_in = (result.hits || {}).hits || [];
                for(;ii < hits_in.length; ii++){
                    hits_out.push(hits_in[ii]._source);
                }
                deferred.resolve(hits_out);
            }, deferred.reject);

            return deferred.promise;
        };

        return {
            "search": search
        };
    }]
);

在以上定义的factory中,我们只暴露了search方法。该方法调用了client的search方法完成基于关键字的搜索。

控制器(Controller)

下面需要做的就是实现一个控制器来完成页面与上述search方法的交互:

rosterApp.controller(‘rosterCtrl‘,
    [‘rosterService‘, ‘$scope‘, ‘$location‘, function(rosterService, $scope, $location){
        $scope.employees = [];
        $scope.page = 0;
        $scope.allResults = false;
        $scope.searchTerm = ‘‘;

        $scope.search = function(){
            $scope.page = 0;
            $scope.employees = [];
            $scope.allResults = false;
            $location.search({‘q‘: $scope.searchTerm});
            $scope.loadMore();
        };

        $scope.loadMore = function(){
            rosterService.search($scope.searchTerm, $scope.page++).then(function(results){
                if(results.length !== 10){
                    $scope.allResults = true;
                }

                var ii = 0;
                for(;ii < results.length; ii++){
                    $scope.employees.push(results[ii]);
                }
            });
        };

        $scope.loadMore();
    }]
);

search方法用来执行搜索,loadMore方法用于加载更多记录。

页面

页面主要用于展示Employee对象的具体属性。

<div ng-app=‘rosterApp‘ ng-controller=‘rosterCtrl‘>
    <header>
        <h1>Employee Search</h1>
    </header>
    <section class=‘searchField‘>
        <form ng-submit=‘search()‘>
            <input ng-model=‘searchTerm‘ type=‘text‘>
            <input type=‘submit‘ value=‘Search for employees‘>
        </form>
    </section>
    <section class=‘results‘>
       <div class=‘no-employees‘ ng-hide=‘employees.length‘>No results</div>
       <article class=‘employee‘ ng-cloak ng-repeat=‘employee in employees‘>
           <h2>
              <a ng-href=‘{{employee.link}}‘>{{employee.name}}</a>
           </h2>
           <ul>
              <li ng-repeat=‘historyItem in employee.historyItems‘>{{ historyItem }}</li>
           </ul>
           <p>
              {{employee.introduction}}
              <a ng-href=‘{{employee.link}}‘>More information...</a>
           </p>
       </article>
       <div class=‘load-more‘ ng-cloak ng-hide=‘allResults‘>
            <a ng-click=‘loadMore()‘>More...</a>
       </div>
    </section>
</div>

运行

进入工程目录,运行http-server。访问http://localhost:8080。

当需要使用不同的查询类型时,通过修改search方法中query的创建部分即可。

时间: 2024-10-09 09:06:41

[AngularJS/Elasticsearch] 使用AngularJS为基于Elasticsearch的应用创建前端的相关文章

网站基于ElasticSearch搜索的优化笔记 PHP

基本情况就是,媒体.试题.分类,媒体可能有多个试题,一个试题可能有多个分类,分类为三级分类加上一个综合属性.通过试题名称.分类等搜索查询媒体. 现在的问题为,搜索结果不精确,部分搜索无结果,ES的数据结构不满足搜索需求.解决方案就是,重构ES数据结构,采用父子关系的方式,建立media和question两个type. 全程使用https://github.com/mobz/elasticsearch-head,这个进行ES的管理和查看,很方便. 从ES的说明可以看出,ES是面向文档,其实所有的数

BAT大牛亲授 基于ElasticSearch的搜房网实战

BAT大牛亲授 基于ElasticSearch的搜房网实战网盘地址:https://pan.baidu.com/s/1jJMCcdC 密码: 4pcf备用地址(腾讯微云):https://share.weiyun.com/4f171b9beb21d0cbe391d764788609d6 密码:6yy630 第1章 课程介绍本章首先会对整个课程做一个基本的介绍,包括使用到的技术.项目整体运行效果,让大家了解通过学习本门课程可以接触并学习到哪些技术.然后让大家在学习之前,对课程学习所需要的前置知识有

基于Elasticsearch+Fluentd+Kibana的日志收集分析系统

我们平时分析log直接在日志文件中 grep.awk 就可以获得自己想要的信息,此方法效率低下,生产中需要集中化的日志管理,所有服务器上的日志收集汇总 Elasticsearch一个节点(node)就是一个Elasticsearch实例,一个集群(cluster)由一个或多个节点组成,它们具有相同的cluster.name,它们协同工作,分享数据和负载.当加入新的节点或者删除一个节点时,集群就会感知到并平衡数据.集群中一个节点会被选举为主节点(master),它将临时管理集群级别的一些变更,例如

基于elasticsearch和elastalert的备份状态检查

一,业务背景 数据的备份(恢复)对于企业来说,是挽救生命的最后一根稻草:也是运维日常工作的一个重要组成部分.目前流行的方式是采用脚本对数据进行备份,并同步到远端进行异地备份.一旦需要备份的数据多了后,会面临以下问题: 1.备份是否成功,需要在每个脚本里进行判断并发送邮件,一旦涉及邮箱账号密码调整需要每个脚本调整,容易遗漏: 对于日常审计要求,如何快速提供备份操作结果是个麻烦事情(登录到机器一个个的统计记录,容易吐):之前看<devops最佳实践>一书中一个案例提及,他们公司所有服务器操作记录都

ElasticSearch(es)基于Lucene的搜索服务器

.1什么是Lucene Lucene是一个开放源代码的全文检索引擎工具包,但它不是一个完整的全文检索引擎,而是一个全文检索引擎的架构. 在全文搜索领域中,Lucene可以被认为是迄今为止最先进.性能最好的.功能最全的搜索引擎库. 但是Lucene只是一个库.想要使用它,你必须使用Java来作为开发语言并将其直接集成到你的应用中,更糟糕的是,Lucene的配置及使用非常复杂, 你需要深入了解检索的相关知识来理解它是如何工作的. 1.2. ElasticSearch(简称ES) ? 核心: 创建索引

基于Elasticsearch的自定义评分算法扩展 (转)

实现思路: 重写评分方法,调整计算文档得分的过程,然后根据function_score或script_sort进行排序检索. 实现步骤: 1.新建java项目TestProject,引入Elasticsearch的jar包 2.新建package:es.testscript 3.新建类TestScriptFactory,继承NativeScriptFactory,示例: package es.testscript; import java.util.Map; import org.elastic

基于Elasticsearch的自定义评分算法扩展

实现思路: 重写评分方法,调整计算文档得分的过程,然后根据function_score或script_sort进行排序检索. 实现步骤: 1.新建java项目TestProject,引入Elasticsearch的jar包 2.新建package:es.testscript 3.新建类TestScriptFactory,继承NativeScriptFactory,示例: package es.testscript; import java.util.Map; import org.elastic

Elasticsearch教程 Elasticsearch查询语法 Elasticsearch权威指南 深入理解Elasticsearch

课程大纲 第1节结构化搜索_IT技术论坛案例背景介绍 9分钟 第2节结构化搜索_在案例中实战使用term filter来搜索数据 20分钟 第3节结构化搜索_filter执行原理深度剖析(bitset机制与caching机制)18分钟 第4节结构化搜索_在案例中实战基于bool组合多个filter条件来搜索数据 12分钟 第5节结构化搜索_在案例中实战使用terms搜索多个值以及多值搜索结果优化 7分钟 第6节结构化搜索_在案例中实战基于range filter来进行范围过滤 5分钟 第7节深度

Elasticsearch入门教程(二):Elasticsearch核心概念

原文:Elasticsearch入门教程(二):Elasticsearch核心概念 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/vbirdbest/article/details/79200022 基本概念介绍 Elasticsearch是一个基于Lucene构建的开源.分布式.RESTful的搜索引擎,能够实现近实时(NRT)搜索,稳定.可靠.安装方便.Elasticsearch 不