javascript - angularjs应用程序启动: making a reusable module

Question

我正在学习 angularjs 并开发几个应用程序(同时，老板的命令)。

我的所有应用程序都有一些与初始化相关的常见任务，但我不知道如何使这些任务成为可重用模块(是的，也许我是个菜鸟)。我研究了很多，但我只是变得更加困惑。 :(

好吧，这是我需要将其作为 Angular 模块重用的代码。这个想法是这些函数在应用程序执行任何操作之前运行。

/**
 * 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

使用 Angular js Run block 来启动应用程序。还可以使用 $q 服务来使用 Angular js promise ，这与您的完成和失败功能类似。一一解决依赖关系。创建 Angular js 服务或工厂，然后将创建的服务/工厂注入(inject)到主模块运行 block 中，然后调用 step1 函数。在你的中你只需要暴露step1方法。并且您可以将其他功能设置为私有(private)而不公开。

希望下面的示例代码对您有所帮助

      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
    })
  });