Introducere in AngularJS

Post Title

Ce este AngularJS?

    Este un framework clientside produs de google 100% javascript, in mare asa poate fi definit 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, aceasta 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 va fi instiintat. De aici si frumoasele functionalitati ca modificarea unui input duce la schimbare unei intregi interfete "in timp real".

   Scopurile sunt ierarhice, cu alte cuvine un scop copil are toate informatiile din parinte, insa in angular nu e obligatoriu 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 un modul users care mai apoi poate fi injectat intr-o 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 angular 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) sunt scrise 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 si observat.

Autor articol
Y!M : mic_programator

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

Structura de aplicatie Angular.js
 

Acest articol nu este comentat, fii primul care o face

Trebuie sa fii logat sa poti lasa un comentariu Autentificare Inregistrare
top