Struktura i organizacja plików

Struktura i organizacja plików

 

Może być kuszące, dla uproszczenia, umieszczenie wszystkiego w jednym pliku lub zorganizowanie każdego pliku według typu. Na przykład wszystkie kontrolery w jednym pliku, wszystkie komponenty w innym pliku, wszystkie usługi w trzecim pliku i tak dalej. Może się wydawać, że działa dobrze na początku, ale wraz z rozwojem aplikacji staje się ciężarem do utrzymania. W miarę dodawania kolejnych funkcji nasze pliki będą coraz większe, a nawigacja i wyszukiwanie kodu, którego szukamy, będzie trudna.

Zamiast tego powinniśmy umieścić każdą funkcję / encję w jej własnym pliku. Każdy samodzielny kontroler zostanie zdefiniowany we własnym pliku, każdy komponent zostanie zdefiniowany we własnym pliku itp.

Organizuj kod według funkcjonalności.

Teraz, gdy dowiedzieliśmy się, że powinniśmy umieścić wszystko w swoim pliku, nasza aplikacja / katalog wkrótce będzie pełna z dziesiątek plików. Co ważniejsze, logicznie powiązane pliki nie zostaną zgrupowane, więc będzie bardzo trudno zlokalizować te związane z określoną sekcją aplikacji i dokonać zmiany lub naprawić błąd.

Dlatego dobrze jest dzielić pliki na funkcjonalności, dla przykładu może to być lista produktów w sklepie, wyszukiwarka, logowanie użytkownika, rejestracja użytkownika itp.

Jak już wspomniano, jedną z zalet posiadania modułowej architektury jest ponowne użycie kodu - nie tylko w tej samej aplikacji, ale także w różnych aplikacjach. Żeby dostosować nasz kod do tego stylu powinniśmy każdą funkcjonalność określić jako oddzielny moduł w naszej aplikacji.

Więc przyjrzyjmy się teraz przykładowemu katalogowi z komponentem:

 

app/

/lista-telefonow

lista-telefonow.module.js

lista-telefonow.component.js

app.module.js

 

Zerknijmy teraz do środka plików:

 

lista-telefonow.module.js

angular.module('listaTelefonow', []);

lista-telefonow.component.js

angular.module('listaTelefonow').component('listaTelefonow');

app.module.js

angular.module('app'‚ [ 'listaTelefonow'] )

 

Czyli stworzyliśmy teraz nowy moduł który odpowiada tylko za kod danej funkcjonalności. Następnie podpięliśmy go do głównego modułu z naszą aplikacją w plik app.module.js

Więc w jaki sposób zapisać widok dla tego komponentu w katalogu z daną funkcjonalnością? Po prostu tworząc plik z rozszerzeniem html:

 

app/

/lista-telefonow

lista-telefonow.module.js

lista-telefonow.component.js

lista-telefonow.template.html

app.module.js

 

Aby teraz podpiąć ten widok do komponentu wykorzystamy właściowość templateUrl, którą możemy ustawić w komponencie.

 

lista-telefonow.component.js

angular

.module('listaTelefonow')

.component('listaTelefonow', {

templateUrl: 'lista-telefonow/lista-telefonow.template.html',

controller: …

});

 

Filtrowanie wyników dyrektywy ng-repeat

Przejdźmy teraz do prostszej tematyki związanej z filtrowaniem wyników dyrektywy ng-repeat. Można powiedzieć że ta dyrektywa to pętla po stronie kodu html. Zobaczmy przykład:

 

angular.module('app', []);

angular.module('app').controller('TestowyCtrl', function ($scope) {

$scope.lista = [

{

nazwa: 'Element 3',

opis: '4. Lorem ipsum...'

},

{

nazwa: 'Element 2',

opis: '6. Lorem ipsum...'

},

{

nazwa: 'Element 5',

opis: '2. Lorem ipsum...'

}

];

});

 

Na podstawie tego kontrolera, możemy teraz wykonać pętle która będzie pokazywała elementy ze zmiennej lista podpiętej do $scope.

 

<div ng-controller="TestowyCtrl">

<ul>

<li ng-repeat="element in lista">

<p><strong>{{element.nazwa}}</strong></p>

<p>{{element.opis}}</p>

</li>

</ul>

</div>

 

Następujący kod powinien wyświetlić następującą wartość w przeglądarce:

Dodajmy kolejną rzecz, czyli filtrowanie tej pętli na podstawie wartości którą wprowadzimy w input. Po pierwsze powinniśmy stworzyć inputa i dodać mu jakąś zmienną pod którą będziemy mieli tą konkretną wartość:

 

<input ng-model="$ctrl.wartosc" />

 

Na podstawie tej wartości utworzymy filtr w naszej listy:

 

<li ng-repeat="element in lista | filter:$ctrl.wartosc">

 

Teraz za każdym wprowadzeniem jakiejś wartości nasza lista zostanie przefiltrowana w taki sposób by poszczególne elementy pasowały do wyniku.

Skoro zaimplementowaliśmy filtrowanie, spróbujmy również z sortowaniem. Dodajmy więc do naszego htmla kod ze znacznikiem select, który na podstawie wybranej wartości będzie sortował wynik:

 

<select ng-model="$ctrl.kolejnosc">

<option value="nazwa">Po nazwie</option>

<option value="opis">Po opisie</option>

</select>

 

Teraz zajmijmy się rozbudowaniem naszego przypadku:

 

<li ng-repeat="element in lista | filter:$ctrl.wartosc | orderBy:$ctrl.kolejnosc">

 

Aktualnie po zmianie wartości znacznika select, AngularJS wstrzyknie odpowiednią wartość do kodu i w zależności od tej wartości będzie odpowiednio układał elementy.