2. Angular Module
• Modul ako container
• Definovanie Angular Module
• Logická organizácia kódu
• Setter & Getter
• Best practice
3.
4. • Angular modul predstavuje kolekciu
directives, controllers, factories, services....
• Samostatne nezávislý modul
Definovanie Modulu
var myModule = angular.module('myModule', []);
8. Setter & Getter
Setter – definuje modul
Getter – vracia modul
var myModule = angular.module('myModule', []);
angular.module('myModule').controller(…);
9. Best practice
Setter – definicia modulu v
app
Getter – pre controller
(function (app) {
app.controller("MainCtrl", MainCtrl);
// Controller Constructor
function MainCtrl() {}
})(angular.module('app.controllers'));
(function () {
angular.module('app', []);
})();
10. Factories & Services
• Factory vs Service
• Provider
• Kedy použiť Factory?
• Kedy použiť Service?
11. Factories vs Services
Factory – Objekt s funkciami
Service - konštruktor “new”
function service(name, constructor) {
return factory(name, ['$injector', function ($injector) {
return $injector.instantiate(constructor);
}]);}
function factory(name, factoryFn, enforce) {
return provider(name, {
$get: enforce !== false ? enforceReturnValue(name, factoryFn) :
factoryFn
});
}
12. Provider
Factory s možnosťou configurácie
var app = angular.module("app",[]);
app.provider("email", function () {
var type;
return {
setType: function (value) { // funkcia sa vola pri configuracii
type = value;
},
$get: function () { // get Metoda ktoru vola angular ked injektuje provider
return {
title: type + " Email"
};
}
};
});
14. Kedy použiť Factory?
• Keď potrebujeme väčšiu komplexnosť
• Keď potrebujeme zabezpečiť konfiguráciu
(function(app){
app.factory("myFactory", myFactory);
function myFactory() {
var factory = {
foo:foo
}
return factory;
//////////
function foo() {}
})(angular.module('app'));
15. Kedy použiť Service?
• Vznikne inštancia konštruktora
• Potrebujeme dostať do controllera inštanciu tiredy
• ES6 syntax
class MyService {
sayHello() {
console.log('hello');
}
}
app.service('MyService',
MyService);
(function(app){
app.service("myService",
myService);
function myService() {
this.foo = function() {}
}
})(angular.module('app'));
16. Directives
• Samostatné nezávislé funkčné elementy
• Manipulácia s DOM
• Znovu použitelný kód (DRY princíp)
• Nezávislé $scope
• Build-in directives ng-bind, ng-model, ng-if…
• Vlastné HTML elementy (components)
22. Komunikácia medzi direktívami
• 2 directives, ten istý element http://jsbin.com/dadewu/edit?html,js,console
– Require Controller: [“car”]
– Events $broadcast, $emit
• Parent, child directives - http://jsbin.com/zubufu/edit?html,js,console
– Require Controller: [“^car”]
– Events $broadcast, $emit
• Susedné (sibling directive) http://jsbin.com/zavonu/edit?html,js,console
– Events $broadcast, $on
<div car engine></div>
<div car >
<div engine></div>
</div>
<div car ></div>
<div engine ></div>
23. Compile, Pre, a Post funkcie
Compile function
– Ak chceme vykonať zmeny v DOM (template) ešte
predtým ako angular vytvorí inštanciu elementu a scope
var app = angular.module('app', []);
app.directive('myDirective', myDirective);
function myDirective(){
return function(){
return {
restrict: 'E',
compile: function(tElem, tAttrs){
}
}
}
}
24. Compile, Pre, a Post funkcie
Pre-Link function
– Ak chceme vykonať nejakú logiku kódu potom ako Angular
skompiloval všetky child elementy ale ešte predtým ako je
scope spojený s templatom
var app = angular.module('app', []);
app.directive('myDirective', myDirective);
function myDirective(){
return function(){
return {
restrict: 'E',
compile: function(tElem, tAttrs){
return {
pre: function(scope,element,attr,controller){}
}
}
}
}
}
25. Compile, Pre, a Post funkcie
Post-Link function
– Posledná funkcia ktorá sa vykoná. Template je spojený so
scope a view može vykonať two-way binding.
– Môžete vykonať všetky zmeny s DOM, vytvárať eventy atď.
var app = angular.module('app', []);
app.directive('myDirective', myDirective);
function myDirective(){
return function(){
return {
restrict: 'E',
compile: function(tElem, tAttrs){
return {
post: function(scope,element,attr,controller){}
}
}
}
}
}
26. Controllers
Ako ich správne použiť
•Spájanie $scope a view
•Definovanie správanie $scope
objektu
•Logika potrebná pre view
Ako ich nepoužívať
•Akékoľvek manipulácie s
DOM
•Zdielanie dát medzi
controllermi
•Filtrovanie výstupu
28. Controller AS syntax
(function(app){
app.controller("MyCtrl", MyCtrl);
function MyCtrl(){
this.name = null;
};
angualar.extend(MyCtrl.prototype,{
init: function(){
this.name = 'Jano';
}
})
})(angular.module('app'));
<!-- In Your Binding -->
<div ng-controller="MyCtrl as ctrl">
<span></span>
</div>
29. Summary
• Spájanie modulov podľa funkcionality nie podľa typu
• Rozdeľovat aplikáciu na menšie nezávislé moduly
• Používať Factory, v prípade že potrebujeme konfiguráciu tak
Provider
• Na manipuláciu s DOM používať Direcives
• Používať Directives všade kde sa dá vytvoriť samostatne
funkčný celok
• Používať controller AS syntax Controller = Class
