Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
AngularJS: Q&A
Who am I?
Kierownik Działu Aplikacji Webowych
Cyfrowy Polsat, Warsaw
JavaScript Ninja. Mac lover. Pebble evangelist.
Organ...
JavaScript Ninja
piecioshka.pl/blog github.com/piecioshka
twitter.com/piecioshka soundcloud.com/piecioshka
Where am I?
Book: AngularJS
Book: AngularJS. Pierwsze Kroki.
My private
notes... let's go!
Law of Demeter
•   Object itself
•   Method 's parameters
•  Any objects created/instantiated within m
•   Object 's direc...
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...
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.tit...
Code Samples
// Controller
$scope.dataStructure = { foo: 'bar' } ;
// View
<span ng-bind="dataStructure"></span>
{{ dataSt...
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.contr...
Code Samples
<!-- interpolation -->
<span ng-cloak >{{ title }}</span>
<!-- directive ng-bind -->
<span ng-bind="title"></...
Code Samples
< ng-switch on="foo" >
<span ng-switch-when="bar">Bar</span>
<span ng-switch-when="baz" >Baz</span>
<span ng-...
Code Samples
<body ng-init=" cut = false ;">
<div ng-cut="cut = true" >
Lorem ipsum...
</div>
Cut? {{ cut }}
</body>
01.
0...
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...
AngularJS: Q&A - AngularJS Warsaw #3
AngularJS: Q&A - AngularJS Warsaw #3
AngularJS: Q&A - AngularJS Warsaw #3
AngularJS: Q&A - AngularJS Warsaw #3
AngularJS: Q&A - AngularJS Warsaw #3
AngularJS: Q&A - AngularJS Warsaw #3
AngularJS: Q&A - AngularJS Warsaw #3
AngularJS: Q&A - AngularJS Warsaw #3
AngularJS: Q&A - AngularJS Warsaw #3
AngularJS: Q&A - AngularJS Warsaw #3
AngularJS: Q&A - AngularJS Warsaw #3
AngularJS: Q&A - AngularJS Warsaw #3
AngularJS: Q&A - AngularJS Warsaw #3
AngularJS: Q&A - AngularJS Warsaw #3
AngularJS: Q&A - AngularJS Warsaw #3
AngularJS: Q&A - AngularJS Warsaw #3
AngularJS: Q&A - AngularJS Warsaw #3
AngularJS: Q&A - AngularJS Warsaw #3
AngularJS: Q&A - AngularJS Warsaw #3
AngularJS: Q&A - AngularJS Warsaw #3
AngularJS: Q&A - AngularJS Warsaw #3
AngularJS: Q&A - AngularJS Warsaw #3
AngularJS: Q&A - AngularJS Warsaw #3
AngularJS: Q&A - AngularJS Warsaw #3
AngularJS: Q&A - AngularJS Warsaw #3
Upcoming SlideShare
Loading in …5
×

AngularJS: Q&A - AngularJS Warsaw #3

969 views

Published on

My private notes about AngularJS - JavaScript framework to create SPA application. I was read two books and went to special training course about basics of AngularJS. During this presentation I will try to tell my history about progress of learning AngularJS.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

AngularJS: Q&A - AngularJS Warsaw #3

  1. 1. AngularJS: Q&A
  2. 2. 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
  3. 3. JavaScript Ninja
  4. 4. piecioshka.pl/blog github.com/piecioshka twitter.com/piecioshka soundcloud.com/piecioshka Where am I?
  5. 5. Book: AngularJS
  6. 6. Book: AngularJS. Pierwsze Kroki.
  7. 7. My private notes... let's go!
  8. 8. 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
  9. 9. Demo I was created special project for test that: •   https://github.com/piecioshka/test-angular-update-model-and-view 12
  10. 10. Demo I was created special project for test that: •   https://github.com/piecioshka/test-angular-directive-execution-order 14
  11. 11. Demo I was created special project for test that: •   https://github.com/piecioshka/test-angular-un-register-watch 16
  12. 12. More? Go go go!
  13. 13. Code Samples $scope.title = 'Function'; // Mozilla Firefox support Arrow Function natively. setTimeout( () => { $scope.title = 'Arrow Function?'; }, 1000); 01. 02. 03. 04. 05. 06. 22
  14. 14. Code Samples // Controller $scope.dataStructure = { foo: 'bar' } ; // View <span ng-bind="dataStructure"></span> {{ dataStructure }} {{ dataStructure | json }} 01. 02. 03. 04. 05. 06. 07. 24
  15. 15. Code Samples: Results // View (compiled) [object Object] {"foo":"bar"} { "foo": "bar" } 01. 02. 03. 04. 25
  16. 16. 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
  17. 17. Code Samples <!-- interpolation --> <span ng-cloak >{{ title }}</span> <!-- directive ng-bind --> <span ng-bind="title"></span> 01. 02. 03. 04. 05. 32
  18. 18. 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
  19. 19. 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
  20. 20. Demo I was created special project for test that: •   https://github.com/piecioshka/test-angular-disable-watchers 39
  21. 21. Last but not least!
  22. 22. Thanks!
  23. 23. 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

×