Czym jest Angular?

Angular dostarcza deweloperom szeroki zakres możliwości manipulowania zachowaniem elementów wizualnej warstwy aplikacji webowych.

Angular jest frameworkiem JavaScript, napisanym przez inżynierów z Google, których celem było zrewolucjonizowanie projektowania front-endu w aplikacjach webowych. Można powiedzieć, że w pewnym sensie udało im się to. Angular zyskał ogromną popularność w ostatnich latach i medialnie nieco przyćmił swojego nieco starszego kolegę - jQuery. Jego najbardziej rozpoznawalną cechą jest bez wątpienia dyskretna ingerencja w atrybuty HTML. Framework umożliwia wdrożenie wzorca MVC (Model-View-Controller), przez co rozwój i testowanie aplikacji z jego użyciem staje się mniej problematyczne.

Zalety Angular

MINIMALIZM

Biblioteka posiada funkcję dwukierunkowego wiązania danych, dzięki temu możemy oszczędzić ilość kodu, ponieważ Angular sam wyłapuje zmiany w warstwie modelu i wprowadza odpowiednie modyfikacje w kodzie HTML.

WSPARCIE TESTOWANIA

Testowanie rozwiązań opartych o AngularJS staję się dużo łatwiejsze. Jest to spowodowane tym, że biblioteka umożliwia narzucenie wcześniej wspomnianej architektury MVC, co ułatwia np. integrację testów jednostkowych.

MOŻLIWOŚCI

Perspektywy wykorzystania potencjału tej biblioteki są spore, rozbicie aplikacji na 3 elementy (wzorzec MVC) możemy de facto interpretować na parę sposobów, zatem mamy tutaj duże pole do popisu.

Elementy Angular

  • Architektura MVW: Na tym paradygmacie oparta jest cała istota tej biblioteki (Model-View Whatever). W zależności od naszych potrzeb nasze aplikacje mogą być oparte o różne wzorce architektoniczne, z którymi Angular sobie poradzi.
  • Wstrzykiwanie zależności: Kolejny istotny element biblioteki, dzięki któremu wprowadzone przez nas funkcjonalności w kodzie stają się bardziej zautomatyzowane.
  • Moduły: To inaczej kontenery warstw naszej aplikacji (kontrolery, serwisy, dyrektywy). Moduł jest podstawowym nośnikiem danych tak jak klasa, jednak nie możemy tworzyć instacji modułu, opiera się on na nieco innej funkcjonalności.
  • Dwukierunkowe wiązanie danych: Jest to cecha, którą Angular się wyróżnia na tle innych bibliotek przeznaczonych do front-endu. Mechanizm dwukierunkowego wiązania danych zapewnia dynamiczną synchronizację danych między warstwą widoku, a warstwą modelu danych.
  • Nawigacja: Możliwość przekierowywania, ingerowania w wyświetlanie widoku strony dla odpowiedniego adresu.
  • Filtrowanie danych: Niezbędna rzecz w każdej aplikacji, Angular oferuje wbudowane mechanizmy filtrowania, które poniekąd wyręczają deweloperów od pisania własnych funkcji filtrujących dane.

ANGULAR W KODZIE


       
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
   <div ng-app="SimpleApp" ng-controller="APP.ApplicationController">
    <h1>Hello {{ name }} {{ lastname }}!</h1>
     <h2> You are {{ age }} years old! </h2>
</div>
  <!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-519905-2', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->


<!-- Kod tagu remarketingowego Google -->
<!--------------------------------------------------
Tagi remarketingowe nie mogą być wiązane z informacjami umożliwiającymi identyfikację osób ani umieszczane na stronach o tematyce należącej do kategorii kontrowersyjnych. Więcej informacji oraz instrukcje konfiguracji tagu znajdziesz tutaj: http://google.com/ads/remarketingsetup
--------------------------------------------------->
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 1068337336;
var google_custom_params = window.google_tag_params;
var google_remarketing_only = true;
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/1068337336/?value=0&amp;guid=ON&amp;script=0"/>
</div>
</noscript>

</body>
</html>
      
        

      
var SimpleApp = angular.module('SimpleApp', []);

SimpleApp.ApplicationController = function ($scope) {
    
    $scope.name = 'Andrzej';
    $scope.lastname = 'Nowak';
    $scope.age = '50';
    
};
      
      

PODSTAWY ANGULAR

Przydatne linki