AngularJS Sharing

759 views

Published on

Published in: Education, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
759
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
23
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

AngularJS Sharing

  1. 1. ANGULARJS SHARING Tom Chen @ House123 13年10月7⽇日星期⼀一
  2. 2. hihi 13年10月7⽇日星期⼀一
  3. 3. Tom Chen Full stack web engineer python/js/CSS/HTML Photoshop Linux/FreeBSD/SQL/AWS Music keyboard/vocal 13年10月7⽇日星期⼀一
  4. 4. 最近其實都在寫 backend orz 13年10月7⽇日星期⼀一
  5. 5. 今天的 sharing 不會太⻑⾧長 orz 13年10月7⽇日星期⼀一
  6. 6. 真的不多,所以,有任何問題 請直接打斷 XD 13年10月7⽇日星期⼀一
  7. 7. 後⾯面留了很多時間交流 :D 13年10月7⽇日星期⼀一
  8. 8. 讓我了解⼀一下現場組成... 13年10月7⽇日星期⼀一
  9. 9. Front End Engineer 13年10月7⽇日星期⼀一
  10. 10. Back End Developer 13年10月7⽇日星期⼀一
  11. 11. others? 13年10月7⽇日星期⼀一
  12. 12. 我也是初學者 13年10月7⽇日星期⼀一
  13. 13. 來跟⼤大家分享⼀一點微薄的經驗 13年10月7⽇日星期⼀一
  14. 14. 為什麼會接觸到 AngularJS? 13年10月7⽇日星期⼀一
  15. 15. Pick the BEST solution 13年10月7⽇日星期⼀一
  16. 16. 某公司網站,前台後台 可以上更新新聞、有⼀一些⾏行事曆 13年10月7⽇日星期⼀一
  17. 17. 某公司網站,前台後台 可以上更新新聞、有⼀一些⾏行事曆 13年10月7⽇日星期⼀一
  18. 18. 某公司網站,前台後台 可以上更新新聞、有⼀一些⾏行事曆 ⼀一週搞定? 13年10月7⽇日星期⼀一
  19. 19. 某公司網站,前台後台 可以上更新新聞、有⼀一些⾏行事曆 ⼀一週搞定? 13年10月7⽇日星期⼀一
  20. 20. Application over the web? 13年10月7⽇日星期⼀一
  21. 21. http://houz.tw 13年10月7⽇日星期⼀一
  22. 22. Application over the web? 13年10月7⽇日星期⼀一
  23. 23. Application over the web? load 太慢 13年10月7⽇日星期⼀一
  24. 24. Application over the web? load 太慢 fu 不對 13年10月7⽇日星期⼀一
  25. 25. Application over the web? 13年10月7⽇日星期⼀一
  26. 26. Application over the web? 太 raw 13年10月7⽇日星期⼀一
  27. 27. Application over the web? 太 raw ⾃自⼰己刻太多東⻄西 13年10月7⽇日星期⼀一
  28. 28. Application over the web? 13年10月7⽇日星期⼀一
  29. 29. Application over the web? 13年10月7⽇日星期⼀一
  30. 30. A Comparison of Angular, Backbone, CanJS and Ember http://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⽇日星期⼀一
  31. 31. 碰到最⼤大的問題? 13年10月7⽇日星期⼀一
  32. 32. 13年10月7⽇日星期⼀一
  33. 33. Document Sucks! 13年10月7⽇日星期⼀一
  34. 34. Learning Curve 太陡峭 13年10月7⽇日星期⼀一
  35. 35. Learn AngularJS from the best http://www.thinkster.io/ 13年10月7⽇日星期⼀一
  36. 36. AngularJS Sticky Notes http://onehungrymind.com/angularjs-sticky-notes-pt-1-architecture/ 13年10月7⽇日星期⼀一
  37. 37. 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⽇日星期⼀一
  38. 38. 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⽇日星期⼀一
  39. 39. 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⽇日星期⼀一
  40. 40. django & nginx django static 3rd_party/angularJS js/angular templates dynamic handlers (ajax handlers, other pages) nginx static nginx proxy nginx 13年10月7⽇日星期⼀一
  41. 41. 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⽇日星期⼀一
  42. 42. authentication 想破頭.... https://github.com/witoldsz/angular-http-auth login required 時,直接導到 login page login page might not be AngularJS 13年10月7⽇日星期⼀一
  43. 43. 好處? 13年10月7⽇日星期⼀一
  44. 44. two way data binding 13年10月7⽇日星期⼀一
  45. 45. template 13年10月7⽇日星期⼀一
  46. 46. MVC structure 13年10月7⽇日星期⼀一
  47. 47. AngularStrap http://mgcrea.github.io/angular-strap/ 13年10月7⽇日星期⼀一
  48. 48. AngularJS style guide https://github.com/mgechev/angularjs-style-guide 13年10月7⽇日星期⼀一
  49. 49. Questions? 13年10月7⽇日星期⼀一

×