好用簡單的angular timer directive,目前還用不到。先記起來
https://github.com/siddii/angular-timer
星期三, 7月 09, 2014
[AngularJS] angular-breadcurumb 模組
UI-Bootstrap竟然沒含breadcrumb模組,
有需要可以參考這個Angular-breadcrumb/ ng-breadcrumbs
https://github.com/ianwalter/ng-breadcrumbs
http://ncuillery.github.io/angular-breadcrumb/#/home
有需要可以參考這個Angular-breadcrumb/ ng-breadcrumbs
https://github.com/ianwalter/ng-breadcrumbs
http://ncuillery.github.io/angular-breadcrumb/#/home
星期二, 7月 08, 2014
[Alfresco] alfresco impersonation
星期一, 7月 07, 2014
[AngularJS] 實作自動選取的directive
實作自動選取的directive範例
http://stackoverflow.com/questions/14995884/select-text-on-input-focus-in-angular-js
HTML
<input type="text" value="test" select-on-click />JS
module.directive('selectOnClick', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.on('click', function () {
this.select();
});
}
};
});
http://stackoverflow.com/questions/14995884/select-text-on-input-focus-in-angular-js
星期日, 6月 29, 2014
[AngularJS] angular dialog service v5.0.0 試用
透過angular dialog service這個第三方套件,
可以輕鬆使用modal來產生alert, confirm, custom 等效果。
測試版本: v 5.0.0
需求的套件: ngSanitize, bootstrap.ui, ngTranslate
https://github.com/m-e-conroy/angular-dialog-service
sample
http://codepen.io/m-e-conroy/pen/ALsdF
可以輕鬆使用modal來產生alert, confirm, custom 等效果。
測試版本: v 5.0.0
需求的套件: ngSanitize, bootstrap.ui, ngTranslate
https://github.com/m-e-conroy/angular-dialog-service
sample
http://codepen.io/m-e-conroy/pen/ALsdF
[AngularJS] Pagination 0.10.0 切換事件的event
由於目前使用NG UI-Bootstrap 0.10.0的版本,要注意頁面切換要使用on-select-page這個屬性,才有辦法正確的接收到事件的方法。
The ability to use
ng-model was introduced in ui-bootstrap-tpls-0.11.0.js, as explained in thechangelog:Bothpaginationandpagerare now integrated withngModelController.
*pageis replaced fromng-model.
*on-select-pageis removed sinceng-changecan now be used.
星期一, 6月 23, 2014
[Javascript] bower 如何表示相依性套件版本
bower使用semver的語法來表示相依性套件該安裝哪一個版本
可參考以下的github資訊
Range Styles
The following range styles are supported:
星期日, 6月 22, 2014
[Javascript] 前端工具好用工具清單
為了提升前端程式品質與工作效率,發展了許多好用的工具,在此記錄一下
PMD
可支援javascript原始碼檢測工具,找出重覆的原始碼JSHIT
javascript程式碼品質檢測工具RequireJS
javascript 模組管理工具(可配合r.js進行壓縮)GruntJS
可以把一些任務,透過Grunt來自動化執行,例如測試、JSLint檢查、JS壓縮、less、coffee的編譯等等,可以透過一個指令,就把所有的事情做好。SCSS/SASS
LiveReload
自動刷新頁面的工具Gulp.js
Speed. Efficiency. Simplicity.gulp's use of streams and code-over-configuration makes for a simpler and more intuitive build.
星期六, 6月 21, 2014
[AngularJS] 整合UI-bootstrap alert diretive
將原本的UI-Bootstrap再使用一層AlterService來包裝,使用起來更方便:D
此外也可利用$rootScope.$broadcast事件的方法來統一處理全域的訊息
支援timeout自動關閉訊息
https://coderwall.com/p/r_bvhg
此外也可利用$rootScope.$broadcast事件的方法來統一處理全域的訊息
Directive
<alert ng-repeat="alert in alerts"
type="alert.type"
close="alert.close($index)">{{alert.msg}}</alert>
AlertService Factory
支援timeout自動關閉訊息
app.factory('AlertService', ['$rootScope', '$timeout', '$log',
function($rootScope, $timeout, $log) {
var alertService = this;
$rootScope.alerts = [];
return alertService = {
add: function(type, msg, timeout) {
$rootScope.alerts.push({
type: type,
msg: msg,
close: function() {
return alertService.closeAlert(this);
}
});
if(typeof(timeout) == 'undefined'){
timeout = 5000;
}
if (timeout) {
$timeout(function() {
alertService.closeAlert(this);
}, timeout);
}
},
closeAlert: function(alert) {
$log.log(alert);
return this.closeAlertIdx($rootScope.alerts.indexOf(alert));
},
closeAlertIdx: function(index) {
return $rootScope.alerts.splice(index, 1);
},
clear: function(){
$rootScope.alerts = [];
}
};
}
])
Controller
angular.module('myApp.controllers').controller('LoginCtrl', ['$rootScope','$scope', '$log', 'AuthService', 'AlertService','$location',
function($rootScope, $scope, $log, AuthService, AlertService, $location) {
$log.log('load login page');
$scope.login = function(credentials) {
$log.log('press login button');
$log.log(credentials);
AuthService.login(
credentials, function(data, status, headers, config) {
$log.log('success to call login');
$log.log(data);
if (data.status == 200) {
$log.log('go to default users page');
//go to home
$location.path('/users');
}else if (data.status == 500){
AlertService.add('danger','不正確的帳號或密碼');
}
}, function(data, status, headers, config) {
$log.log('fail to call login');
AlertService.add('danger','伺服器發生錯誤,請重新再試');
});
};
}
]);
https://coderwall.com/p/r_bvhg
[AngularJS] 事件處理機制 $broadcast , $emit , $on 的運作
筆記一下Angularjs的事件處理機制的運作方法:
First of all, parent-child scope relation does matter. You have two possibilities to emit some event:
$broadcast-- dispatches the event downwards to all child scopes,$emit-- dispatches the event upwards through the scope hierarchy.
I don't know anything about your controllers (scopes) relation, but there are several options:
- If scope of
firstCtrlis parent of thesecondCtrlscope, your code should work by replacing$emitby$broadcastinfirstCtrl:function firstCtrl($scope){ $scope.$broadcast('someEvent', [1,2,3]); } function secondCtrl($scope){ $scope.$on('someEvent', function(event, mass) {console.log(mass)}); } - In case there is no parent-child relation between your scopes you can inject
$rootScopeinto the controller and broadcast the event to all child scopes (i.e. alsosecondCtrl).function firstCtrl($rootScope){ $rootScope.$broadcast('someEvent', [1,2,3]); } - Finally, when you need to dispatch the event from child controller to scopes upwards you can use
$scope.$emit. If scope offirstCtrlis parent of thesecondCtrlscope:function firstCtrl($scope){ $scope.$on('someEvent', function(event, data) { console.log(data); }); } function secondCtrl($scope){ $scope.$emit('someEvent', [1,2,3]); }
星期五, 6月 20, 2014
[AngularJS-3rd] UI-Router 控制頁面標題 Page Title
使用UI-Router在切換頁面時,可參考以下範例。
http://plnkr.co/edit/3QEvypXiMglfgwkZsGhV?p=preview
使用$stateProvider的data設定客制化的參數pageTitle,並實作updateTitle directive。
在updateTitle使用 $rootScope.$on監聽 $stateChangeStart 事件。
http://plnkr.co/edit/3QEvypXiMglfgwkZsGhV?p=preview
實作方法
使用$stateProvider的data設定客制化的參數pageTitle,並實作updateTitle directive。
在updateTitle使用 $rootScope.$on監聽 $stateChangeStart 事件。
星期四, 6月 19, 2014
[網站資安] Http Only 保護網站的cookie不被偷取
一般網站常用cookie來記錄使用者的token,重要的cookie請使用http only來做保護。
HttpOnly cookies can in fact be remarkably effective. Here's what we know:
HttpOnly cookies can in fact be remarkably effective. Here's what we know:
- HttpOnly restricts all access to
document.cookiein IE7, Firefox 3, and Opera 9.5 (unsure about Safari) - HttpOnly removes cookie information from the response headers in
XMLHttpObject.getAllResponseHeaders()in IE7. It should do the same thing in Firefox, but it doesn't, because there's a bug. XMLHttpObjectsmay only be submitted to the domain they originated from, so there is no cross-domain posting of the cookies.
星期三, 6月 18, 2014
[AngularJS] angular-logging 類似log4j的功能
如果想讓angular有像log4java這個類似的log功能的話,
可以參考angular-logging這個套件。
https://github.com/aronvaughan/angular-logging
可以參考angular-logging這個套件。
https://github.com/aronvaughan/angular-logging
[Java] httpservletrequest getcontentlength 回傳-1
踩到小雷,使用 httpservletrequest getcontentlength方法時,大於2GB時,由於回傳結果為int,會變-1。
可以改用httpservletrequest getHeader('Content-length')來解決。
可以改用httpservletrequest getHeader('Content-length')來解決。
long contentLen = Long.parseLong(request.getHeader("Content-Length"));
http://stackoverflow.com/questions/7423285/javax-servlet-httpservletrequest-getcontentlength-returns-int-only
星期一, 6月 16, 2014
[AngularJS] $http無法送出 content-type header
踩了一個簡單的雷$http,記錄一下XD
發現$http呼叫API時,無法加入content-type的header。
$http({
url: apiEndpoint,
method: 'GET',
data: '',
headers: {
'Content-Type': 'applicstio/json'
}
}).success(function(data, status, headers, config) {
}).error(function(data, status, headers, config){
});
You need to include a body with the request. Angular removes the content-type header otherwise.
Add
data: '' to the argument to $http.星期五, 6月 13, 2014
[Alfresco] CMIS上傳無法超過4MB
怕以後升級會遇到,先筆記下來
Alfresco versions: 4.2.d (community), 4.2.0 (enterprise).
In the file repository.properties (under WEB-INF/classes/) you can change three properties:
webscripts.tempDirectoryName=WebScripts # 4mb webscripts.memoryThreshold=4194304 # 4gb webscripts.setMaxContentSize=4294967296
The first property webscripts.tempDirectoryName specify the name of subdirectory inside default Temp Dir where Webscript and CMIS will create the temp file when necessary.
The second property webscripts.memoryThreshold specify the threshold value after that Webscript and CMIS use a Temp File to store the content upload instead use of memory buffer.
The third property webscripts.setMaxContentSize specify the maximum size allowed in Alfresco Webscript to manage content file.
訂閱:
意見 (Atom)