Javascript angularjs应用程序启动：创建可重用模块

我正在学习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

---

使用angular js Run块启动应用程序。还可以使用$q服务使用angular js承诺，这类似于您的done和fail函数。逐个解析依赖项。创建服务或工厂，然后在主模块运行块中注入创建的服务/工厂，然后调用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
    })
  });

---

您可以在config和run方法中添加一些启动操作， 但是，在配置阶段，您只能使用提供程序，而不能使用完整服务、控制器等实例

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

app.run(function($rootScope) { 

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

编辑：

---

好的，但是我如何使它在许多应用程序中可重用？修复了它，现在您可以拥有通用模块，您可以将其包含在任何angularjs应用程序中