[Web]Bower 前端套件管理工具

Bower 是一套由 Twitter 開發出來的前端管理工具,在一般開發環境如果要使用 jQuery 或 Bootstrap 之類的套件必須手動到官網下載,透過 Bower 可以自動安裝且管理這些套件

另外因為 Bower 是用 Node.js 開發的,而套件管理也是透過 Git,因此安裝前需要先安裝 Node.js、NPM、Git

安裝

安裝套件

相關指令

透過 .bowerrc 修改 bower_components 名稱及路徑 .bowerrc 可以放在 /(根目錄) 或 ~(家目錄),分別代表 Global 和自己的設定

以上範例就是將套件安裝於該路徑底下的 lib/js/plugin 另外其他相關設定,包含權限、proxy等等可以參考 官網參數

自行建立 bower 套件 1. 首先需要先在你的套件中 init bower.json

2. 建立 Dependencies

init 完後會長出 json 格式的設定

3. 註冊套件到 Bower …

Continue Reading

[AngularJS]UI Bootstrap

UI Bootstrap 是 AngularUI Team 提供可以與 Bootstrap 結合的 AngularJS module

注意:因為 UI Bootstrap 的版面部份還是依賴 Bootstrap 的 css,因此使用前還是需要下載 Bootstrap 的 css 和 fonts

bower 安裝

注意:因為有些 module 會用到 template ,所以記得引入 ui-bootstrap-tpls.min.js

補充:Bootstrap 中,特定的 class 有時並不會是 HTML 的 a 元素,因此在畫面上就不會有滑鼠連結的指標出現,UI Bootstrap 官網建議可以自行手動補上

引入 AngularJS 中 引入 UI Bootstrap

Accordion 範例 HTML

Javascript

Continue Reading

[AngularJS]$inject

因為 AngularJS Dependency Injection 的關係,因此在 Controller 傳入參數時,如果要使用特定的物件必須將名稱設定成固定的關鍵字(ex: $scope, $http)

但是如果要將 javascript minification 的話,帶入的參數名稱勢必會被取代,因此可以透過 AngularJS 中的 $inject 解決這個問題

一般 Controller

Module 中的 Controller

Continue Reading

[AngularJS]Directive

AngularJS 中除了可以用預設的 宣告式語法(Directive) 之外,也可以自訂自己需要用的 宣告式語法

例如自訂一個 sayhello tag

Directive Definition Object

要自訂 directive 必須透過一個回傳物件來定義你的操作 這邊紀錄幾個比較常用的 option

priority priority 是用來負責控制優先權,決定哪一個語法要先執行,預設是 0 (ng-repeat 的 priority 是 1000)

terminal 如果設為true,在有設priority的多個directive下,執行到此directive之後就會停止

restrict restrict 有四個選擇可以讓你決定自訂的語法要是什麼型態

E – 元素(Element name): A – 屬性(Attribute) (default): C – 類別(Class): M – 註解(Comment):

template 使用template render html HTML

Javascript

replace 若為true則會用template取代原本的HTML元素,若為false會將元素塞到到原本的tag裡面

範例 HTML

Javascript

Continue Reading

[Laravel]Form

Laravel 中的 Form class 可以協助產生前端表單

基本表單使用

表單內容操作

結合 Model 使用 Controller

View

Drop-Down Lists

Custom Macros

Continue Reading

[Laravel]Autoload

在 Laravel 中如果要 autoload 自訂的 library,必須透過 Laravel 的 composer.json

架構

Test.php

composer.json (加入 psr-0)

更新 Autoload

Continue Reading