[AngularJS-3rd] Angular 1.4.8 使用angular dialogs service module

最近把anrgular升級到1.4.8，記錄一下要處理的流程。

相依模組

 angular-sanitize (此模組在1.4.8被獨立了，要記得include)
 angular-ui-bootstrap Version: 1.1.0 - 2016-01-18

載入模組

ngSanitize

ui.bootstrap

dialogs.main

Dialog的控制器

要注意一下因為ui-bootstrap升級後，所以原本的$modalInstance要改用$uibModalInstance

[TaipeiOpenData] Taipei OMG(Open, Mobility, Green) 綠色交通應用開發大賽: LazyPark 懶人停

今年看了Taipei市政府舉辦了Taipei OMG(Open, Mobility, Green) 綠色交通應用開發大賽，希望參賽者透過現在的Open Data API(停車場、公車等API)來打造綠色交通應用。

由於去年買了新車，時常有找停車位的需求，因此就找到同事Eric一起來參賽，
另外為了填補簡報太工程師風格的問題，也找了公司市場行銷同事Franny來幫忙!!
順利的進入決賽隊伍，如果有看到此篇文章的格友們，快去投票官網https://taipeiomg.bhuntr.com/vote  投我們一票吧!!!

由於太多組的題目太類似的了，請支持LazyPark懶人停才對喔!!!

懶人停APP 介紹

這個APP就發想就是考量正在路上急用的用路人，因此我們只想簡化APP的操作方式，絕對不是下班沒時間開發lol。最後決定的版本就是透過省時與省錢二種查詢方式，加Web定位的方式，來提供用戶前五筆的停車場資訊。



另外考量WebAPP定位不夠準確(有誤差)以及考量有些用路人可能會前查詢目的地附近是否有相關停車資訊，因此你可以點選手動輸入目的地連結，即可手動輸入你的位址。

想試用的話，點選此網址即可開啟APP http://taipeiomg.cloudapp.net/app/#/home

有使用建議也可以貼到 粉絲團喔: https://www.facebook.com/lazypark4you/

[iOS Swift] 設定textbox變password

如果使用textbox讓用戶作為密碼輸入欄位，
只要將Secure Text Entry打開即可 :D
如下圖：

[GoogleMap] 如何監聽zoom變更的控制

如何監聽zoom變更的控制

