49

AngularJS Sharing

Embed Size (px)

Citation preview

Page 1: AngularJS Sharing

ANGULARJS SHARINGTom Chen @ House123

13年10月7⽇日星期⼀一

Page 2: AngularJS Sharing

hihi13年10月7⽇日星期⼀一

Page 3: AngularJS Sharing

Tom ChenFull stack web engineerpython/js/CSS/HTMLPhotoshopLinux/FreeBSD/SQL/AWS

Musickeyboard/vocal

13年10月7⽇日星期⼀一

Page 4: AngularJS Sharing

最近其實都在寫 backend orz

13年10月7⽇日星期⼀一

Page 5: AngularJS Sharing

今天的 sharing 不會太⻑⾧長 orz

13年10月7⽇日星期⼀一

Page 6: AngularJS Sharing

真的不多,所以,有任何問題請直接打斷 XD

13年10月7⽇日星期⼀一

Page 7: AngularJS Sharing

後⾯面留了很多時間交流 :D

13年10月7⽇日星期⼀一

Page 8: AngularJS Sharing

讓我了解⼀一下現場組成...

13年10月7⽇日星期⼀一

Page 9: AngularJS Sharing

Front End Engineer

13年10月7⽇日星期⼀一

Page 10: AngularJS Sharing

Back End Developer

13年10月7⽇日星期⼀一

Page 11: AngularJS Sharing

others?

13年10月7⽇日星期⼀一

Page 12: AngularJS Sharing

我也是初學者

13年10月7⽇日星期⼀一

Page 13: AngularJS Sharing

來跟⼤大家分享⼀一點微薄的經驗

13年10月7⽇日星期⼀一

Page 14: AngularJS Sharing

為什麼會接觸到 AngularJS?

13年10月7⽇日星期⼀一

Page 15: AngularJS Sharing

Pick the BEST solution

13年10月7⽇日星期⼀一

Page 16: AngularJS Sharing

某公司網站,前台後台可以上更新新聞、有⼀一些⾏行事曆

13年10月7⽇日星期⼀一

Page 17: AngularJS Sharing

某公司網站,前台後台可以上更新新聞、有⼀一些⾏行事曆

13年10月7⽇日星期⼀一

Page 18: AngularJS Sharing

某公司網站,前台後台可以上更新新聞、有⼀一些⾏行事曆

⼀一週搞定?

13年10月7⽇日星期⼀一

Page 19: AngularJS Sharing

某公司網站,前台後台可以上更新新聞、有⼀一些⾏行事曆

⼀一週搞定?

13年10月7⽇日星期⼀一

Page 20: AngularJS Sharing

Application over the web?

13年10月7⽇日星期⼀一

Page 21: AngularJS Sharing

http://houz.tw

13年10月7⽇日星期⼀一

Page 22: AngularJS Sharing

Application over the web?

13年10月7⽇日星期⼀一

Page 23: AngularJS Sharing

Application over the web?

load 太慢

13年10月7⽇日星期⼀一

Page 24: AngularJS Sharing

Application over the web?

load 太慢fu 不對

13年10月7⽇日星期⼀一

Page 25: AngularJS Sharing

Application over the web?

13年10月7⽇日星期⼀一

Page 26: AngularJS Sharing

Application over the web?

太 raw

13年10月7⽇日星期⼀一

Page 27: AngularJS Sharing

Application over the web?

太 raw⾃自⼰己刻太多東⻄西

13年10月7⽇日星期⼀一

Page 28: AngularJS Sharing

Application over the web?

13年10月7⽇日星期⼀一

Page 29: AngularJS Sharing

Application over the web?

13年10月7⽇日星期⼀一

Page 31: AngularJS Sharing

碰到最⼤大的問題?

13年10月7⽇日星期⼀一

Page 32: AngularJS Sharing

13年10月7⽇日星期⼀一

Page 33: AngularJS Sharing

Document Sucks!

13年10月7⽇日星期⼀一

Page 34: AngularJS Sharing

Learning Curve 太陡峭

13年10月7⽇日星期⼀一

Page 35: AngularJS Sharing

Learn AngularJS from the besthttp://www.thinkster.io/

13年10月7⽇日星期⼀一

Page 36: AngularJS Sharing

AngularJS Sticky Noteshttp://onehungrymind.com/angularjs-sticky-notes-pt-1-architecture/

13年10月7⽇日星期⼀一

Page 37: AngularJS Sharing

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⽇日星期⼀一

Page 38: AngularJS Sharing

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⽇日星期⼀一

Page 39: AngularJS Sharing

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⽇日星期⼀一

Page 40: AngularJS Sharing

django & nginx

djangostatic

3rd_party/angularJS

js/angular

templates

dynamic handlers(ajax handlers, other pages)

nginxstatic

nginxproxy

nginx

13年10月7⽇日星期⼀一

Page 41: AngularJS Sharing

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⽇日星期⼀一

Page 42: AngularJS Sharing

authentication想破頭....

https://github.com/witoldsz/angular-http-auth

login required 時,直接導到 login pagelogin page might not be AngularJS

13年10月7⽇日星期⼀一

Page 43: AngularJS Sharing

好處?

13年10月7⽇日星期⼀一

Page 44: AngularJS Sharing

two way data binding

13年10月7⽇日星期⼀一

Page 45: AngularJS Sharing

template

13年10月7⽇日星期⼀一

Page 46: AngularJS Sharing

MVC structure

13年10月7⽇日星期⼀一

Page 47: AngularJS Sharing

AngularStraphttp://mgcrea.github.io/angular-strap/

13年10月7⽇日星期⼀一

Page 48: AngularJS Sharing

AngularJS style guidehttps://github.com/mgechev/angularjs-style-guide

13年10月7⽇日星期⼀一

Page 49: AngularJS Sharing

Questions?

13年10月7⽇日星期⼀一