Используем RequireJS и AngularJS вместе

require-angular

Хотя и RequireJS и AngularJS используют Dependency Injections и могут делить функционал на модули, эти фреймворки созданы для абсолютно разных целей. RequireJS нужен для асинхронной загрузки скриптов и установления зависимостей между модулями. AngularJS — фреймворк для создания SPA. Мне нравится их совместное использование и ниже я приведу пример как это можно сделать.

Например нам надо создать спиннер, который появляется при http запросах. Это можно сделать с помощью Interceptors, для большей гибкости я создам сервис:

[codesyntax lang=»javascript»]

(function () {
	'use strict';

	define(function () {
		var loadingSpinnerService = function ($filter, $q) {
			var that = this,
				loadingObjects = [];

			var LoadingObject = function (promise, message) {
				this.promise = promise;
				this.message = message;
			};

			function setLoadingData(isShow, message) {
				that.data.isShow = isShow;
				that.data.message = message;
			}

			function updateLoadingSpinner() {
				var isShow = !!loadingObjects.length,
					message = null,
					fullLoadingObjects;

				if (isShow) {
					fullLoadingObjects = $filter('filter')(loadingObjects, function (value) {
						return value.message != null;
					});
					if (fullLoadingObjects.length) {
						message = fullLoadingObjects[0].message;
					}
				}
				setLoadingData(isShow, message);
			}

			function removeLoadingObject(loadingObject) {
				loadingObjects = $filter('filter')(loadingObjects, function (value) {
					return value.message !== loadingObject.message;
				});
			}

			function init() {
				that.data = {};
				setLoadingData(false, null);
			}

			/**
			 * Shows Loader Spinner and hides it when promise is resolved or rejected
			 * @param {(Promise|Promise[])} promise
			 * @param {string} [message]
			 */
			this.show = function (promise, message) {
				if (angular.isArray(promise)) {
					promise = $q.all(promise);
				}

				var loadingObject = new LoadingObject(promise, message);

				loadingObjects.push(loadingObject);

				updateLoadingSpinner();

				promise.finally(function () {
					removeLoadingObject(loadingObject);
					updateLoadingSpinner();
				});
			}

			init();

		};

		return ["$filter", "$q", loadingSpinnerService];
	});

}());

[/codesyntax]

Директива:

[codesyntax lang=»javascript»]

(function () {
	'use strict';

	define(function () {
		var loadingSpinnerDirective = function (loadingSpinnerService) {
			return {
				restrict: 'E',
				transclude: true,
				templateUrl: 'Shared/loadingSpinner/loadingSpinnerTemplate.html',
				link: function (scope) {
					scope.defaultMessage = 'Please Wait';
					scope.data = loadingSpinnerService.data;
				}
			}
		};

		return ["loadingSpinnerService", loadingSpinnerDirective];
	});

}());

[/codesyntax]

Сам шаблон:

[codesyntax lang=»html4strict»]

<div ng-if='data.isShow' class='loading-spinner'>
    <div>
        <div class='k-loading-image'></div>
        {{data.message ? data.message : defaultMessage}}
    </div>
</div>

[/codesyntax]

И собственно код самого модуля:

[codesyntax lang=»javascript»]

(function () {
	'use strict';

	var dependencies = [
        './loadingSpinnerDirective',
		'./loadingSpinnerService'
	];

	define(dependencies, function (loadingSpinnerDirective, loadingSpinnerService) {
		angular.module('loadingSpinner', [])
            .service("loadingSpinnerService", loadingSpinnerService)
            .directive("loadingSpinner", loadingSpinnerDirective);
	});

}());

[/codesyntax]

Запись опубликована в рубрике JavaScript/JQuery с метками , . Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *