AngularJS: Q&A - AngularJS Warsaw #3

•

1 gostou•1,292 visualizações

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.

Tecnologia

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

piecioshka.pl/blog github.com/piecioshka
twitter.com/piecioshka soundcloud.com/piecioshka
Where am I?

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

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

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

Mais conteúdo relacionado

Mais procurados

Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - GeekOut 2016Matt Raible

Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx 2015Matt Raible

Choosing the best JavaScript framework/library/toolkitHristo Chakarov

Introduction to Node.jsTroy Miles

Rags to Open Source - AllThingsOpen, Raleigh, NC 2014Mike McNeil

SPA, Scalable Application & AngularJSMitch Chen

Introduction to Node.jsAaron Rosenberg

On Selecting JavaScript Frameworks (Women Who Code 10/15)Zoe Landon

HH.JS - State of the AutomationAdam Christian

WHAT / WHY / HOW WE’RE ENGINEERING AT SMARTSTUDY (English)Hyun-woo Park

Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Angular Summit 2015Matt Raible

9 anti-patterns for node.js teamsJeff Harrell

Unleash and Empower Your EngineersJeff Harrell

Unobtrusive JavaScript with jQuerySimon Willison

Spa with angularDanny Vernovsky

Node.js Anti-Patterns and bad practicesIgor Soarez

React native: building native iOS apps with javascriptPolidea

Your java script libraryjasfog

Mais procurados (18)

Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - GeekOut 2016

Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx 2015

Choosing the best JavaScript framework/library/toolkit

Introduction to Node.js

Rags to Open Source - AllThingsOpen, Raleigh, NC 2014

SPA, Scalable Application & AngularJS

Introduction to Node.js

On Selecting JavaScript Frameworks (Women Who Code 10/15)

HH.JS - State of the Automation

WHAT / WHY / HOW WE’RE ENGINEERING AT SMARTSTUDY (English)

Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Angular Summit 2015

9 anti-patterns for node.js teams

Unleash and Empower Your Engineers

Unobtrusive JavaScript with jQuery

Spa with angular

Node.js Anti-Patterns and bad practices

React native: building native iOS apps with javascript

Your java script library

Semelhante a AngularJS: Q&A - AngularJS Warsaw #3

Lessons in Open Source from the MongooseJS ODMValeri Karpov

AngularJS Beginners WorkshopSathish VJ

TDC 2016 SP - 5 libs de teste JavaScript que você deveria conhecerStefan Teixeira

Node.JS WorkshopHengki Sihombing

Kickstarter Your Node.JS ApplicationHengki Sihombing

What is Angular version 4?Troy Miles

Let's unRiddle jsFiddlerhoward_blk

Learning from the Best jQuery PluginsMarc Grabanski

Mvvm knockout vs angularBasarat Syed

Rapidly scaffold your frontend with yeomanSimon Waibl

Jenkins-Koji plugin presentation on Python & Ruby devel group @ BrnoVaclav Tunka

The Cowardly Test-o-Phobe's Guide To TestingTim Duckett

Building and Scaling a Test Driven CultureDaniel Doubrovkine

JavaScripters Event Sep 17, 2016 · 2:00 PM: Scalable Javascript Design PatternsJavaScripters Community

YeomanJames Cryer

[NDC2017] 딥러닝으로 게임 콘텐츠 제작하기 - VAE를 이용한 콘텐츠 생성 기법 연구 사례Hwanhee Kim

BUILDING MODERN WEB UIS WITH WEB COMPONENTS @ DevoxxHendrik Ebbers

Kevin Whinnery: Write Better JavaScriptAxway Appcelerator

NodeSummit - MEAN StackValeri Karpov

Web a Quebec - JS DebuggingRami Sayar

Semelhante a AngularJS: Q&A - AngularJS Warsaw #3 (20)

Lessons in Open Source from the MongooseJS ODM

AngularJS Beginners Workshop

TDC 2016 SP - 5 libs de teste JavaScript que você deveria conhecer

