the angular way 19 october 2013 gdańsk

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

● marcin.wosinek@gmail.com● @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