AngularJS - routing czyli przekierowania

Stronę tą wyświetlono już: 321 razy

AngularJS jest często wykorzystywany do tworzenia SPA (aplikacji jednostronnej). Jednakże powstaje pewien problem natury takiej, że sama aplikacja może wymagać utworzenia różnych widoków w ramach tej samej strony. Jak więc to obsłużyć? Z odsieczą przychodzi moduł ngRoute, z którego aby można było korzystać trzeba pobrać plik angular-route.min.js. Bez załączenia tego pliku oprócz głównego pliku z AngularJS nie da się obsłużyć przekierowań.

Listing 1
  1. <script src="AngularJS.min.js"></script>
  2. <script src="angular-route.min.js"></script>

Najważniejszym elementem w kodzie HTML strony będzie element div zawierający specjalny atrybut o jakże przewrotnie brzmiącej nazwie ng-view. W ramach jednej aplikacji może istnieć jeden i tylko jeden element o tym atrybucie i warto o tym pamiętać.

Sam kod HTML strony głównej nie jest jakoś specjalnie skomplikowany, ale myślę, że to dobrze jak na przykład podstaw AnularJS:

Listing 2
  1. <body ng-app = "myFirstAngularApplicationEver">
  2. <div class = "outer">
  3. <div class="toCenter">
  4. <article class="myRouting">
  5. <p><a href="#!/">Strona główna</a></p> <!-- pierwszy link przekierowania widoku strony -->
  6. <p><a href="#!/pierwszy">Widok 1</a></p> <!-- drugi link przekierowania widoku strony -->
  7. <div ng-view> <!-- a tutaj wstawiam widok strony -->
  8. </div>
  9. </article>
  10. </div>
  11. </div>
  12. </body>

Czas dodać szczyptę kodu związanego z obsługą przekierowania:

Listing 3
  1. <script>
  2. let app = angular.module(
  3. "myFirstAngularApplicationEver",
  4. ["ngRoute"] // ładuję moduł routingu
  5. );
  6. app.config(
  7. function($routeProvider){ // ta funkcja będzie odpowiedzialna za realizację przekierowań
  8. $routeProvider
  9. .when("/", { // gdy w adresie pojawi się "/" to
  10. template: "<p>Strona startowa</p>" // wyświetl ten tekst
  11. })
  12. .when("/pierwszy", { // Agdy w adresie pojawi się "/pierwszy" to
  13. templateUrl: "AngularJS_example06_first_view.html", // ustaw szablon na stronę zawartą w pliku "AngularJS_example06_first_view.html"
  14. controller: "addBeautifulPeopleController" // i ustaw kontroler na ten o nazwie "addBeautifulPeopleController"
  15. })
  16. .otherwise( {redirect: "/"} ); // w przeciwnym przypadku (czyli jak ktoś wpisze jakieś głupoty w adresie) przepieruj na stronę startową
  17. });
  18. </script>

Zasadniczo nie ma co tu tłumaczyć, wszak wszystko w kodzie zostało wyjaśnione. Został jeszcze kod dotyczący kontrolera addBeautifulPeopleController, który wyrzuciłem do oddzielnego pliku:

Listing 4
  1. <script src="AngularJS_example06_first_view.js"></script>

zawierającego następujący kod:

Listing 5
  1. let BeautifulPeopleController = app.controller(
  2. "addBeautifulPeopleController",
  3. function ($scope, $rootScope){
  4. // zamiast inicjalizowania zmiennej w atrybucie ng-init inicjalizuję ją tutaj:
  5. $scope.person = {name: 'myName', surname: 'mySurname', age: 18};
  6. // tworzę zmienną, która będzie przechowywała nazwiska
  7. if($rootScope.beautifulPeople == null)
  8. $rootScope.beauitfulPeople = $rootScope.beautifulPeople = [
  9. { name: 'Donald', surname: 'Tłusk', age: 61},
  10. { name: 'Donald', surname: 'Dumb', age: 72}
  11. ];
  12. $scope.beautifulPeople = $rootScope.beautifulPeople;
  13. // tworzę funkcję, która podpięta będzie pod kliknięcie przycisku z wykorzystaniem atrybutu ng-click
  14. $scope.addElement = function(){
  15. if(
  16. $scope.person.name.length !== 0 && $scope.person.surname.length !== 0
  17. && !($scope.person.name == "myName" || $scope.person.surname == "mySurname")){
  18. $scope.beautifulPeople[$scope.beautifulPeople.length] = {name: $scope.person.name, surname: $scope.person.surname, age: $scope.person.age};
  19. $scope.beautifulPeople.sort(
  20. function(a, b){
  21. return (a.surname + a.name).localeCompare((b.surname + b.name));
  22. }
  23. );
  24. $scope.person.name = "myName";
  25. $scope.person.surname = "mySurname";
  26. }else{
  27. alert("Wprowadź nazwisko i imię!");
  28. }
  29. }
  30. $scope.removeIndex = function(index){
  31. console.log(index);
  32. if(confirm("Czy naprawdę pragniesz usunąć: " + $scope.beautifulPeople[index].name + " " + $scope.beautifulPeople[index].surname)){
  33. $scope.beautifulPeople.splice(index, 1);
  34. }
  35. }
  36. });

Jeszcze sam kod strony ładowanej z pliku:

Listing 6
  1. <article class="ListOfBeautifulPeople" ng-controller = "addBeautifulPeopleController">
  2. <h1>The bautiful people</h1>
  3. <aside><a href="https://www.youtube.com/watch?time_continue=2&v=Ypkv0HeUvTc" target="_blank">I don't want you and I don't need you
  4. Don't bother to resist, I'll beat you
  5. It's not your fault that you're always wrong
  6. The weak ones are there to justify the strong
  7. The beautiful people, the beautiful people</a></aside>
  8. <table cellspacing = "0">
  9. <caption>Beautiful people list</caption>
  10. <tr><th></th><th>Nr.</th><th>Imię</th><th>Nazwisko</th><th>Wiek</th></tr>
  11. <tr ng-repeat="beautifulPerson in beautifulPeople">
  12. <td><button ng-click="removeIndex($index)" class="deleteItem"><img src="delete.svg" width = "15px" alt="delete" class="deleteItem"/></button></td>
  13. <td>{{ $index + 1 }}</td>
  14. <td>{{ beautifulPerson.name }} </td>
  15. <td>{{ beautifulPerson.surname}}</td>
  16. <td>{{ beautifulPerson.age }}</td>
  17. </tr>
  18. <tr>
  19. <td colspan="2"><button ng-click = "addElement()">Dodaj</button></td>
  20. <td><input type="text" ng-model = "person.name" name = "personName"/></td>
  21. <td><input type = "text" ng-model = "person.surname" name = "personSurname"/></td>
  22. <td><input type="number" min = "18" max = "100" name = "personAge" ng-model = "person.age"/></td>
  23. </tr>
  24. </table>
  25. </article>

I już jest wszystko gotowe. Działający przykład można zobaczyć w akcji tutaj.

Komentarze