angularjs sharing
TRANSCRIPT
ANGULARJS SHARINGTom Chen @ House123
13年10月7⽇日星期⼀一
hihi13年10月7⽇日星期⼀一
Tom ChenFull stack web engineerpython/js/CSS/HTMLPhotoshopLinux/FreeBSD/SQL/AWS
Musickeyboard/vocal
13年10月7⽇日星期⼀一
最近其實都在寫 backend orz
13年10月7⽇日星期⼀一
今天的 sharing 不會太⻑⾧長 orz
13年10月7⽇日星期⼀一
真的不多,所以,有任何問題請直接打斷 XD
13年10月7⽇日星期⼀一
後⾯面留了很多時間交流 :D
13年10月7⽇日星期⼀一
讓我了解⼀一下現場組成...
13年10月7⽇日星期⼀一
Front End Engineer
13年10月7⽇日星期⼀一
Back End Developer
13年10月7⽇日星期⼀一
others?
13年10月7⽇日星期⼀一
我也是初學者
13年10月7⽇日星期⼀一
來跟⼤大家分享⼀一點微薄的經驗
13年10月7⽇日星期⼀一
為什麼會接觸到 AngularJS?
13年10月7⽇日星期⼀一
Pick the BEST solution
13年10月7⽇日星期⼀一
某公司網站,前台後台可以上更新新聞、有⼀一些⾏行事曆
13年10月7⽇日星期⼀一
某公司網站,前台後台可以上更新新聞、有⼀一些⾏行事曆
13年10月7⽇日星期⼀一
某公司網站,前台後台可以上更新新聞、有⼀一些⾏行事曆
⼀一週搞定?
13年10月7⽇日星期⼀一
某公司網站,前台後台可以上更新新聞、有⼀一些⾏行事曆
⼀一週搞定?
13年10月7⽇日星期⼀一
Application over the web?
13年10月7⽇日星期⼀一
Application over the web?
13年10月7⽇日星期⼀一
Application over the web?
load 太慢
13年10月7⽇日星期⼀一
Application over the web?
load 太慢fu 不對
13年10月7⽇日星期⼀一
Application over the web?
13年10月7⽇日星期⼀一
Application over the web?
太 raw
13年10月7⽇日星期⼀一
Application over the web?
太 raw⾃自⼰己刻太多東⻄西
13年10月7⽇日星期⼀一
Application over the web?
13年10月7⽇日星期⼀一
Application over the web?
13年10月7⽇日星期⼀一
A Comparison of Angular, Backbone, CanJS and Emberhttp://sporto.github.io/blog/2013/04/12/comparison-angular-backbone-can-ember/
Is Angular.js or Ember.js the better choice for Javascript frameworks?http://www.quora.com/Client-side-MVC/Is-Angular-js-or-Ember-js-the-better-choice-for-Javascript-frameworks?utm_source=javascriptweekly&utm_medium=email
13年10月7⽇日星期⼀一
碰到最⼤大的問題?
13年10月7⽇日星期⼀一
13年10月7⽇日星期⼀一
Document Sucks!
13年10月7⽇日星期⼀一
Learning Curve 太陡峭
13年10月7⽇日星期⼀一
Learn AngularJS from the besthttp://www.thinkster.io/
13年10月7⽇日星期⼀一
AngularJS Sticky Noteshttp://onehungrymind.com/angularjs-sticky-notes-pt-1-architecture/
13年10月7⽇日星期⼀一
Think in AngularJS!How do I “think in AngularJS” if I have a jQuery background?http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background/15012542#15012542
我記得有⼀一個連結在 github or gist 上,關於這個主題,但我⼀一時之間找不到了
13年10月7⽇日星期⼀一
template 沒有 if else不習慣 orz
<div ng-‐show="showmemos && house.memo.length > 0" class="memos"> <div ng-‐repeat="memo in house.memo" class="memo-‐item"> <div ng-‐show="!memo.edit"> {{ memo.memo }} – <span class="timestamp">{{ memo.create_time }}</span> <ul class="controls"> <li><a href="" ng-‐click="edit_memo(house, memo)">編輯</a></li> <li><a href="" ng-‐click="remove_memo(house, memo)">刪除</a></li> </ul> </div> <div ng-‐show="memo.edit" class="edit"> <textarea ng-‐model="memo.memo" edit-‐focus="memo.id"></textarea> <ul class="controls"> <li><a href="" ng-‐click="cancel_edit_memo(house, memo)">取消</a></li> <li><a href="" ng-‐click="confirm_edit_memo(house, memo)">完成</a></li> </ul> </div> </div></div>
13年10月7⽇日星期⼀一
jQuery 很簡單的,AngularJS 複雜OMG
.directive('ngFocus', function($parse) { return function(scope, element, attrs) { var fn = $parse(attrs['ngFocus']); element.bind('focus', function(event) { scope.$apply(function() { fn(scope, {$event: event}); }); }); };})
<span class="controls"> <input type="text" ng-‐model="facet.custom.from" ng-‐focus="onFocus(facet)" /> -‐ <input type="text" ng-‐model="facet.custom.to" /> {{ facet.unit }} <a class="apply" href="" ng-‐click="applyCustom(facet)">套⽤用</a> <a class="apply" href="" ng-‐click="clearCustom(facet)">清除</a></span>
13年10月7⽇日星期⼀一
django & nginx
djangostatic
3rd_party/angularJS
js/angular
templates
dynamic handlers(ajax handlers, other pages)
nginxstatic
nginxproxy
nginx
13年10月7⽇日星期⼀一
authentication想破頭....
https://github.com/witoldsz/angular-http-auth
Typical use case:
• somewhere the: $http(...).then(function(response) { do-something-with-response }) is invoked,
• the response of that requests is a HTTP 401,• 'http-auth-interceptor' captures the initial request and broadcasts
'event:auth-loginRequired',• your application intercepts this to e.g. show a login dialog (or whatever else),• once your application figures out the authentication is OK, you are to call:
authService.loginConfirmed(),• your initial failed request will now be retried and finally, the do-
something-with-response will fire.
13年10月7⽇日星期⼀一
authentication想破頭....
https://github.com/witoldsz/angular-http-auth
login required 時,直接導到 login pagelogin page might not be AngularJS
13年10月7⽇日星期⼀一
好處?
13年10月7⽇日星期⼀一
two way data binding
13年10月7⽇日星期⼀一
template
13年10月7⽇日星期⼀一
MVC structure
13年10月7⽇日星期⼀一
AngularStraphttp://mgcrea.github.io/angular-strap/
13年10月7⽇日星期⼀一
AngularJS style guidehttps://github.com/mgechev/angularjs-style-guide
13年10月7⽇日星期⼀一
Questions?
13年10月7⽇日星期⼀一