Node.JS Workshop

Kickstarter Your Node.JS Application

What is Angular version 4?

Let's unRiddle jsFiddle

Learning from the Best jQuery Plugins

Mvvm knockout vs angular

Rapidly scaffold your frontend with yeoman

Jenkins-Koji plugin presentation on Python & Ruby devel group @ Brno

The Cowardly Test-o-Phobe's Guide To Testing

Building and Scaling a Test Driven Culture

JavaScripters Event Sep 17, 2016 · 2:00 PM: Scalable Javascript Design Patterns

Yeoman

[NDC2017] 딥러닝으로 게임 콘텐츠 제작하기 - VAE를 이용한 콘텐츠 생성 기법 연구 사례

BUILDING MODERN WEB UIS WITH WEB COMPONENTS @ Devoxx

Kevin Whinnery: Write Better JavaScript

NodeSummit - MEAN Stack

Web a Quebec - JS Debugging

Último

04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG

Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2

Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j

Slack Application Development 101 Slidespraypatel2

CNv6 Instructor Chapter 6 Quality of Servicegiselly40

Injustice - Developers Among Us (SciFiDevCon 2024)Allon Mureinik

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung

08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls

Unblocking The Main Thread Solving ANRs and Frozen FramesSinan KOZAK

Finology Group – Insurtech Innovation Award 2024The Digital Insurer

Developing An App To Navigate The Roads of BrazilV3cube

WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure servicePooja Nehwal

Driving Behavioral Change for Information Management through Data-Driven Gree...Enterprise Knowledge

Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...Neo4j

A Call to Action for Generative AI in 2024Results

Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...gurkirankumar98700

Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo

GenCyber Cyber Security Day PresentationMichael W. Hawkins

The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge

AngularJS: Q&A - AngularJS Warsaw #3

1. AngularJS: Q&A

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. JavaScript Ninja

4. piecioshka.pl/blog github.com/piecioshka twitter.com/piecioshka soundcloud.com/piecioshka Where am I?

5. Book: AngularJS

6. Book: AngularJS. Pierwsze Kroki.

7. My private notes... let's go!

10. 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

11.

12. Demo I was created special project for test that: • https://github.com/piecioshka/test-angular-update-model-and-view 12

13.

14. Demo I was created special project for test that: • https://github.com/piecioshka/test-angular-directive-execution-order 14

15.

16. Demo I was created special project for test that: • https://github.com/piecioshka/test-angular-un-register-watch 16

17.

18.

19. More? Go go go!

20.

21.

22. Code Samples $scope.title = 'Function'; // Mozilla Firefox support Arrow Function natively. setTimeout( () => { $scope.title = 'Arrow Function?'; }, 1000); 01. 02. 03. 04. 05. 06. 22

23.

24. Code Samples // Controller $scope.dataStructure = { foo: 'bar' } ; // View {{ dataStructure }} {{ dataStructure | json }} 01. 02. 03. 04. 05. 06. 07. 24

25. Code Samples: Results // View (compiled) [object Object] {"foo":"bar"} { "foo": "bar" } 01. 02. 03. 04. 25

26.

27. 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

28.

29.

30.

31.

32. Code Samples  {{ title }}  01. 02. 03. 04. 05. 32

33.

34. Code Samples < ng-switch on="foo" > Bar Baz Abc ... </ng-switch> 01. 02. 03. 04. 05. 06. 34

35.

36. 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

37.

38.

39. Demo I was created special project for test that: • https://github.com/piecioshka/test-angular-disable-watchers 39

40.

41.

42.

43.

44.

45. Last but not least!

46.

47. Thanks!

48. 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

AngularJS: Q&A - AngularJS Warsaw #3

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (18)

Semelhante a AngularJS: Q&A - AngularJS Warsaw #3

Semelhante a AngularJS: Q&A - AngularJS Warsaw #3 (20)

Último

Último (20)

AngularJS: Q&A - AngularJS Warsaw #3