AngularJS - wykorzystanie modułu i kontrolera

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

Czas najwyższy nadszedł, aby zacząć nieco ciekawszą zabawę z AngularJS. Czas więc aby zapoznać się z możliwością kontrolowania aplikacji z poziomu kodu JavaScript. W tym celu konieczne będzie utworzenie obiektu modułu i kontrolera.

Listing 1
  1. <html>
  2. <head>
  3. <meta charset="UTF-8"/>
  4. <script src="AngularJS.min.js"></script>
  5. <style>
  6. label{
  7. display: inline-block;
  8. width: 150px;
  9. }
  10. </style>
  11. </head>
  12. <body ng-app = "myFirstAngularApplicationEver" ng-controller = "myFirstControllerEver">
  13. <p><label for = "personName">Imię:</label><input type="text" ng-model = "person.name" name = "personName"/></p>
  14. <p><label for = "personSuraname">Nazwisko: </label><input type = "text" ng-model = "person.surname" name = "personSurname"/></p>
  15. <p><label for = "personAge">Wiek:</label><input type="number" min = "18" max = "100" name = "personAge" ng-model = "person.age"/></p>
  16. <p>{{ person.name + " " + person.surname}}</p>
  17. <!-- tworzę przycisk, pod który podpinam funkcję addElement() zainicjowaną dopiero w kontrolerze -->
  18. <p><button ng-click = "addElement()">Dodaj delikwenta</button></p>
  19. </body>
  20. <script>
  21. // tworzę moduł aplikacji za pomocą metody module, która jako argumenty przyjmuje
  22. let app = angular.module(
  23. "myFirstAngularApplicationEver", // nazwę zawartą w atrybucie ng-app
  24. [] // listę modułów, od których tworzony moduł będzie zależny (domyślnie może być pusta)
  25. );
  26. let controller = app.controller(
  27. "myFirstControllerEver",
  28. function ($scope){
  29. // zamiast inicjalizowania zmiennej w atrybucie ng-init inicjalizuję ją tutaj:
  30. $scope.person = {name: 'myName', surname: 'mySurname', age: 18};
  31. // tworzę zmienną, która będzie przechowywała nazwiska
  32. $scope.beautifulPeople = [];
  33. // tworzę funkcję, która podpięta będzie pod kliknięcie przycisku z wykorzystaniem atrybutu ng-click
  34. $scope.addElement = function(){
  35. if(
  36. $scope.person.name.length !== 0 && $scope.person.surname.length !== 0
  37. && !($scope.person.name == "myName" || $scope.person.surname == "mySurname")){
  38. $scope.beautifulPeople[$scope.beautifulPeople.length] = {name: $scope.person.name, surname: $scope.person.surname, age: $scope.person.age};
  39. $scope.beautifulPeople.sort(
  40. function(a, b){
  41. return (a.surname + a.name).localeCompare((b.surname + b.name));
  42. }
  43. );
  44. $scope.person.name = "myName";
  45. $scope.person.surname = "mySurname";
  46. }else{
  47. alert("Wprowadź nazwisko i imię!");
  48. }
  49. }
  50. });
  51. </script>
  52. </html>

Jak wynika z powyższego kodu wykorzystanie atrybutu ng-init zostało całkowicie i skutecznie wyeliminowane poprzez wykorzystanie kontrolera. Stworzenie kontrolera wymaga utworzenia modułu, a aby jego utworzenie mogło nastąpić w kodzie strony musi istnieć znacznik ng-app zawierający unikalną nazwę aplikacji. Wtedy to bowiem możliwe będzie utworzenie modułu w taki oto przebiegły sposób:

Listing 2
  1. let app = angular.module(
  2. "myFirstAngularApplicationEver", // nazwę zawartą w atrybucie ng-app
  3. [] // listę modułów, od których tworzony moduł będzie zależny (domyślnie może być pusta)
  4. );

No i cóż innego pozostało jeśli nie to, że trzeba zakasać rękawy i z najdzikszą rozkoszą utworzyć kontroler, ale zanim to uczynię najpierw elementowi body należy przypisać nazwę kontrolera w atrybucie ng-controller co też i ja uczyniłem. Albowiem wtedy i tylko wtedy możliwym będzie utworzenie kontrolera w kodzie i przypisanie go do danego znacznika w aplikacji AngularJS:

Listing 3
  1. let controller = app.controller(
  2. "myFirstControllerEver",
  3. function ($scope){
  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. $scope.beautifulPeople = [];
  8. // tworzę funkcję, która podpięta będzie pod kliknięcie przycisku z wykorzystaniem atrybutu ng-click
  9. $scope.addElement = function(){
  10. if(
  11. $scope.person.name.length !== 0 && $scope.person.surname.length !== 0
  12. && !($scope.person.name == "myName" || $scope.person.surname == "mySurname")){
  13. $scope.beautifulPeople[$scope.beautifulPeople.length] = {name: $scope.person.name, surname: $scope.person.surname, age: $scope.person.age};
  14. $scope.beautifulPeople.sort(
  15. function(a, b){
  16. return (a.surname + a.name).localeCompare((b.surname + b.name));
  17. }
  18. );
  19. $scope.person.name = "myName";
  20. $scope.person.surname = "mySurname";
  21. }else{
  22. alert("Wprowadź nazwisko i imię!");
  23. }
  24. }
  25. });

Jak widać metoda controller przyjmuje dwa parametry, pierwszy to nazwa kontrolera a drugi to funkcja, w której będzie zawarty kod jak nie trudno się domyślić kontrolujący działanie zawartości strony, do której ów kontroler został przypisany. Funkcja owa przyjmuje jeden specjalny argument $scope umożliwiający odwoływanie się do zmiennych utworzonych w kodzie strony za pomocą znacznika nc-model. Można za pomocą tej zmiennej tworzyć lub inicjalizować zmienne, które będą dostępne w części kodu strony podpiętej pod kontroler. Dzięki takiemu rozwiązaniu eliminuje się konieczność wykorzystania atrybutu ng-init.

Powyższy przykład można zobaczyć w praktyce tutaj.

Komentarze