AngularJS – framework do JavaScript

Logo AngularJS

Dzisiejszy wpis poświęcony jest świetnemu frameworkowi JavaScript: AngularJS

Zgodnie z tym co możemy przeczytać w Wikipedii:

„AngularJS – otwarty framework oparty na języku JavaScript, wspierany i firmowany przez Google, wspomagający tworzenie i rozwój aplikacji internetowych na pojedynczej stronie. Zadaniem biblioteki jest wdrożenie wzorca Model-View-Controller (MVC) do aplikacji internetowych, aby ułatwić ich rozwój i testowanie.

Biblioteka wczytuje plik HTML zawierający dodatkowe specyficzne dla tej biblioteki tagi. Podążając za instrukcjami wydawanymi przez owe znaczniki, biblioteka przypisuje wejściowe i wyjściowe elementy strony do modelu, zapisanego jako zestaw zmiennych języka JavaScript. Wartości tych zmiennych można ustawić ręcznie lub pobrać z otrzymywanego statycznie lub dynamicznie źródła JSON-a.”

Źródło: https://pl.wikipedia.org/wiki/AngularJS

Poniżej podstawy które należy znać przed rozpoczęciem korzystania z AngularJS:

Two-way data binding

Dodanie dyrektywy ng-app do tagu w kodzie html spowoduje, że kompilator AngularJS skompiluje wszystko wewnątrz tego tagu. Zazwyczaj się stawia tę dyrektywę przy samym tagu <html> oczywiście nie jest to wymóg. Dyrektywa ng-model=”twojeImie” powoduje przypisanie wartości tego inputu do modelu. Poniżej {{twojeImie}} wyświetla zawartość. I to tyle! Wartość jest zbindowana w dwie strony. Do poniższego przykładu nie trzeba pisać nawet linijki kodu JavaScript!

<div ng-app>
  <label>Imię: </label>
  <input type="text" ng-model="twojeImie" placeholder="Twoje imię">
  <h1>Witaj {{twojeImie}}!</h1>
</div>

Korzystanie z kontrolera

Oczywiście zazwyczaj będziemy potrzebować kontrolerów. Oto przykład jak możemy go stworzyć:

function markiAut($scope){
  $scope.auta = [
    {
      marka: "Audi",
      model: "A8"
    },
    {
      marka: "Mitsubishi",
      model: "Lancer"
    },
    {
      marka: "Subaru",
      model: "Impreza"
    }
  ]
}

Musimy koniecznie pamiętać aby wszystkie nasze dane były przypisane do obiektu $scope. Nasz model, będący tablicą marek samochodów, musimy przypisać do scope’a, aby mógł być użyty w widoku. Dyrektywą ng-controller przypisujemy kontroler do elementu DOM podając jego nazwę. Przykład użycia w kodzie html:

<div ng-app="">
  <div ng-contoller="markiAut">
    <ul>
      <li ng-repeat="auto in markiAut">
        [{{$index + 1}}] {{auto.marka}} {{auto.model}}.
      </li>
    </ul>
  </div>
</div>

ng-repeat to dyrektywa, pozwalająca na renderowanie obiektów będących w tablicy. Używając tej dyrektywy dostępne są specjalne właściwości:

$index – jest to numer danego rekordu renderowanego
$first – zwraca wartość bool, mówiącą czy rekord jest pierwszy
$middle – zwraca wartość bool, mówiącą czy rekord nie jest pierwszy ani ostatni
$last – zwraca wartość bool, mówiącą czy rekord jest ostatni

Podsumowanie

Przedstawione powyżej przykłady to oczywiście absolutne podstawy AngularJS, przedstawiające ułamek jego możliwości. Jednak mam nadzieje że pomogą one początkującym zacząć zabawę w tym frameworkiem i zrozumieć jego główne koncepty! Zapraszam do korzystania z AngularJS!

Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Więcej informacji

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close