Ce este AngularJS?

Este un framework clientside produs de google 100% javascript, in mare asa poate fi defini AngularJS.

De ce AngularJS?

Usor de inteles
Gandit de Google
Directive (taguri gandite de voi "<afiseaza-tabel-clienti></afiseaza-tabel-clienti>")
Bine documentat
Gandit pentru REST
Foarte rapid
Patern MVW
Dependency Injection
Compatibil cu JQuery (foloseste o versiune lite de jquery)

Astea sunt doar cateva chestii care mi-au venit acum in minte, mai sunt si altele dar eu zic ca le-am adugat pe cele mai importante.

Prezentare Generala

Directivele

AngularJs introduce conceptul de directiva, acceasta nu este nimic altceva decat un tag care exinde conceptul de HTML, o directiva este "un tag/atribut" html propriu.

Am ales sa prezint pentru prima data directivele deoarece sunt cele mai importante din framework + ca intregul angular "se invarte" in jurul acestor directive.

Toate directivele puse la dispozitie de angular incep cu cuvantul cheie "ng" iar exemple sunt o multime (ng-app, ng-controller, ng-model, ng-click etc)

 
<input ng-model="foo">
<div ng-controller="Controller">
<my-dir></my-dir>
<svg>
  <circle ng-attr-cx="{ { valoare } }"></circle>
</svg>

Scope

Scopul nu este altceva decat un storage de informatii (preluate de la model) ca mai tarziu informatia sa poata fi utilizata de controlere, directive, etc.

Daca va intrebati de ce e asa de important acest "$scope" atunci o sa va zic cateva chestii interesante, are propriul sau patern si anume observer, cu alte cuvine cand o proprietate a acestuia a fost schimbata intregul obiect instiintat. De aici si frumoasele functionalitati ca modificarea unui imput duce la schimbare unei intregi interfete "in timp real".

Scopurile sunt erarhice cu alte cuvine un scop copil are toate informatiile din parinte, insa in angular nu e obligatoru ca scopurile sa fie nested ele pot fi si izolate.

Exemplu:

 
angular.module('scopeExample', [])
.controller('MyController', ['$scope', function($scope) {
  $scope.username = 'World';
 
  $scope.sayHello = function() {
    $scope.greeting = 'Hello ' + $scope.username + '!';
  };
}]);

 
<div ng-controller="MyController">
  Your name:
    <input type="text" ng-model="username">
    <button ng-click='sayHello()'>greet</button>
  <hr>
 
   {  {greeting }  }
</div>

Modulele

Modulele pot fi vazute ca parti diferite/independente a unei aplicatii, un modul este insasi aplicatia parinte care va fi definita prin ng-app, de exemplu se poate crea uin modul users care mai apoi poate fi injectat in o alta aplicatie care sa aiba nevoie de logare, inregistrare, iar in aplicatia parinte sa fie puse doar cateva taguri gen "<logare></logare>" , "<inregistrare></inregistrare>"

 
// declare a module
var myAppModule = angular.module('myApp', []);

 
<div ng-app="myApp">

Data Binding

Termenul de data binding se refera la sincronizarea datelor dintre view si model. In majoritatea cazurilor sistemul de templating functioneaza intr-un singur sens, cu alte cuvinte modelul influenteaza datele view-ul astfel propagarea datelor se face de la model la view, insa in angualr exista conceputul de "two-way data binding" ceea ce inseamna ca orice schimbare a modelului va afecta view-ul iar orice modificare a view-ului va fi propagata si in model. Cu alte cuvinte se sincronizeaza automat datele intre view si model

Template-urile

Dupa cum cred ca va asteptati template-urile (view-ul) este scris in HTML insa nu e pur este amestecat cu directive(taguri specifice angular), atribute si filtre, afisarea datelor din $scope in view se face prin "{{ }}"

Exemplu:

 
<html ng-app>
 <!-- Body tag augmented with ngController directive  -->
 <body ng-controller="MyController">
   <input ng-model="foo" value="bar">
   <!-- Button tag with ng-click directive, and
          string expression 'buttonText'
          wrapped in "{{ }}" markup -->
   <button ng-click="changeFoo()">{}</button>
   <script src="angular.js">
 </body>
</html>

Cam astea sunt chestiile esentiale despre AngularJS, nu sunt chestii prea concludente insa sunt esentiale pentru a intelege ce vom face in urmatorul articol si anume "Prima Aplicatie in AngularJs" pe care o vom dezvolta in timp, adaugandu-i si un rest api.

Imi cer scuze pentru erorile de scrire/exprimare nu am suficient timp pentru a verifica tutoriale si asa nu am timp sa scriu dupa cum cred ca ati observat.