Upgrade to Pro — share decks privately, control downloads, hide ads and more …

spa需注意的議題.pdf

blue chen
October 28, 2013
660

 spa需注意的議題.pdf

blue chen

October 28, 2013
Tweet

Transcript

  1. $npm yo angualr 建⽴立⼀一個Angualr SPA $grunt server yeoman開發模式(LiveReload) yeoman產品線模式 $grunt

    build Minify your file(css, html ,js...) $grunt Include other js lib bower install _______
  2. GET /issue/?userid=234234 HTTP/1.1 HOST:127.0.0.1 User-Agent:Mozilla/5.0 (Windows; U; Windows NT 5.1;

    zh-CN; rv:1.9.0.8) Gecko/2009032609 Firefox/3.0.8 Connection: Keep-Alive POST /index.php HTTP/1.1(CRLF) HOST:127.0.0.1 User-Agent:Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.9.0.8) Gecko/2009032609 Firefox/3.0.8 Content-Type: application/x-www-form-urlencoded Content-Length:22(CRLF) Connection: Keep-Alive Cache-Control:no-cache(CRLF) (CRLF) user=234&pws=hihing GET: POST:
  3. .factory('newPost',function($resource){ return $resource("http://127.0.0.1:port/api/buildpage" , {port: ':3000'}); }) newPost.save({ 'title': this.newPostTitle,

    'content': this.newPostContent, 'tag':this.newPostTag },function(e) { console.log(e); },function(response){ }) controller A newPost.get({ },function(e) { },function(response){ }) controller B $resouce把$http 封裝好
  4. ng-bind-html-unsafe ng-bind ng-bind-html include $sanitize $scope.imgurl = ‘<img src=”/img/youmeb.png”/>’; <div

    ng-bind="imgurl"></div> Output: 字串 Output: 圖⽚片 因為你相信這段程式碼,所以賦予直接執⾏行的需求 $scope.imgurl = ‘<img src=”/img/youmeb.png”/>’; <div ng-bind-html="imgurl"></div>
  5. ng-bind-html-unsafe ng-bind ng-bind-html include $sanitize $scope.imgurl = ‘<img src=”/img/youmeb.png”/>’; <div

    ng-bind="imgurl"></div> Output: 字串 Output: 圖⽚片 因為你相信這段程式碼,所以賦予直接執⾏行的需求 $scope.imgurl = ‘<img src=”/img/youmeb.png”/>’; <div ng-bind-html="imgurl"></div>
  6. ng-bind-html-unsafe was remove at angular 1.2+ If you want to

    do same as this Try $sce http://docs.angularjs.org/api/ng.$sce http://stackoverflow.com/questions/18340872/how-do-you-use-sce- trustashtmlstring-to-replicate-ng-bind-html-unsafe-in-angu
  7. user2131323123 這是標題標題 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容

    這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 點我看詳情 cracker可以設計⼀一個⾴頁⾯面讓 user2131323123 他開啟網⾴頁 http://test.tw/user2131323123/post/2013_10_28a/delete 傳統的驗證,⽐比如說只驗session.cookie...因為user這時已登⼊入,完全通過驗證,當cracker故意 讓user無意間執⾏行這些api時,就會產⽣生有害結果。 你無法⾼高度確認這隻API請求是否來⾃自user
  8. Server Server nonce Browser hash(Server nonce , Clien nonce ,

    password) (login page) username access token step1 step2 step3 check step4 hash(Server nonce , Clien nonce , password) hash(Server nonce , Clien nonce , password) 之後每⼀一次request只要丟回access token即可
  9. .run(function($http,$cookies,$rootScope,$location){ }); .config(function(){ }); //Use this method to register work

    which needs to be performed on module loading. 因此,跟系統有關的相關服務配置都放在這ex. 判斷是否login only provider,constant
  10. var interceptor = function($rootScope,$location,$q){ var success = function(response){ if(sessionStorage.authenticated ==

    'true'){ if(sessionStorage.lasturl && $location.path() != '/login'){ $location.path(sessionStorage.lasturl); } if($location.path() == '/login'){ $location.path(sessionStorage.lasturl); } }else{ $location.path('/login'); } return response } var error = function(response){ if (!sessionStorage.authenticated && sessionStorage.authenticated != true){ delete sessionStorage.authenticated; $location.path('/login'); } return $q.reject(response) } return function(promise){ return promise.then(success, error) } }; $httpProvider.responseInterceptors.push(interceptor);
  11. .run(function($http,$cookies,$rootScope,$location){ $rootScope.adminuser = sessionStorage.username; }); .config(function(){ }); //Use this method

    to register work which needs to be performed on module loading. //Use this method to register work which should be performed when the injector is done loading all modules.通常都是最後⼀一個開始執⾏行 因此,跟系統有關的相關服務配置都放在這ex. 判斷是否login only provider,constant not provider 常⾒見的配置:因為login所以我們的Username為....
  12. Html +css 模組化 ng-hide ng-show ng-class ng-animate AngularJS⾃自⾝身的模組化api <div ng-show=”showit”></div>

    <div ng-class=”showit? ‘see ‘:’ ’”></div> $Scope.showit =true; http://slid.es/gsklee/animation-in-angularjs 但是 ... 這些還不夠! ng-include Include Html Template ng-view