AngularJS Sharing
1 like924 views
本次分享由全栈网络工程师汤晨主讲，重点介绍了AngularJS的基本概念和实践经验。参与者包括前后端工程师，讨论了AngularJS的优缺点和学习曲线，分享了相关资源和最佳实践。最终，参与者对Web应用程序的性能和数据绑定特性进行了交流和提问。
![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⽇日星期⼀一](https://image.slidesharecdn.com/angularjs-131007015025-phpapp02/85/AngularJS-Sharing-39-320.jpg)
AngularJS Sharing
- 1. ANGULARJS SHARING Tom Chen @ House123 13年10月7⽇日星期⼀一
- 3. Tom Chen Full stack web engineer python/js/CSS/HTML Photoshop Linux/FreeBSD/SQL/AWS Music keyboard/vocal 13年10月7⽇日星期⼀一
- 5. 今天的 sharing 不會太⻑⾧長 orz 13年10月7⽇日星期⼀一
- 15. Pick the BEST solution 13年10月7⽇日星期⼀一
- 20. Application over the web? 13年10月7⽇日星期⼀一
- 22. Application over the web? 13年10月7⽇日星期⼀一
- 23. Application over the web? load 太慢 13年10月7⽇日星期⼀一
- 24. Application over the web? load 太慢 fu 不對 13年10月7⽇日星期⼀一
- 25. Application over the web? 13年10月7⽇日星期⼀一
- 26. Application over the web? 太 raw 13年10月7⽇日星期⼀一
- 27. Application over the web? 太 raw ⾃自⼰己刻太多東⻄西 13年10月7⽇日星期⼀一
- 28. Application over the web? 13年10月7⽇日星期⼀一
- 29. Application over the web? 13年10月7⽇日星期⼀一
- 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⽇日星期⼀一
- 32. 13年10月7⽇日星期⼀一
- 35. Learn AngularJS from the best http://www.thinkster.io/ 13年10月7⽇日星期⼀一
- 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. 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. 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. 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. 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. authentication 想破頭.... https://github.com/witoldsz/angular-http-auth login required 時，直接導到 login page login page might not be AngularJS 13年10月7⽇日星期⼀一
- 44. two way data binding 13年10月7⽇日星期⼀一