Question

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

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

嗯，这是我需要作为角度模块重用的代码。我们的想法是在应用程序执行任何操作之前运行这些函数。

/**
 * 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块来kickstart应用程序。还可以使用$ q服务来使用angular js promises，这类似于你的完成和失败函数。逐个解决依赖关系。创建角度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

您可以在＆＃34; config＆＃34;中添加一些启动操作。并且＆＃34;运行＆＃34;方法，然而，在＆＃34; config＆＃34;阶段你只能使用提供者，而不是全服务，控制器等实例。

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

app.run(function($rootScope) { 

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

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

angularjs应用程序启动：制作可重复使用的模块

2 个答案: