Angular
Content
DONE IS BETTER THAN PERFECT!!!
Servicii
Serviciile sunt obiecte care pot fi conectate folosind dependency injection.
Acestea sunt folosite pentru a organiza si a refolosi codul in intr-o aplicatie.
• Initializare lenesa – Angular initializeaza un serviciu doar atunci cand o
componenta a aplicatiei are nevoie de acesta
• Singleton – fiecare componenta care depinde de un anumit serviciu
primeste o referinta la singura instanta generata de “service factory”
Servicii oferite de Angular: $http, $log, $location, $rootScope, $controller
etc.
Pe langa aceste servicii oferite de Angular, programatorii isi scriu propriile
servicii in functie de nevoile aplicatiei.
2
Directive
Probabil una dintre cele mai importante proprietati pe care le are AngularJS. Acestea
ne permit sa extindem gramatica web-ului – generand elemente, attribute si clase
HTML reutilizabile.
•
•
•
•
•
Pot elimina complet manipularea DOM-ului
Cod mai simplu/usor de inteles la nivel de HTML
Pot fi reutilizate
Two way data binding
Sabloane(templates)
• Documentatia este destul de slaba asa ca este nevoie de practica pentru a te
acomoda cu conceptele folosite de directive
• Scope izolat:
• https://egghead.io/lessons/angularjs-isolate-scope-review?__s=2gpzytuaiossjnivu2zy&confirm=182MJH21XAF-47JHE
!!! When You Manipulate DOM in Controller, Write Directives !!!
Resource: http://www.ng-newsletter.com/posts/directives.html,
http://blog.brunoscopelliti.com/use-cases-of-angularjs-directives
3
Manipularea DOM
!!! it’s really a bad idea to use jQuery plugin directly in your
controller: you are making your controller impossible to test and you
can hardly reuse any logic. !!!
Summary:
Put control logic in directive controller, and DOM logic in link function; scope
sharing is the glue.
Resource: http://ruoyusun.com/2013/05/25/things-i-wish-i-were-told-aboutangular-js.html
4
Regula punctului(The dot rule)
In AngularJS, in mod normal, un scope copil mosteneste scope-ul parinte. O
exceptie de la regula o reprezinta directivele care folosesc scope: {...} –
scop izolat.
Directive care isi creeaza un scope izolat: ng-repeat, ng-include, ng-switch,
ng-view, ng-controller
Filmulet: https://www.youtube.com/watch?
v=ZhfUv0spHCY&feature=youtu.be&t=30m
Exemplu modificat: http://jsfiddle.net/r4rkw/1/
Resource: https://thinkster.io/egghead/the-dot
5
Underscore
O biblioteca pentru JavaScript care pune la dispozitie o multime de functii
ajutatoare provenite din programarea functionala si nu numai.
Resource: http://underscorejs.org/
6
Angular UI vs Kendo UI
AngularUI
• UI-Modules, UI-Alias, UI-Bootstrap, NG-Grid, UI-Router, UI-Select, IDE
Plugins
Kendo UI
• Dependinte care trebuie sa respecte o ordine foarte clara – care pot
genera un comportament foarte ciudat daca nu sunt respectate. Nu e
backwards compatible.
• Cauza pricipala care ne-a determinat sa folosim DOM-ul in controllere
• Gama mult mai restransa de posibilitati decat la AngularUI
Resource: https://angular-ui.github.io/, https://github.com/telerik/kendo-ui-core/
7
CSS – Inline Style vs Classes
Inline
• Browserul deseneaza regula pentru acel caz particular(un singur element)
Extern
• Cache pentru regulile de stil
• Claritate sporita a codului HTML
• Aspect omogen – folosirea claselor
• Modificare usoara
• Pagini HTML de dimensiuni mai mici
Dovada: http://jsperf.com/inline-style-vs-css-class/2
8
Modele Mongo – in fisiere
separate
• MongoDB, Mongoose si Node.js folosesc documente de tip JSON. Folosind aceste
trei tehnologii se pot construi servicii mobile sau aplicatii web dinamice cu foarte
mare usurinta.
• Mongoose – Object Data Modeling(ODM) library
• Impune utilizarea unei structuri fara sa scada flexibilitatea care face MongoDB atat de puternic
• Se sugereaza sa se foloseasca un fisier pentru fiecare model din Mongoose
9
Unit testing
• Angular este scris pentru a fi testat foarte usor – dar daca nu se respecta principiile
acestui limbaj, atunci se poate ajunge la o aplicatie care nu poate fi testata sau
care poate fi testata foarte greu
!!! With great power comes great responsibility !!!
• Ce putem folosi pentru testarea aplicatiilor scrise in Angular
• Karma - JavaScript command line tool that can be used to spawn a web server which loads your
application's source code and executes your tests
• Karma – aduce un mediu de testare productiv.
• Jasmine - cea mai frecventa alegere(karma-jasmine)
• Angular-mocks – modulul ngMock
• Una din cele mai puternice componente puse la dispozitie de ngMock este $httpBackend – ne permite
sa inscenam cereri XHR(XMLHttpRequests) – (in ciudat numelui, pot primi raspunsul cererii http/https
si in alt format decat XML – JSON, HTML, text) – pentru a returna date de test.
Resource: https://docs.angularjs.org/guide/unit-testing
10
Teste E2E
Protractor
A test framework for
writing end-to-end
(E2E) tests
11
Sa generam proiectul initial
folosind un tool de scaffolding
Yeoman
Resource: http://yeoman.io/
12
Alte probleme:
• Deploy automat din primele faze ale proiectului
• Implementare history aplicatie inca de la inceput
• Sa scriem functii SQL in loc sa scriem scripturile direct in JS
• Analiza pe proiect inainte de a incepe dezvoltarea
13
14
Resurse utile
• Tutorial Angular: https://egghead.io/technologies/angularjs
15
Servicii
Serviciile sunt obiecte care pot fi conectate folosind dependency injection.
Acestea sunt folosite pentru a organiza si a refolosi codul in intr-o aplicatie.
• Initializare lenesa – Angular initializeaza un serviciu doar atunci cand o
componenta a aplicatiei are nevoie de acesta
• Singleton – fiecare componenta care depinde de un anumit serviciu
primeste o referinta la singura instanta generata de “service factory”
Servicii oferite de Angular: $http, $log, $location, $rootScope, $controller
etc.
Pe langa aceste servicii oferite de Angular, programatorii isi scriu propriile
servicii in functie de nevoile aplicatiei.
2
Directive
Probabil una dintre cele mai importante proprietati pe care le are AngularJS. Acestea
ne permit sa extindem gramatica web-ului – generand elemente, attribute si clase
HTML reutilizabile.
•
•
•
•
•
Pot elimina complet manipularea DOM-ului
Cod mai simplu/usor de inteles la nivel de HTML
Pot fi reutilizate
Two way data binding
Sabloane(templates)
• Documentatia este destul de slaba asa ca este nevoie de practica pentru a te
acomoda cu conceptele folosite de directive
• Scope izolat:
• https://egghead.io/lessons/angularjs-isolate-scope-review?__s=2gpzytuaiossjnivu2zy&confirm=182MJH21XAF-47JHE
!!! When You Manipulate DOM in Controller, Write Directives !!!
Resource: http://www.ng-newsletter.com/posts/directives.html,
http://blog.brunoscopelliti.com/use-cases-of-angularjs-directives
3
Manipularea DOM
!!! it’s really a bad idea to use jQuery plugin directly in your
controller: you are making your controller impossible to test and you
can hardly reuse any logic. !!!
Summary:
Put control logic in directive controller, and DOM logic in link function; scope
sharing is the glue.
Resource: http://ruoyusun.com/2013/05/25/things-i-wish-i-were-told-aboutangular-js.html
4
Regula punctului(The dot rule)
In AngularJS, in mod normal, un scope copil mosteneste scope-ul parinte. O
exceptie de la regula o reprezinta directivele care folosesc scope: {...} –
scop izolat.
Directive care isi creeaza un scope izolat: ng-repeat, ng-include, ng-switch,
ng-view, ng-controller
Filmulet: https://www.youtube.com/watch?
v=ZhfUv0spHCY&feature=youtu.be&t=30m
Exemplu modificat: http://jsfiddle.net/r4rkw/1/
Resource: https://thinkster.io/egghead/the-dot
5
Underscore
O biblioteca pentru JavaScript care pune la dispozitie o multime de functii
ajutatoare provenite din programarea functionala si nu numai.
Resource: http://underscorejs.org/
6
Angular UI vs Kendo UI
AngularUI
• UI-Modules, UI-Alias, UI-Bootstrap, NG-Grid, UI-Router, UI-Select, IDE
Plugins
Kendo UI
• Dependinte care trebuie sa respecte o ordine foarte clara – care pot
genera un comportament foarte ciudat daca nu sunt respectate. Nu e
backwards compatible.
• Cauza pricipala care ne-a determinat sa folosim DOM-ul in controllere
• Gama mult mai restransa de posibilitati decat la AngularUI
Resource: https://angular-ui.github.io/, https://github.com/telerik/kendo-ui-core/
7
CSS – Inline Style vs Classes
Inline
• Browserul deseneaza regula pentru acel caz particular(un singur element)
Extern
• Cache pentru regulile de stil
• Claritate sporita a codului HTML
• Aspect omogen – folosirea claselor
• Modificare usoara
• Pagini HTML de dimensiuni mai mici
Dovada: http://jsperf.com/inline-style-vs-css-class/2
8
Modele Mongo – in fisiere
separate
• MongoDB, Mongoose si Node.js folosesc documente de tip JSON. Folosind aceste
trei tehnologii se pot construi servicii mobile sau aplicatii web dinamice cu foarte
mare usurinta.
• Mongoose – Object Data Modeling(ODM) library
• Impune utilizarea unei structuri fara sa scada flexibilitatea care face MongoDB atat de puternic
• Se sugereaza sa se foloseasca un fisier pentru fiecare model din Mongoose
9
Unit testing
• Angular este scris pentru a fi testat foarte usor – dar daca nu se respecta principiile
acestui limbaj, atunci se poate ajunge la o aplicatie care nu poate fi testata sau
care poate fi testata foarte greu
!!! With great power comes great responsibility !!!
• Ce putem folosi pentru testarea aplicatiilor scrise in Angular
• Karma - JavaScript command line tool that can be used to spawn a web server which loads your
application's source code and executes your tests
• Karma – aduce un mediu de testare productiv.
• Jasmine - cea mai frecventa alegere(karma-jasmine)
• Angular-mocks – modulul ngMock
• Una din cele mai puternice componente puse la dispozitie de ngMock este $httpBackend – ne permite
sa inscenam cereri XHR(XMLHttpRequests) – (in ciudat numelui, pot primi raspunsul cererii http/https
si in alt format decat XML – JSON, HTML, text) – pentru a returna date de test.
Resource: https://docs.angularjs.org/guide/unit-testing
10
Teste E2E
Protractor
A test framework for
writing end-to-end
(E2E) tests
11
Sa generam proiectul initial
folosind un tool de scaffolding
Yeoman
Resource: http://yeoman.io/
12
Alte probleme:
• Deploy automat din primele faze ale proiectului
• Implementare history aplicatie inca de la inceput
• Sa scriem functii SQL in loc sa scriem scripturile direct in JS
• Analiza pe proiect inainte de a incepe dezvoltarea
13
14
Resurse utile
• Tutorial Angular: https://egghead.io/technologies/angularjs
15
