the angular way 19 october 2013 gdańsk
DESCRIPTION
There is a lot of positive buzz about angular in front end js framework community - directives, two-way bindings, 'by google'. There is as well some critic - it's bigger then backbone, unlike ember it does dirty checking. In this presentation we will take a look on 'the angular way' the set of practice that is necessary to know if we want to fairy judge angular. So we will take a look on: * TDD and unit tests with karma test runner * yo generators * grunt server * angular separation of concernsTRANSCRIPT
The angular wayMeet js summit Gdańsk 19 October 2013
Who am I?● Marcin Wosinek● 5 years IT experience
- WebDev: Javascript- C# dev: UnitTests
● Currently js contractor in Roche in Poznan
You?
The buzz
Reality
Common pitfall
Angular strong points
● single page apps● forms● REST
Note
Angular’s domain
Angular’s domain NOT
Angular MV*
Model
Controller
ViewDirectives
Services
Concerns separationModel
Business logic
Controller
View logic
View
Declarative binding
Directives
DOM manip.
Services
Infrast. logic
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>
Modules - idea ● directives● services● controllers● filters
● directives● services● controllers● filters
Module A
Module B
START
file-a.js
file-b.js
Modules - splitting code
angular core
app core
user page admin page
angular ui
other lib
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>
Keeping code testable
● DOM● services● $window● TDD FTW
Karma
Test frameworks
Yeoman
Grunt
Yo generators
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
AngularJs community
● fb.com/groups/angularjs.polska● ng-camp?
Summary
Questions
?
Contact
● [email protected]● @MarcinWosinek● links, slides, notes and (hopefully) video:
http://bit.ly/ng-summit
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