第一次寫SPA就上手

By AngularJS


OutLine

  1. 什麼是SPA(Single Page Application)
  2. 使用jQuery與AngularJS開發的差異
  3. 透過SPA開發範例,講解AngularJS運作模式

什麼是SPA

透過JS動態更換網頁上的內容
達到使用者不需要換頁就可以瀏覽整個網站的網站架構



為什麼要SPA


有什麼好處?!

  1. 所有資源不需要重新載入
  2. 每次只需傳輸更新部分畫面的資料,所占資源較少
  3. 使用者體驗較好

    4. !!

    典型的SPA網站



    一切聽起來都相當美


    怎麼開發SPA
    就用熱血、男人與
    手刻的浪漫吧!!

    那些年我硬上的jQuery?!




    開發都不會遇到問題嗎?



    DOM Manipulation, History



    DOM Manipulation, History

    Module Loading, Routing



    DOM Manipulation, History

    Module Loading, Routing

    Caching, Object Modeling



    DOM Manipulation, History

    Module Loading, Routing

    Caching, Object Modeling

    Data Binding, Ajax/Promises



     

    SEO

    DOM Manipulation, History

    Module Loading, Routing

    Caching, Object Modeling

    Data Binding, Ajax/Promises

    View Loading

    彷彿難以跨越的高牆

    在高的牆

    都有更高的巨人來破門


    終於要講正題了吧!!


    AnuglarJS 五大特點

    1. 雙向綁定
    2. 使用模板
    3. MVC
    4. 依賴注入
    5. Directive
    6. Testing?!

    使用jQuery與Angularjs的差異


    但...

    用jQuery來對比AngularJS

    根本不合理


    一個是協助你操作DOM的JS Library

    一個是開發網站的JS Framework

    重點是開發的思維完全反轉


    jQuery

    控制你的DOM是很簡單的
    但控制你的程式碼變成很困難

    AngularJS

    大部分時間只要控制Model以及View的配合

    學習AngularJS


    別讓過去的jQuery開發經驗限制了你的極限




    DEMO


    http://jsbin.com/ksdg-2WayBinding/1/edit

    DEMO


    http://jsbin.com/uhabed/33/edit

    SPA 

    Step By Step


    讓我們來打造一個簡單的SPA Blog

    1. 列表頁
    2. 內容頁
    3. 編輯頁

    Demo Time


    http://plnkr.co/edit/g2YlrAIHJZtBYE6weLGc

    Q & A

    感謝收聽