var 
 map = new google.maps.Map($mapElement[0], mapOptions);
                console.log($mapElement[0]);
                
                google.maps.event.addListener(map, 'zoom_changed', function () {
                    var zoomLevel = map.getZoom();
                    logger.debug('zoom_changed to level: ' + zoomLevel);
}

[GIT] 重設Git專案

簡單重設Git專案的指令步驟

$>rm -rf .git 

$>git init

[iOS Swift] 如何新增專案內的資料夾

當專案愈來愈大的時候，
就需要好好定義一下專案目錄的結構，
記錄一下Xcode如何在專案中新增資料夾。

1. 專案目錄下按右鍵
2. 選擇New Group即可

[iOS Swift] 發送網路請求錯誤: App Transport Security has blocked a cleartext

在使用https://github.com/Alamofire/Alamofire來進行網路資源的request，

執行後發生以下的錯誤：

App Transport Security has blocked a cleartext 

解決方法只要info.plist檔案加入App Transport Security Settings的key，

並在此key下面再新增Allow Arbitrary Loads的key且屬性請設為YES即可

參考:

http://stackoverflow.com/questions/31254725/transport-security-has-blocked-a-cleartext-http

[iOS Swift] 替新的ViewControll場景加入控制器

記錄一下如何新增一個swift的控制器給新增的場景

1.  新增一個cocoa class

[iOS Swift] 如何重新命名ViewControll

記錄一下如何使用Xcode去重新命名你的ViewController，


1. 重新命名你的ViewController.swift檔名與裡面的類別名稱

ex: 改名為Page1VC.swift

[iOS] 模擬器尺吋的調整

由於不小心按了快速鍵導致模擬器變太小，所以記錄一下這篇...
請按選單列的Window->Scale->尺寸選擇

[freebooard] freeboard自定外掛踩雷

在測試自定義freeboard外掛的時候，發現設定屬性填空字串或空陣列，

初始化整個儀表版是會錯誤的。有用這個套件的朋友要注意一下。

[AngularJS] i18n 使用筆記

記錄一下angular translate的使用快速筆記。

環境設定

請引用angular-translate.min.js
使用模組 pascalprecht.translate

語言檔

透過 $translateProvider新增多國語系檔對應的內容，你可以另存以下的js至zh_TW.js檔

angular.module('myApp.controllers').config(function ($translateProvider) {
 $translateProvider
 .useSanitizeValueStrategy('escaped')
 .translations('zh_TW', {
  TRANSLATION_ID: 'Hello world !!',
  TRANSLATION_ID_2: 'Hello world !! {{value}}',
  TRANSLATION_ID_3: 'Hello world !! {{value1}},{{value2}}',
 });
});

$translate service處理多語系

  $translate('').then(function(translation) {
                    //translation為取得的鍵值

                });

Filter處理多語系

{{ 'TRANSLATION_ID' | translate }}

動態取代多國語言參數

使用filter

{{ 'TRANSLATION_ID_2' | translate:'{"value": 'Ken' }' }}

使用filter與多個參數

{
'TRANSLATION_ID_3': 'Hello world !! {{value1}},{{value2}}'
}

如果要多參數時，請在新增一個json變數至scope，如 $scope.translationData = {value1: 'Ken',value2: 'Ken2'}

{{ 'TRANSLATION_ID_3' | translate: translationData }}

使用directive表示式 在元素內透過translate與translate-values二個directive進行資料繫結

translate="TRANSLATION_ID_3" translate-values="{ value1: translationData.value1,value2: translationData.value2 }

事件

可以取得當語言變更的事件

$rootScope.$on('$translateChangeSuccess', function () {

// Language has changed
 });

啟動app設定語言方法

myApp.config(['$translateProvider','$windowProvider',
    function($translateProvider,$windowProvider) {
    var defaultLanguage = 'zh_TW';//你定義的語系檔名稱

    $translateProvider.use(defaultLanguage);
}])

REF

http://angular-translate.github.io/docs/#/guide/00_installation

[CI] 客制化404控制器來處理查詢結果不存在的解法

因為想客制化404的頁面來處理當用戶查詢條件結果不存在時的對應頁面，

但又不想覆想原本的show_404();系統內建的方法。

因此新增了一個新的Error_404的控制器，裡面放了index()與object_not_found()二個方法。分別針對網址亂key in 的404處理與針對查詢結果失敗的404處理。

因此在其他查詢結果的控制器如果遇到查詢失敗時，直接呼叫Error_404控制器中的object_not_found方法，因此我們需要了解如何透過CI在控制器中如何呼叫另一個控制器的方法。

參考的解法如下

yes you can

load like this inside your controller 

$this->load->library('../controllers/whathever');

and call the following method:

$this->whathever->functioname();

[Apache] apache無法啟動: make_sock: could not bind to address 0.0.0.0:80 no listening sockets available

發現VM的apache無法啟動，噴了一些
make_sock: could not bind to address 0.0.0.0:80 no listening sockets available的錯誤，找到這篇wiki https://wiki.apache.org/httpd/CouldNotBindToAddress

可能是有其他process程式佔住port或不是root的權限(Unix based systems disallow non-root users to bind processes to port numbers below 1024. Get root!)

不過最後下了apachectrl start就開啟了....

[CI] 不使用其他library在樣版裡面再讀另一個樣版

簡單的在樣版裡面又load另一個樣版的範例如下：

你要載入的目的地樣版，注意這裡的$content請輸入你的樣版路徑

<div id="content"><?php $this->load->view($content) ?></div>

在控制器裡面新增一個content變數，裡面寫你樣版的路徑

$view_data = array();
$view_data['content'] = '另一個view的路徑';
$this->load->view('主view的路徑', $view_data);

http://stackoverflow.com/questions/15096828/load-a-view-inside-another-view

[php] htaccess: Options not allowed here 異常

今天在架CI的舊專案時，發現以下error。

[Fri Dec 04 15:51:36.019560 2015] [core:alert] [pid 19393] [client 10.211.55.2:58540] /var/www/<專案名稱>/.htaccess: Options not allowed here

解決方法是把原本htaccess下面的Options設定先註解掉就好了，

不知為何先前要寫這一行XD

#Options +FollowSymLinks

        

RewriteEngine On

RewriteCond %{REQUEST_URI} ^(system|application).*

RewriteRule ^(.*)$ /index.php?/$1 [L]

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule ^(.*)$ index.php?/$1 [L]

[Javascript] Slideout.js製作手機滑動的側欄選單

想要有mobile web app的側欄選單，可以參考Slideout.js。

此元件有跟angular的eeh-navigation module整合，

先記錄一下。有使用再來寫使用說明。

[Handlerbar.js] 如何透過handlebar.js取得資料集內的資料

如果使用handlebar.js想要取得綁定的索引值的話，其內建的helpe就有提供@index與@key，供我們取得索引。

陣列資料

{{#each array}}

{{@index}}: {{this}}

{{/each}}

物件資料

{{#each object}}

{{@key}}: {{this}}

{{/each}}

基本上你可以取得索引值後，可以將這個值render在元素的屬性上，

例如data-index="{{#index}}"，之後用jquery綁定元素可以簡單取得資料集裡面的目標資料了。

[Bower] ubuntu run bower 發生錯誤

在新裝的ubuntu裝完npm又裝bower後，發現bower無法使用

bigd@ubuntu:~$ bower
/usr/bin/env: node: No such file or directory


可以安裝 nodejs-legacy就可以解決

sudo apt-get install nodejs-legacy

[jQuery] ajax request queue 蒐集

記錄一些使用jquery ajax queue的解決方案，目前要找的需求是要能支援concurrent ajax requ，而不是一個接著一個發送。

$.ajaxMultiQueue
https://github.com/GeReV/jQuery.ajaxMultiQueue

$.AjaxQueue https://gist.github.com/iambigd/46fe33eaf3dec450e965

http://dreamerslab.com/demos/javascript-loose-coupling-with-jquery-queue-plugin

目前使用$ajaxQueue方案，再多用一個Wrapper包起來即可。