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

Zapisz się do newslettera :

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 .

Starter Jak to działa Aplikacja

Obserwuj nas Polityka Cookies Regulamin Licencja Ochrona prywatności

Pozycjonowanie stron: Grupa TENSE