Moduł  (Module)

Moduł w AngularJS oznacza zbiór rozwiązań takich jak usługi, dyrektywy, filtry itp. zgrupowanych i wydzielonych w jedną autonomiczną całość. Może być aplikacją samą w sobie lub reprezentować niezależny zbiór komponentów, który następnie można wstrzyknąć do innych modułów. Budowę aplikacji rozpoczynamy zawsze od stworzenia bazowego modułu całej aplikacji. Na przykład jeśli dla aplikacji tworzymy plik index.html o strukturze:
<html ng-app="Appa">
<head>
<meta charset="utf-8">
<title>Appa</title>

...css...

</head>

<body ng-controller="AppCtrl">
    <div ui-view></div>
    
...js...
    
</body>
</html> 
to inicjalizacja modułu aplikacji w Javascript będzie wyglądała tak:
angular.module("Appa", [INNE MODUŁY])
Możemy od razu, bądź w trakcie rozwoju aplikacji - określić (podpiąć) moduły zależne, na przykład:
angular.module('Appa', [ 'auth', 'home', 'appa.form', 'appa.form.preview', ..., 'ui.bootstrap', 'ngFileUpload' ]);
Lista modułów może składać się zarówno z tych, które tworzymy własnoręcznie (na przykład appa.form), jak i z tych które pochodzą z zewnętrznych bibliotek (na przykład ngFileUpload).

Zgodnie z tym co napisaliśmy na samym początku moduł jest podstawową jednostką podziału stanowiącą opakowanie przechowujące inne rozwiązania. Przyjrzyjmy się teraz w jaki sposób możemy te rozwiązania fizycznie podpinać do modułu:
  • Kontrolery

    angular.module(<NAZWA_MODUŁU>).controller(
    <NAZWA_KONTROLERA>, [<WSTRZYKIWANE_ZALEŻNOŚCI>, function(<WSTRZYKIWANE_ZALEŻNOŚCI>) {...}])
    Przykład:
    angular.module('Appa').controller('AppCtrl', ['$scope', ..., function($scope, ...) {} ]);
    
  • Usługi (na przykładzie fabryki)

    angular.module(<NAZWA_MODUŁU>).factory(
    <NAZWA_FABRYKI>, [<WSTRZYKIWANE_ZALEŻNOŚCI>, function(<WSTRZYKIWANE_ZALEŻNOŚCI>) {...}])
    Przykład:
    angular.module('Appa').factory('InvoiceFactory', [ '$http', ..., function($http, ...) {} ]);
    
  • Dyrektywy

    angular.module(<NAZWA_MODUŁU>).directive(
    <NAZWA_DYREKTYWY>, [<WSTRZYKIWANE_ZALEŻNOŚCI>, function(<WSTRZYKIWANE_ZALEŻNOŚCI>) {...}])
    Przykład:
    angular.module('Appa').directive('invoice', [ '$timeout', ..., function($timeout, ...) {} ]);
    
  • Konfiguracje

    angular.module(<NAZWA_MODUŁU>).config(
    [<WSTRZYKIWANE_ZALEŻNOŚCI>, function(<WSTRZYKIWANE_ZALEŻNOŚCI>) {...}])
    Przykład:
    angular.module('Appa').config(['$httpProvider', ...,  function($httpProvider, ...) {} ]);
    
  • Stałe

    angular.module(<NAZWA_MODUŁU>).constant(<NAZWA_STAŁEJ>, <OBIEKT>)
    Przykład:
    angular.module('Appa').constant('AppaConf', {
        confUrl : 'http://localhost:8080/appa'
    });
    
Przedstawiliśmy subiektywną listę najpopularniejszych elementów frameworka, co nie zmienia faktu, że nie wyczerpaliśmy tematu do końca. W celu uzupełnienia wiedzy zapraszamy do odwiedzenia stron z dokumentacją. Jak zwykle odpowiednie linki znajdziecie na końcu rozdziału.
Rekomendacja
W tym miejscu chcielibyśmy zwrócić uwagę na fakt, że każda odrębna funkcjonalność w aplikacji powinna być zamykana w osobnym module. Jeśli tylko to możliwe powinniśmy budować moduły reużywalne. Dobrą praktyką jest również podzielenie kluczowych elementów na osobne pliki przechowywane w folderach (poniżej zestaw plików przykładowego folderu):
  • <NAZWA_KOMPONENTU>-module.js
  • <NAZWA_KOMPONENTU>-controller.js
  • <NAZWA_KOMPONENTU>-factory.js
  • <NAZWA_KOMPONENTU>-directive.js
Używamy w StartAPPa


Aplikacja jest tak napisana, że każdy komponent (Tabela Podstawowa, Formularz Zaawansowany itp...) jest wydzielonym modułem. Pobierając dany komponent dostajecie de facto niezależną aplikację, która - zgodnie z tym co napisaliśmy wyżej w "Naszej rekomendacji" - posiada swój wewnętrzny podział na moduły.
Linki:
https://docs.angularjs.org/api/ng/type/angular.Module

Stale się rozwijamy, a więc bądź na bieżąco!
Na ten adres będziemy przesyłać informacje o ważniejszych aktualizacjach, a także o nowych materiałach pojawiających się na stronie.
Polub nas na Facebooku:
Nasi partnerzy: stackshare
Javappa to również profesjonalne usługi programistyczne oparte o technologie JAVA. Jeśli chesz nawiązać z nami kontakt w celu uzyskania doradztwa bądź stworzenia aplikacji webowej powinieneś poznać nasze doświadczenia.
Kliknij O nas .


Pozycjonowanie stron: Grupa TENSE