AngularJS 教學 - Bootstrap dropdown directive

本篇用 AngularJS directive 實作了 一個 Bootstrap 的 dropdown (下拉式選單)

我有放在 GitHub、ngmodules.org，也有註冊在 Bower 上

GitHub 連結：https://github.com/AllenFang/angular-bootstrap-dropdown
ngmodules 連結：http://ngmodules.org/modules/angular-bootstrap-dropdown
Bower：可以透過以下指令安裝

$ bower install angular-bootstrap-dropdown --save

詳細的使用介紹可以看 GitHub 的 README.md 文件

之後會加上 multi select 的功能 (有時間的話...)

基本使用方式：
bs-dropdown-display 屬性設定 dropdown 要顯示的文字
bs-dropdown-items 屬性設定 dropdown 選單內的 options
ng-model 設定 dropdown 的預設值
ng-change 當 dropdown 的值變動的時候會呼叫 的 callback function
bs-dropdown-divider 指定 dropdown 的分隔線的位置，例如： bs-dropdown-divider="{{[2,5]}}".

React.js - A HelloWorld example with Express and Node.js

這篇來介紹一下如何快速的利用 Node.js 與 Express 來建立一個 React 的 HelloWorld 範例

React.js 的詳細介紹可以看官網，之後有時間再來詳細介紹...

首先要先快速建立一個 Express 與 Node.js 的 Project，可以用 express-generator

這是一個 Express project 的產生器，可以透過以下指令來安裝

$ npm install express-generator -g

完成後就再利用以下指令建立一個 Express 的 Project

$ express react-demo

進入 react-demo 目錄後可以看一到一個標準的 Express 的目錄結構

接下來就要開始使用 React.js 了，在這之前需要下載 React.js 的函式庫

這邊我是透過 Bower 來管理前端 package 的，所以必須先安裝 Bower

$ npm install bower -g

完成之後先進入 react-demo 目錄內並建立 bower.json，內容如下

{
  "name": "react-demo",
  "version": "0.0.1"
}

接下來就可以透過 Bower 來下載 React.js 了

$ bower install react --save

上述指令的 --save 自動在 bower.json 中加入 dependencies，並且你會在 react-demo 目錄下

【Apache Solr】查詢與刪除 Collection

簡單介紹如何透過 RESTful 來執行 Collection 的查詢與刪除

這裡的查詢是指查詢 Collection 的 schema 資訊，可以透過 HTTP GET 以下的 URL 來取得 schema

GET http://localhost:8983/solr/{collectionName}/schema

大致上 Solr 會將 schema.xml 的內容轉換成 JSON回傳回前端(預設)

如果要用 XML 格式的話，在上述的 URL 後面加上 ?wt=xml 即可

至於要刪除 Collection 的話，可以利用以下的 URL 來完成

GET http://localhost:8983/solr/admin/collections?action=DELETE&name={collectionName}

如果你是在 SolrCloud 的環境下，想要連帶刪除該 Collection 的 config 的話，可以用 Solr 提供的 shell script 來完成

$ cd solr-4.10.2/example/scripts/cloud-scripts
$ ./zkcli.sh -zkhost localhost:9983 -cmd clear {config path}

在 SolrCloud 的環境下 Config 都是由 zookeeper 處理，如果要知道 config 的路徑

可以到 http://localhost:8983/solr/#/~cloud?view=tree 如下圖所示

選擇你要刪除的 Config 目錄名稱，右邊會帶出一些資訊，並且在下方處有一個路徑

例如　/configs/allenCollection1， 這就是上述指令的 config path 了

【Apache Solr】 建立 Collection (Create Collection using SolrJ or RESTful)

在 【Apache Solr】建立 Collection (Create Collection) 介紹了如何在 SolrCloud 中建立一個 Collection

當然也說明了一些建立 Collection 的一些條件，包括 Shard 的數量以及 Config 須先上傳到 Zookeeper

接下來介紹一下如何用 SolrJ 以及 RESTful 的方式建立一個 Collection

SolrJ 是一個套件能夠讓開發者透過 Java 的方式來操作 Solr，以下是建立 Collection 的片段程式

String zkHosts = "locahost:9983";
String collectionName = "testCollection1";
String confName       = "testCollection1";  //Configuration Name (You must upload to zookeeper first)
int shards            = 3;
CloudSolrServer server = new CloudSolrServer(zkHosts);
CollectionAdminResponse response = CollectionAdminRequest.createCollection(
                                collectionName, shards, confName , server);

if(null != response.getErrorMessages()){
        /* print error here */
 for(Entry error: response.getErrorMessages()){
  result.addErrorMsg(error.getValue());
 }
}
server.shutdown();

CollectionAdminRequest 有很多的重載方法，可以去查它的 API

AngularJS 教學 - Can not find the binary google-chrome

如果第一次在 Linux 的環境中利用 Karma 來執行測試的時候，可能會看到類似下圖的錯誤

前提是你的測試瀏覽器是用 chrome 才會  >> browsers: ['Chrome']

很明顯的是 Karma 沒辦法透過環境變數 找不到 Chrome 的執行路徑

你可以透過指令

$ which chromium-browser 來找出 Chrome 的執行路徑
>> /usr/bin/chromium-browser

接者加到環境變數 CHROME_BIN

$ echo 'export CHROME_BIN="/usr/bin/chromium-browser"' >> ~/.bashrc && source ~/.bashrc

再執行一次 Karma 就可以了

【Apache Solr】建立 Collection (Create Collection)

在前一篇 【Apache Solr】Getting started：Solr Cloud configuration and example 提供了一個

關於 Solr Cloud 環境的建立與一些簡單的範例，接下來就繼續介紹如何建立 Collection

在 Solr Cloud 的環境內要建立 Collection 之前必須要先有 Configuration

所謂的 Configuration 先前已經提到過了，就是類似在 $SOLR_INSTALL/example/solr/collection1/conf 內的所有內容

最重要的就是 solrconfig.xml 以及 schema.xml 了

當然不管是在 Cloud 還是 Single Node (單點) 的環境上都是需要 Configuration 的

不過 Solr Cloud 是需要將 Configuration 上傳到 Zookeeper，統一由 Zookeeper 做管理

我們可以透過以下指令來達成

$ cd solr-4.10.2/example/scripts/cloud-scripts/
$ ./zkcli.sh -zkHost localhost:9983 
                  -cmd upconfig 
                  -confdir {your configuration location}
                  -confname collection1

【Apache Solr】Getting started：Solr Cloud configuration and example

在前一篇 【Apache Solr】Getting started： Installation & A single node example 的教學

有簡單介紹 Solr 的細節和目錄結構以及如何配置單一節點的 Solr 並啟動 Solr 服務

也說明如何在單一節點上建立一個新的 core，接下來就介紹 Solr Cloud 分佈式的設定和一些簡單範例


分佈式(Cloud)

叢集的效果就很像 Hadoop/HDFS 的樣子，資料是分佈式儲存，並透過 Zookeeper 來作協同管理，一個節點(Node)失效並不會造成資料遺失等問題，在 Solr 文件中都稱為 "SolrCloud"

以下範例同樣是以 Solr 跟目錄下的 example 為例

• 如何啟動

    $ cd solr-4.10.2

    $ cp -r example/ shard1/ 

    $ cd shard1

    $ rm -r solr/collection1/data/

    以上的動作會在 solr 跟目錄下建立一個 shard1 目錄，內容跟 example 目錄相仿

    接下來在 shard1目錄下執行以下 command

    $ java -DzkRun -DnumShards=2 -Dcollection.configName=collection1

           -Dbootstrap_confdir=./solr/collection1/conf

           -jar start.jar

【Apache Solr】Getting started： Installation & A single node example

Apache Solr 是一個全文搜索的平台，能夠將多種格式的資料儲存在它的資料庫內，並提供快速的資料檢索

Solr 在 2010 年的時候與 Apache 的另外一個專案 Lucene 合併，Lucene 其實就是整個資料搜尋的核心，

它提供了所有的資料搜尋與檢索的函式庫。

而 Solr 則是利用了 Lucene 的搜尋功能並採用 Servlet container(預設是 Jetty) 來提供 REST，

及其他 API 的方式讓開發者能夠輕易的對資料進行查詢。

--------------------------------------------------------------------

接下來以 Apache Solr 4.10.2 的版本來安裝並介紹

前提是你的作業系統內必須安裝 Java 7，如果你是 Java 6 的話可以考慮更新到 Java 7，

或是選擇 Solr 版本 4.7.0 以下的也是可以。

首先先到 http://archive.apache.org/dist/lucene/solr/4.10.2/ 下載合適你作業系統的壓縮檔

以下以 Linux ubuntu 為例

$ cd ~                                                                  
$ wget http://archive.apache.org/dist/lucene/solr/4.10.2/solr-4.10.2.tgz
$ ......                                                                

java.lang.NoSuchMethodError: org.apache.hadoop.conf.Configuration.addDeprecations

這個錯誤訊息是因為不同的 Hadoop 版本所造成的

主要是因為 org.apache.hadoop.conf.Configuration 這個類別在 Hadoop 2.3 之後

新增了一個方法(method) addDeprecations

出現這個問題就有可能代表你的環境內有 Hadoop 2.3 的 jar 以及比 2.3 還早的 jar 


我會遇到這個問題是因為

我的專案本身透過 Maven 引入 Hadoop 2.3 的 package

另外也相依了 solr-core 4.1.0 這個 package

剛好 solr-core 4.1.0 它有相依 Hadoop 某些 jar，但卻是 Hadoop 2.2 的

可以在 Solr-core 4.1.0 maven repository 內看到，如下圖

所以導致這樣的問題

解法部外乎就是把你專案本身的 Hadoop 2.3 降到 2.2

或是在 Maven 中用 exclusion 標籤排除掉以上那 4 個 jar  

AngularJS 教學 - Mocking a service

在前一篇  AngularJS 教學 - Service 測試 有簡單介紹到如何對 Service 進行測試

另外因為 Controller 常常需要依賴一些 Service Object 來做一些邏輯處理或後端的溝通

因此也說明了運用了 $injector 來將 Service Object 注入到 Controller，以利 Controller 的測試


不過有時候在開發的過程中，常常會遇到我們所開發的元件中所相依的元件還沒開發完成或是是別人的工作

例如我在開發某個 Controller 元件的時候，可能需要依賴很多的 Service

但這些 Service 可能尚未完成等等之類的因素，但為了確保我的 Controller 能夠如期完成並政常運作

先用模擬的方式來模擬這些 Service ，讓我的開發與測試能夠順利完成

而這些被模擬的東西我們可以稱為 mock object 或是 fake object

所以本篇會說明如何利用 $provide 來建立一個 mock 的 Service object

假設在 SampleCtrl 中我們需要依賴一個 TodoService

angular.module('sampleApp', [])

     .controller("SampleCtrl", function($scope, TodoService){

     $scope.todos = TodoService.getTodos();

 });