angularjs: q&a
TRANSCRIPT
AngularJS: Q&A
Who am I?
Kierownik Działu Aplikacji Webowych
Cyfrowy Polsat, Warsaw
JavaScript Ninja. Mac lover. Pebble evangelist.
Organizator WarsawJS
"Kto chce szuka sposobu, kto nie chce szuka powodu."
Piotr Kowalski
2
JavaScript Ninja
piecioshka.pl/blog github.com/piecioshka
twitter.com/piecioshka soundcloud.com/piecioshka
Where am I?
Book: AngularJS
Book: AngularJS. Pierwsze Kroki.
My privatenotes... let's go!
Law of Demeter
• Object itself
• Method 's parameters
• Any objects created/instantiated within m
• Object 's direct component objects
• A global variable, accessible by Object , in the scope of method
Reference: https://en.wikipedia.org/wiki/Law_of_Demeter
10
Demo
I was created special project for test that:
• https://github.com/piecioshka/test-angular-update-model-and-view
12
Demo
I was created special project for test that:
• https://github.com/piecioshka/test-angular-directive-execution-order
14
Demo
I was created special project for test that:
• https://github.com/piecioshka/test-angular-un-register-watch
16
More? Go go go!
Code Samples
$scope.title = 'Function';
// Mozilla Firefox support Arrow Function natively.
setTimeout( () => {
$scope.title = 'Arrow Function?';
}, 1000);
01.
02.
03.
04.
05.
06.
22
Code Samples
// Controller
$scope.dataStructure = { foo: 'bar' } ;
// View
<span ng-bind="dataStructure"></span>
{{ dataStructure }}
{{ dataStructure | json }}
01.
02.
03.
04.
05.
06.
07.
24
Code Samples: Results
// View (compiled)
[object Object]
{"foo":"bar"}
{ "foo": "bar" }
01.
02.
03.
04.
25
Code Samples: Use other controller
mod.controller('HelperController', function ($scope) {
$scope.helper = 1;
});
mod.controller('DependencyController', function ($scope, $controller) {
var $newScope = $scope.$new();
$controller('HelperController', {
$scope: $newScope
});
console.log($newScope.helper); // 1
});
01.
02.
03.
04.
05.
06.
07.
08.
09.
10. 27
Code Samples
<!-- interpolation -->
<span ng-cloak >{{ title }}</span>
<!-- directive ng-bind -->
<span ng-bind="title"></span>
01.
02.
03.
04.
05.
32
Code Samples
< ng-switch on="foo" >
<span ng-switch-when="bar">Bar</span>
<span ng-switch-when="baz" >Baz</span>
<span ng-switch-when="abc">Abc</span>
<span ng-switch-default >...</span>
</ng-switch>
01.
02.
03.
04.
05.
06.
34
Code Samples
<body ng-init=" cut = false ;">
<div ng-cut="cut = true" >
Lorem ipsum...
</div>
Cut? {{ cut }}
</body>
01.
02.
03.
04.
05.
06.
36
Demo
I was created special project for test that:
• https://github.com/piecioshka/test-angular-disable-watchers
39
Last but not least!
Thanks!
Links
Slides
https://github.com/piecioshka/presentation-angularjs-q-and-a
Post about AngularJS training:
http://piecioshka.pl/blog/2015/06/27/szkolenie-angularjs-podstawy-
relacja-live.html
My private projects for testing AngularJS (7):
https://github.com/search?q=user:piecioshka+angular
48