iT邦幫忙

DAY 4
1

我在前端 ng 時系列 第 4

AngularJS - MVC 架構 - DEMO

今天放鬆點,DEMO 有 MVC 架構的簡單 AngularJS 範例。

強烈建議先看上一篇 AngularJS - MVC 架構


需求: 幫可愛雪納瑞換名字的網站。

先把 MVC 定好,配上昨天文章的圖:(紅色文字是 DEMO 的 module 名稱 )

Model: dogService

  • 從假想資料庫中撈取跟更新資料

    app.service('dogService', function ($q, $timeout){
    var service = this,
    // 沒有真實後端, 先把資料寫死
    dog = {
    name: 'gucci',
    sex: 'F',
    food: '蘋果麥片小餅乾'
    };

     this.getDogInfo = function () {
         var d = $q.defer();
         $timeout(function () {
             d.resolve(dog);
         }, 300);
         return d.promise;
     }
    
     this.updateDogName = function (newName) {
         var d = $q.defer();     
         // 模擬 http call, 用 $timeout 等兩秒後回傳
         $timeout(function () {
             dog.name = newName;
             d.resolve(dog);
         }, 2000);
         return d.promise;
     }
    

    });

Controller: NamingCtrl

  • 從 dogService 中撈取資料,準備好給 view (Model 跟 View 中間的橋樑)

  • 有可讓 使用者幫狗更名的 method,幫呼叫 service 更新資料庫 (使用者互動邏輯)

    app.controller('NamingCtrl', function ($scope, dogService) {
    // 使用 'Controller as' syntax
    var naming = this;
    // 控制 loading 顯示,初始化資料
    naming.isLoading = true;
    naming.newName = '';

     // 取得狗狗資料,初始化資料
     dogService.getDogInfo().then(function (data) {
         naming.dog = data;
         naming.isLoading = false;
     }); 
    
     // 更新狗狗名稱
     naming.updateName = function () {
         if (naming.newName) {
             naming.isLoading = true;
             // 呼叫 Model 層的 Service
             dogService.updateDogName(naming.newName).then(function (data){
                 naming.dog.name = data.name;
                 naming.isLoading = false;
             });
         }
     }
    

    });

View: index.html

  • 顯示 NamingCtrl 中存的 data (Naming.dog.food)

  • HTML 搭配簡單邏輯 (ng-click & ng-model - two way binding))

jsfiddle 範例:http://jsfiddle.net/3duj5sqy/2/


上一篇
AngularJS - MVC 架構
下一篇
相見恨晚 - Lo-Dash
系列文
我在前端 ng 時30

尚未有邦友留言

立即登入留言