Introducerea in AngularJS

Post Title

Ce este AngularJS?

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

De ce AngularJS?

  1. Usor de inteles
  2. Gandit de Google
  3. Directive (taguri gandite de voi "<afiseaza-tabel-clienti></afiseaza-tabel-clienti>")
  4. Bine documentat
  5. Gandit pentru REST
  6. Foarte rapid 
  7. Patern MVW
  8. Dependency Injection
  9. 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)

  1.  
  2. <input ng-model="foo">
  3. <div ng-controller="Controller">
  4. <my-dir></my-dir>
  5. <svg>
  6. <circle ng-attr-cx="{ { valoare } }"></circle>
  7. </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:

  1.  
  2. angular.module('scopeExample', [])
  3. .controller('MyController', ['$scope', function($scope) {
  4. $scope.username = 'World';
  5.  
  6. $scope.sayHello = function() {
  7. $scope.greeting = 'Hello ' + $scope.username + '!';
  8. };
  9. }]);
  1.  
  2. <div ng-controller="MyController">
  3. Your name:
  4. <input type="text" ng-model="username">
  5. <button ng-click='sayHello()'>greet</button>
  6. <hr>
  7.  
  8. { {greeting } }
  9. </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>"

  1.  
  2. // declare a module
  3. var myAppModule = angular.module('myApp', []);
  1.  
  2. <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:

  1.  
  2. <html ng-app>
  3. <!-- Body tag augmented with ngController directive -->
  4. <body ng-controller="MyController">
  5. <input ng-model="foo" value="bar">
  6. <!-- Button tag with ng-click directive, and
  7. string expression 'buttonText'
  8. wrapped in "{{ }}" markup -->
  9. <button ng-click="changeFoo()">{}</button>
  10. <script src="angular.js">
  11. </body>
  12. </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.

Autor articol

Ştiinţa fără religie este şchioapă, religia fără ştiinţă este oarbă (Albert Einstein)

Acest articol nu este comentat, fii primul care o face

Trebuie sa fii logat sa poti lasa un comentariu Autentificare Inregistrare Logare cu Facebook
top