【秒懂】用 Javascript 做 Routing——讓 Single-page webapp 不用 Hashbang (#!) 也能瀏覽

  _     _             _ ____    ____             _   _             
 | |__ | |_ _ __ ___ | | ___|  |  _ \ ___  _   _| |_(_)_ __   __ _ 
 | '_ \| __| '_ ` _ \| |___ \  | |_) / _ \| | | | __| | '_ \ / _` |
 | | | |  | | | | | |___) | |  _ < (_) |  |  | | | | (_| |
  |_|\__|_|  |_|_|____/   \_\___/ \__,_|\__|_|_| |_|\__, |
                                                             |___/

【簡介】

做 Single-page webapp 最大的問題就是不能像普通鏈接一樣：

• 要不給加上【#!】(Hashbang) (e.g.) http://www.example.com/webapp#!/login
  • 這樣的【#!】，可以透過 (e.g.) http://www.example.com/webapp/index.html 有聯繫的 javascript 分析 【#!/login】，再輸出合適的內容
  • 但看起來好不順眼，直接跟 (e.g.) http://www.example.com/webapp/login 相比，下面的順眼多了
• 要不只能傳送網址的 Root Directory (e.g.) http://www.example.com/webapp
  • 這樣就更不方便，要登入就只能再按網頁上的按鈕來登入
  • 而且，分享也更困難～

所以，現在要做的是：

1. 讓網頁的內容能透過 (e.g.) http://www.example.com/webapp/login 來分享
2. 讓【上一頁】按鈕能運作，真的返回先前的狀態

但，要注意的是：

1. 網頁一定要透過 Javascript 才能執行
   • 如果要照顧沒有 Javascript 的瀏覽器用戶，只能把整個網頁用 Server-side programme 重寫
2. 不支援HTML5 的瀏覽器，也可以瀏覽網頁，但
   • 網址還是會有 #!
   • 不能使用【上一頁】、【下一頁】的按鈕

【事前功夫】

1. 要有已經設定好的 Server：以下的教學會分別說明 Apache 跟 Nginx
2. 為了簡化內容（還有小弟的技術不足, haha），以下內容用上 Javascript Framework  (e.g.)AngularJS,EmberJS,BareboneJS
   • 在這裡，會以 AngularJS 為目標
3. 支援 html5 的瀏覽器，尤其是支援 【History.pushState】

【秒懂步驟～開始】

下面的教學，會以一下的設置做背景

• Server: Apache/ Nginx
• Website Path: /webapp/exampleApp/
• 所以內部瀏覽的網址是: 127.0.0.1/webapp/exampleApp

以下內容將會一氣呵成，需要解釋的可以再留言區問～

Nginx, Apache 設置 Laravel Routing

最近在搞一個小項目，由於小弟的 Server-side programming 的技術不高，而且要在安全性＋程式碼的可讀性（自己寫完後看不懂 lol ）上的考慮，就在網上找了一大堆 PHP Framework （原本考慮過不用 PHP的，想嘗試用年輕許多的 Node.JS，但受到之前的【Max-call-stack-size】跟【Memory Leakage】這些Bug 的心裡陰影，還是在自己的小項目做好了）。

比較過不同的 PHP Framework, 例如是Zend Framework、Cake PHP，還是要嘗試投進 Laravel Framework （回不了頭的選擇 :l）。為了更快的開始研究，就選擇了一個Starter Kit 來著手研究—— 來至 Snipe的  “snipe/laravel4-starter"。

初始的網頁界面

設定過程——如果已經有laravel Frame 可以使用，可以直接略過

設定的過程可以說是無痛的，因為網上都有很多的文章可以參考。

1. 【Git Clone】: 把 Snipe的  “snipe/laravel4-starter" Clone 到自己的開發環境，留意Server 的 Document Root 有沒有設定正確
2. 【設定 Starter-kit】: 如果你是用這個Starter-kit 才需要做這個步驟。看ReadMe 檔： https://github.com/snipe/laravel4-starter/blob/master/readme.md
3. 【修改public Folder】: 如果你不是整個Server 都是由Laravel Frame 搭建的，建議把 laravel4-starter/public 檔案夾裡的文件都移動出來。
   • 可以參考這篇教學：http://blog.tommyku.com/blog/create-simple-contact-list-application-with-laravel-and-openshift-integration-part-1?page=1 （"Relocate the public path out …" 開始閱讀）
   • 在下面的教學中，Server 的Root 是 E:\local_host_dev\www
4. 然後就到了這教學的重點—— Routing: 因為Server 的Setup 沒有預設到可以Route 的

[ERROR LOG] 經典錯誤 “php is not recognised as an internal or external command"

錯誤碼

• 系統不能辨認 >>php 這段指令
• (e.g.) 用 cmd 輸入 “php –version"，但  cmd 回應這段錯誤：

php is not recognised as an internal or external command

錯誤成因

1. 檔案不存在——那就自己下載一個吧，沒有安裝包，把下載了的壓縮檔解壓到一個地方吧
2. PATH 設定有誤——
   • 地址有誤，打開 【Control Panel\System and Security\System > Advanced System Settings > Environment Variables > System > PATH】，然後看看有沒有 php 檔案夾的地址。沒有的話自行加上吧
   • 檔案夾的名稱有複雜的子元 (e.g. php5.5.15)，把名稱改成簡單一點的吧 (e.g. php)，然後更新【PATH 變數】＋【php.ini 的 extentions 地址，因為 檔案夾 的名稱改變了】

php.ini 沒有更新，導致【Extension not found】

閱讀更多

1. 文章內容來源： http://chat.stackoverflow.com/rooms/22218/discussion-between-user1049769-and-vahid-farahmand