Angular js 24 april 2013 amsterdamjs

AngularJs
AmasterdamJs 24 April 2013

Who am I?
● Marcin Wosinek
● 5 years IT experience
- WebDev: Javascript
- C# dev: UnitTests
● Currently js contractor in Poznan, Poland

Traditional web architecture
Server
Client
html +
data
request

Application approach
Server
Client
js
template
RESTdata

Communication with backend
{
"firstName": "John",
"lastName": "Smith",
"age": 25,
"address": {
"streetAddress": "21 2nd Street",
"city": "New York",
"state": "NY",
"postalCode": 10021
}
}

Challenges - testability
function PasswordCtrl() {
var msg = $('.ex1 span');
var input = $('.ex1 input');
var strength;
this.grade = function() {
msg.removeClass(strength);
var pwd = input.val();
password.text(pwd);
if (pwd.length > 8) {
strength = 'strong';
}
else {
strength = 'weak';
}
msg
.addClass(strength)
.text(strength);

Challenges - boilerplate
initialize: function () {
this.allCheckbox = this.$('#toggle-all')[0];
this.$input = this.$('#new-todo');
this.$footer = this.$('#footer');
this.$main = this.$('#main');
this.listenTo(app.Todos ,'add',this.addOne);
this.listenTo(app.Todos, 'reset', this.addAll);
this.listenTo(app.Todos, 'change:completed', this.
filterOne);
this.listenTo(app.Todos, 'filter', this.filterAll);
this.listenTo(app.Todos, 'all', this.render);
app.Todos.fetch();
}

MV* Architecture
ViewModel
View Model
Shared with backend
$scope
Angular html
AngularJs core
Controller

View
<ul>
<li ng-repeat="todo in todos">
<span></span>
</li>
</ul>
<form ng-submit="addTodo()">
<input ng-model="todoText" />
<input type="submit" value="add" />
</form>

Filters
<ul>
<li ng-repeat="project in projects |
filter:search | orderBy:'name'">
<a href=""></a>:
</li>
</ul>

Plain JS objects
// Backbone
app.Todo = Backbone.Model.extend({
defaults: {
title: '',
completed: false }
});
// Ember
Todos.Todo = DS.Model.extend({
title: DS.attr('string'),
isCompleted: DS.attr('boolean') });
// Angular
todos.push({
title: $scope.newTodo,
completed: false });

Web form support
presentation

<form name="exampleForm" class="ng-pristine ng-invalid
ng-invalid-required">
Required field:
<input ng-model="required" required="" class="ng-
pristine
ng-invalid ng-invalid-required"></label> <br>
Email field:
<input ng-model="email" type="email" class="ng-pristine
ng-valid ng-valid-email"></label> <br>
<button ng-disabled="!exampleForm.$valid"
disabled="disabled">Submit</button>
</form>

Dependency injection
function HelloCtrl($scope, $window, $log) {
$scope.message = 'Display me in view';
$window.alert('Use window via $window service - that
improves testability');
$log.log('We can even test console log calls - thats to
$log wrapper');
}

Services
// Services that persists and retrieves ToDos from
// localStorage
todomvc.factory('todoStorage', function () {
var STORAGE_ID = 'todos-angularjs';
return {
get: function () {
return JSON
.parse(localStorage.getItem(STORAGE_ID) || '[]');
},
put: function (todos) {
localStorage
.setItem(STORAGE_ID, JSON.stringify(todos));
}};});

Routing - $routeProvider
angular.module('phonecat', [])
.config(['$routeProvider',
function($routeProvider, $locationProvider) {
// $locationProvider.html5Mode(true);
$routeProvider
.when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: PhoneListCtrl
})
.when('/phones/:phoneId', {
templateUrl: 'partials/phone-detail.html',
controller: PhoneDetailCtrl
})
.otherwise({
redirectTo: '/phones'
});}]);

REST - $resource
myApp.factory('ProductService', function($resource) {
var ProductResource = $resource('/product/:productId')
, ProductService = {};
ProductService.getItem = function (index) {
return ProductResource.get({productId: index});}
ProductService.addItem = function (item) {
ProductResource.save({}, item));}
return ProductService;
});
function ProductCtrl($scope, ProductService) {
// Take products form ProductService and put it on
$scope
}

Directives
<ANY class="ng-show: {expression};">
<ANY ng-show="{expression}">
<ANY class="ng-hide: {expression};">
<ANY ng-hide="{expression}">
<ng-view> <any ng-view>
<ANY ng-class="{expression}"> <ANY class="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>

Habits
Changing DOM in
controller

Gotchas - writing directives
angular.module('blink', [])
.directive('blink', function() {
return {
restrict: 'E',
link: function(scope, elm, attr) {
setInterval(function() {
elm.toggle();
}, parseInt(attr.interval, 10) || 1000);
}
};
});

Gotchas - ng-model in ng-repeat
// Gotcha!
<ul>
<li ng-repeat="item in list">
<input ng-model="item" />
</li>
</ul>
// Work as expected
<ul>
<li ng-repeat="item in list">
<input ng-model="item.name" />
</li>
</ul>

Gotchas - code minification
syngularApp.controller('ProductCtrl', function($scope,
ProductApi) {
// easy but minification unfriendly
});
syngularApp.controller('ProductCtrl', ['$scope',
'ProductApi', function($scope, ProductApi) {
// minification resistant
}]);

Gotchas - filters working only on arrays
filter
orderBy

Gotchas - updating data from
outside angular
$digest
$apply

Gotchas - $ in service names
$

Learning materials
● http://angularjs.org/
● http://egghead.io/
● http://www.youtube.com/user/angularjs

Contact
● marcin.wosinek@gmail.com
● @MarcinWosinek
● links, slides, notes and (hopefully) video:
http://bit.ly/AngularJs-AmsterdamJS

Credits
● Audience photo: http://www.flickr.com/photos/dougbelshaw/5604047370/in/photostream
● BackboneJs logo: https://github.com/documentcloud/backbone/blob/master/docs/images/backbone.
● Two ways binding: http://docs.angularjs.org/guide/dev_guide.templates.databinding
● http://karma-runner.github.io/0.8/index.html
● http://yeoman.io/

Angular js 24 april 2013 amsterdamjs

More Related Content

What's hot (17)

Viewers also liked (20)

Similar to Angular js 24 april 2013 amsterdamjs (20)

More from Marcin Wosinek (7)

Angular js 24 april 2013 amsterdamjs