angularjs應用程序引導：製作可重用模塊

Question

我正在學習angularjs和開發幾個應用程序（同時，老闆的命令）。我的所有應用程序都有一些與初始化有關的常見任務，但我不知道如何使這些任務成爲可重用模塊（是的，也許我是一個noob）。我研究了很多，但我只是更困惑。 :(

好了，這裏是我需要可重用的角度模塊的代碼。我們的想法是，應用程序之前運行這些功能做任何事情。

/** 
* INITIALIZATION - STEP 1 - This is the entry point 
* @param {function} callback 
* @returns {undefined} 
*/ 
function runApplication(callback) { 
    showLoadingBar(); 
    $.getJSON("myUrl").done(function (data) { 
     // do stuf, with error verification, then... 
     step2(callback, data); 
    }).fail(function() { 
     showCriticalErrorMessage("foo"); 
     hideLoadingBar(); 
    }); 
} 

/** 
* INITIALIZATION - STEP 2 
* @param {function} callback 
* @param {object} whateverData 
* @returns {undefined} 
*/ 
function step2(callback, whateverData) { 
    // do stuff with whateverData, with error verification, then... 
    $.ajax({ 
     "url": "myOtherUrl", 
     "type": "GET", 
     "dataType": "json", 
     "contentType": "application/json; charset=utf-8" 
    }).done(function (data) { 
     // do stuff with data, with error verification, then... 
     step3(callback); 
    }).fail(function() { 
     showCriticalErrorMessage("bar"); 
     hideLoadingBar(); 
    }); 
} 

/** 
* INITIALIZATION STEP 3 
* @param {function} callback 
* @returns {undefined} 
*/ 
function step3(callback) { 
    $.ajax({ 
     "url": "justOtherUrl", 
     "type": "GET", 
     "dataType": "json", 
     "contentType": "application/json; charset=utf-8" 
    }).done(function (data) { 
     // do stuff with data, with error verification, then... 
     step4(callback); 
    }).fail(function() { 
     showCriticalErrorMessage("baz"); 
     hideLoadingBar(); 
    }); 
} 

/** 
* INITIALIZATION STEP 4 
* @param {function} callback 
* @returns {undefined} 
*/ 
function step4(callback) { 
    $.ajax({ 
     "url": "anotherUrl", 
     "type": "GET", 
     "dataType": "json", 
     "contentType": "application/json; charset=utf-8" 
    }).done(function (data) { 
     callback(); 
     hideLoadingBar(); 
    }).fail(function() { 
     showCriticalErrorMessage("qux"); 
     hideLoadingBar(); 
    }); 
} 

// then i need to call step1 inside some controller 

Answer 1

使用角度JS運行塊與Kickstart應用程序，並使用$ q服務來使用角度js promise，它類似於已完成和失敗的函數，逐個解決依賴關係：創建角度js服務或工廠，然後將創建的服務/工廠注入主模塊運行塊，然後調用step1的功能，你只需要暴露step1的方法，而且你可以在不暴露的情況下將其他功能作爲私有功能使用

我希望下面的示例代碼將幫助您

 angular.module('service', []) 
    .factory('initialize', function ($http, $q) { 
    var step1 = function (url, config) { 
     //$q is the angular js service to create promise 
     var defer = $q.deferred 
     $http.get(ur, config). 
     then(function (data) { 
      step2(data).then(function (data) { 
      step3(data).then(function() { 
       //resolve the dependency 
       defer.resolve(); 
      }, function() { 

      }) 
      }, function() { 
      //handle error case 
      }) 
     }, function() { 
      //handle the error case 
     }); 
     //return the promise 
     return defer.promise; 
    }; 
    var step2 = function() { 
     //which basically returns the promise 
     return $http.get(ur, config); 
    } 
    var step3 = function() { 
     //which basically returns the promise 
     return $http.get(ur, config); 
    } 
    return { 
     //expose the step1 to access in controller 
     step1: step1 
    } 
    }); 

//then your controller or run block 

angular.module('main') 
    .run(function (initialize) { 
    initialize.step1(url, config).then(function() { 
     //success fully bootstrapped 
    }, function() { 
     //Failed to Initialize 
    }) 
    }); 

Answer 2

您可以在「配置」和「跑」的方法， 添加一些啓動操作然而，在「配置」階段，你可以只使用供應商，而不是全面的服務，控制器等實例。

var app = angular.module("app", []); 

app.run(function($rootScope) { 

    console.log("this runs after config"); 
}); 
app.config(function(){ 
    console.log("this runs first"); 
}); 

編輯： http://plnkr.co/edit/5nxUDkrNMpIRUaoriryn?p=preview