Download - The angular way 19 october 2013 Gdańsk
![Page 1: The angular way 19 october 2013 Gdańsk](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1efab4c905c5208b493b/html5/thumbnails/1.jpg)
The angular wayMeet js summit Gdańsk 19 October 2013
![Page 2: The angular way 19 october 2013 Gdańsk](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1efab4c905c5208b493b/html5/thumbnails/2.jpg)
Who am I?● Marcin Wosinek● 5 years IT experience
- WebDev: Javascript- C# dev: UnitTests
● Currently js contractor in Roche in Poznan
![Page 3: The angular way 19 october 2013 Gdańsk](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1efab4c905c5208b493b/html5/thumbnails/3.jpg)
You?
![Page 4: The angular way 19 october 2013 Gdańsk](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1efab4c905c5208b493b/html5/thumbnails/4.jpg)
The buzz
![Page 5: The angular way 19 october 2013 Gdańsk](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1efab4c905c5208b493b/html5/thumbnails/5.jpg)
Reality
![Page 6: The angular way 19 october 2013 Gdańsk](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1efab4c905c5208b493b/html5/thumbnails/6.jpg)
Common pitfall
![Page 7: The angular way 19 october 2013 Gdańsk](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1efab4c905c5208b493b/html5/thumbnails/7.jpg)
![Page 8: The angular way 19 october 2013 Gdańsk](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1efab4c905c5208b493b/html5/thumbnails/8.jpg)
![Page 9: The angular way 19 october 2013 Gdańsk](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1efab4c905c5208b493b/html5/thumbnails/9.jpg)
Angular strong points
● single page apps● forms● REST
![Page 10: The angular way 19 october 2013 Gdańsk](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1efab4c905c5208b493b/html5/thumbnails/10.jpg)
Note
![Page 11: The angular way 19 october 2013 Gdańsk](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1efab4c905c5208b493b/html5/thumbnails/11.jpg)
Angular’s domain
![Page 12: The angular way 19 october 2013 Gdańsk](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1efab4c905c5208b493b/html5/thumbnails/12.jpg)
Angular’s domain NOT
![Page 13: The angular way 19 october 2013 Gdańsk](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1efab4c905c5208b493b/html5/thumbnails/13.jpg)
Angular MV*
Model
Controller
ViewDirectives
Services
![Page 14: The angular way 19 october 2013 Gdańsk](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1efab4c905c5208b493b/html5/thumbnails/14.jpg)
Concerns separationModel
Business logic
Controller
View logic
View
Declarative binding
Directives
DOM manip.
Services
Infrast. logic
![Page 15: The angular way 19 october 2013 Gdańsk](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1efab4c905c5208b493b/html5/thumbnails/15.jpg)
Directives<ANY ng-show="{expression}">
<input ng-model="variable">
<ng-view> <any ng-view>
<ANY ng-class="{expression}">
<ANY ng-switch="expression"> <ANY ng-switch-when="matchValue1">...</ANY> <ANY ng-switch-when="matchValue2">...</ANY> ... <ANY ng-switch-default>...</ANY></ANY>
![Page 16: The angular way 19 october 2013 Gdańsk](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1efab4c905c5208b493b/html5/thumbnails/16.jpg)
Modules - idea ● directives● services● controllers● filters
● directives● services● controllers● filters
Module A
Module B
START
file-a.js
file-b.js
![Page 17: The angular way 19 october 2013 Gdańsk](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1efab4c905c5208b493b/html5/thumbnails/17.jpg)
Modules - splitting code
angular core
app core
user page admin page
angular ui
other lib
![Page 18: The angular way 19 october 2013 Gdańsk](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1efab4c905c5208b493b/html5/thumbnails/18.jpg)
Testability
function HelloCtrl($scope, $window, $log) { $scope.message = 'Display me in view'; …
}
<div ng-repeat="project in projects | filter:search | orderBy:'name'"> </div>
<form ng-submit="addTodo()"> <input ng-model="todoText" /></form>
![Page 19: The angular way 19 october 2013 Gdańsk](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1efab4c905c5208b493b/html5/thumbnails/19.jpg)
Keeping code testable
● DOM● services● $window● TDD FTW
![Page 20: The angular way 19 october 2013 Gdańsk](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1efab4c905c5208b493b/html5/thumbnails/20.jpg)
Karma
![Page 21: The angular way 19 october 2013 Gdańsk](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1efab4c905c5208b493b/html5/thumbnails/21.jpg)
Test frameworks
![Page 22: The angular way 19 october 2013 Gdańsk](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1efab4c905c5208b493b/html5/thumbnails/22.jpg)
Yeoman
![Page 23: The angular way 19 october 2013 Gdańsk](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1efab4c905c5208b493b/html5/thumbnails/23.jpg)
Grunt
![Page 24: The angular way 19 october 2013 Gdańsk](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1efab4c905c5208b493b/html5/thumbnails/24.jpg)
Yo generators
![Page 25: The angular way 19 october 2013 Gdańsk](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1efab4c905c5208b493b/html5/thumbnails/25.jpg)
Materials
● egghead io● youtube/angularjs● ng-module● books (disclaimer: neither of them I've read):
○ Mastering Web Application Development with AngularJS
○ AngularJS from O'Reilly
![Page 26: The angular way 19 october 2013 Gdańsk](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1efab4c905c5208b493b/html5/thumbnails/26.jpg)
AngularJs community
● fb.com/groups/angularjs.polska● ng-camp?
![Page 27: The angular way 19 october 2013 Gdańsk](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1efab4c905c5208b493b/html5/thumbnails/27.jpg)
Summary
![Page 28: The angular way 19 october 2013 Gdańsk](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1efab4c905c5208b493b/html5/thumbnails/28.jpg)
Questions
?
![Page 29: The angular way 19 october 2013 Gdańsk](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1efab4c905c5208b493b/html5/thumbnails/29.jpg)
Contact
● [email protected]● @MarcinWosinek● links, slides, notes and (hopefully) video:
http://bit.ly/ng-summit
![Page 30: The angular way 19 october 2013 Gdańsk](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1efab4c905c5208b493b/html5/thumbnails/30.jpg)
Credits● Audience photo: http://www.flickr.com/photos/dougbelshaw/5604047370/● Bees photo: http://www.flickr.com/photos/theseanster93/4056815767/● hammer & screw: http://www.flickr.com/photos/justinbaeder/5317820857● ie: http://en.wikipedia.org/wiki/File:IE6SP3XPscreenshot.PNG● admin page: http://www.flickr.com/photos/juggernautco/10065981863/● shopin cart: http://www.flickr.com/photos/sswinehart/4415385405● wikipedia: http://upload.wikimedia.org/wikipedia/commons/8/87/WikipediaMainPage.png● games: http://www.flickr.com/photos/ian_d/30859899