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