The Art of AngularJS - DeRailed 2014

The Art of
Matt Raible • http://raibledesigns.com
Photos by

Modern Principles in Web Development
Design for mobile ﬁrst (even if you’re
not building a mobile app)

Build only single page apps

Create and use your own REST API

“Sex sells” applies to web apps

© 2014 Raible Designs

Jobs on Dice.com
February 2014
500

375

250

125


ut
ko
oc
Kn

be
r
Em

lar
gu
An

Ba

ck

bo
n

e

0

LinkedIn Skills
February 2014
30,000

22,500

15,000

7,500


be
r
Em

ut
ko
oc
Kn

lar
gu
An

Ba

ck

bo
n

e

0

Google Trends


Indeed Job Trends

Absolute
Relative

Stack Overﬂow


Who wants to learn


?

The History of AngularJS
Started by Miško Hevery in 2009

GWT = 3 developers, 6 months

AngularJS = 1 developer, 3 weeks

Learn more:

https://www.youtube.com/watch?v=X0VsStcCCM8


The History of AngularJS
AngularJS

GWT

18000

17,000
13500
9000
4500
0

1,000

Lines of Code


Hello World
<!doctype html>
<html ng-app>
<head>
<title>Hello World</title>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="name" placeholder="Enter a name here">
<hr>
<h1>Hello {{name}}!</h1>
</div>
<script src="http://code.angularjs.org/1.2.13/angular.min.js"></script>
</body>
</html>


Architecture Principles

Boilerplate

Structure

D.R.Y.
Testability

Code Organization
Start with Angular Seed*

!

git clone https://github.com/angular/angular-seed.git

!
!
!

* more options to be discussed later…

App Deﬁnition
var app = angular.module('myApp', []);

<!DOCTYPE html>
<html ng-app="myApp">


App Deﬁnition with separate ﬁles
app.js

!
!

angular.module('myApp', ['ngRoute',
'myApp.filters',
'myApp.services',
'myApp.directives',
'myApp.controllers'
])

controllers.js
angular.module('myApp.controllers', []).
controller('MyCtrl1', [function() {
!
}])


Model View Controller


Data Binding
friend.js

!

$scope.friend = {
name: "Fernand"
};

!

friend.html

{{friend.name}}
// 1-way
<input ng-model="friend.name"> // 2-way


Solving FOUC
This will work just ﬁne — if it’s not on the ﬁrst page:

!

<p>{{friend.name}}</p>

Use ng-cloak or ng-bind attribute:

<p ng-cloak>{{friend.name}}</p>
!
<p ng-bind="friend.name"></p>


Directives
<div ng-repeat="entry in news.entries">
<span ng-bind="entry.title"></span>
<button ng-click="delete($index)">
Delete
</button>
</div>


Directives with valid HTML5
<div data-ng-repeat="entry in news.entries">
<span data-ng-bind="entry.title"></span>
<button data-ng-click="delete($index)">
Delete
</button>
</div>
<div data-ng:repeat="entry in news.entries">
<span data-ng:bind="entry.title"></span>
<button data-ng:click="delete($index)">
Delete
</button>
</div>


Custom Directives
$scope.customer = {
name: 'Franklin',
address: '1830 Blake'
};
<div ng-controller="MyController">
<my-customer></my-customer>
</div>

.directive('myCustomer', function() {
return {
template: 'Name: {{customer.name}}
Address: {{customer.address}}'
};
});


Built-In Directives
ng-href

ng-selected

ng-src

ng-class

ng-disabled

ng-style

ng-checked

!

ng-readonly


Services
var services = angular.module('myApp.services', ['ngResource']);
!
services.factory('LoginService', function($resource) {
return $resource(':action', {}, {
authenticate: {
method: 'POST',
params: {'action': 'authenticate'},
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}
}
);
});
!
services.factory('NewsService', function($resource) {
return $resource('news/:id', {id: '@id'});
});


$http
$http({method: 'GET', url: '/news'}).
success(function(data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
}).
error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});

$http.get('/news').success(successCallback);
$http.post('/news', data).success(successCallback);


$q
myApp.factory('HelloWorld', function($q, $timeout) {
!
var getMessages = function() {
var deferred = $q.defer();
!
$timeout(function() {
deferred.resolve(['Hello', 'world!']);
}, 2000);
!
return deferred.promise;
};
!
return {
getMessages: getMessages
};
});

$q
myApp.controller('HelloCtrl', function($scope, HelloWorld) {
!
HelloWorld.getMessages().then(function(messages) {
$scope.messages = messages;
});
!
});


Dependency Injection
.controller('LoginController', function($scope, $rootScope, $location,
$http, $cookieStore, LoginService) {
$scope.login = function () {
LoginService.authenticate($.param({username: $scope.username,  
password: $scope.password}),
function (user) {
$rootScope.user = user;
$http.defaults.headers.common[xAuthTokenHeaderName] = user.token;
$cookieStore.put('user', user);
$location.path("/");
});
};
})


Filters
!
!
!
!

{{ name | uppercase }}
!

{{ 123.456789 | number:2 }}
!

{{ 1000 | currency }}
!

{{ ['Ari', 'Lerner', 'Likes', 'To', 'Eat', 'Pizza'] | filter:'e' }}

!

also: lowercase, limitTo, orderBy

Routes
.config(['$routeProvider', '$locationProvider', '$httpProvider',
function ($routeProvider, $locationProvider, $httpProvider) {
$routeProvider.when('/create', {
templateUrl: 'partials/create.html', controller: 'CreateController'
});
$routeProvider.when('/edit/:id', {
templateUrl: 'partials/edit.html', controller: 'EditController'
});
$routeProvider.when('/login', {
templateUrl: 'partials/login.html', controller: 'LoginController'
});
$routeProvider.otherwise({
templateUrl: 'partials/index.html', controller: 'IndexController'
});
!
$locationProvider.hashPrefix('!');
}]
)

Routing: Navigation
$rootScope.logout = function () {
delete $rootScope.user;
delete $http.defaults.headers.common[xAuthTokenHeaderName];
$cookieStore.remove('user');
$location.path("/login");
};


Code Organization Revisited
Lineman helps you build fat-client JavaScript apps

It produces happiness by building assets, mocking servers, and running
specs on every ﬁle change
git clone https://github.com/linemanjs/lineman-angular-template.git my-app
cd my-app
sudo npm install -g lineman
npm install
lineman run


Google's Recommendations for Angular App Structure

Testing
Testem - test runner, framework agnostic

Jasmine - unit tests, framework agnostic

Protractor - integration tests, angular speciﬁc

Lineman - productivity, framework agnostic


Testing: Controllers
describe("controller: LoginController", function() {
!
beforeEach(function() {
module("app");
});
!
beforeEach(inject(function($controller, $rootScope, $location,
AuthenticationService, $httpBackend) {
this.$location = $location;
this.$httpBackend = $httpBackend;
this.scope = $rootScope.$new();
this.redirect = spyOn($location, 'path');
$controller('LoginController', {
$scope: this.scope,
$location: $location,
AuthenticationService: AuthenticationService
});
}));

Testing: Controllers
afterEach(function() {
this.$httpBackend.verifyNoOutstandingRequest();
this.$httpBackend.verifyNoOutstandingExpectation();
});

!

describe("successfully logging in", function() {
it("should redirect you to /home", function() {
this.$httpBackend.expectPOST('/login',
this.scope.credentials).respond(200);
this.scope.login();
this.$httpBackend.flush();
expect(this.redirect).toHaveBeenCalledWith('/home');
});
});

});


Testing: Directives
beforeEach(inject(function($rootScope, $compile) {
this.directiveMessage = 'ralph was here';
this.html = "<div shows-message-when-hovered message='"
+ this.directiveMessage + "'></div>";
this.scope = $rootScope.$new();
this.scope.message = this.originalMessage = 'things are looking grim';
this.elem = $compile(this.html)(this.scope);
}));
!
describe("when a user mouses over the element", function() {
it("sets the message on the scope to the message attribute", function() {
this.elem.triggerHandler('mouseenter');
expect(this.scope.message).toBe(this.directiveMessage);
});
});


Testing: Directives with CoffeeScript
describe "directive: shows-message-when-hovered (coffeescript)", ->
!
Given -> module("app")
!
Given inject ($rootScope, $compile) ->
@directiveMessage = 'ralph was here'
@html = "<div shows-message-when-hovered
message='#{@directiveMessage}'></div>"
@scope = $rootScope.$new()
@scope.message = @originalMessage = 'things are looking grim'
@elem = $compile(@html)(@scope)
!
describe "when a user mouses over the element", ->
When -> @elem.triggerHandler('mouseenter')
Then "the message on the scope is set to the message attribute", ->
@scope.message == @directiveMessage


Testing: End-to-End
protractor = require("protractor")
require "protractor/jasminewd"
require 'jasmine-given'

!

describe "my angular app", ->
ptor = protractor.getInstance()
describe "visiting the login page", ->
Given -> ptor.get "/"

!

describe "when a user logs in", ->
Given -> ptor.findElement(protractor.By.input("credentials.username")).sendKeys "Ralph"
Given -> ptor.findElement(protractor.By.input("credentials.password")).sendKeys "Wiggum"
When -> ptor.findElement(protractor.By.id("log-in")).click()
Then -> ptor.findElement(protractor.By.binding("{{ message }}")).getText().then (text) ->
expect(text).toEqual "Mouse Over these images to see a directive at work"


Building with Grunt
sudo npm install
!
sudo npm install -g grunt-cli
!
vi package.json
!
"grunt": "~0.4.1",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-uglify": "~0.2.7",
"grunt-contrib-cssmin": "~0.7.0",
"grunt-usemin": "~2.0.2",
"grunt-contrib-copy": "~0.5.0",
"grunt-rev": "~0.1.0",
"grunt-contrib-clean": "~0.5.0",
"matchdep": "~0.3.0"


Gruntﬁle.js
module.exports = function (grunt) {

!
!
!

!

grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
clean: ["dist", '.tmp'],
copy: {
main: {
expand: true,
cwd: 'app/',
src: ['**', '!js/**', '!lib/**', '!**/*.css'],
dest: 'dist/'
}
},
rev: {
files: {
src: ['dist/**/*.{js,css}']
}
},

Gruntﬁle.js
!

useminPrepare: {
html: 'app/index.html'
},

!

usemin: {
html: ['dist/index.html']
},

!

uglify: {
options: {
report: 'min',
mangle: false
}
}
});

!

Gruntﬁle.js
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

!

// Tell Grunt what to do when we type "grunt" into the terminal
grunt.registerTask('default', [
'copy', 'useminPrepare', 'concat', 'uglify', 'cssmin', 'rev', 'usemin'
]);

};


index.html comments
<head>
<title>My AngularJS App</title>

<link rel="stylesheet" href="css/app.css"/>
<link rel="stylesheet" href="css/app2.css"/>

</head>
<body>

<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>

</body>

dist/index.html
<head>
<title>My AngularJS App</title>
<link rel="stylesheet" href="css/f050d0dc.seed.min.css"/>
</head>
<body>
!
<script src="js/8973cf0f.seed.min.js"></script>
</body>


After Grunt

http://raibledesigns.com/rd/entry/using_grunt_with_angularjs_for


You shouldn’t have to worry about FEO

http://raibledesigns.com/rd/entry/you_shouldn_t_have_to

HTTP/2 Performance Anti-Patterns?
Split dominant content domains

Reduce requests

Merging

Sprites

DataURIs
http://www.slideshare.net/andydavies

CloudBees


UI Bootstrap

http://angular-ui.github.io/bootstrap

<script src="lib/angular/ui-bootstrap-0.10.0.min.js"></script>
<script src="lib/angular/ui-bootstrap-tpls-0.10.0.min.js"></script>
angular.module('myApp', ['ui.bootstrap']);


Ionic Framework

http://ionicframework.com


AngularJS Batarang


My Experience
Developing with AngularJS Series

Part I: The Basics 
Part II: Dialogs and Data 
Part III: Services 
Part IV: Making it Pop 


My Experience

http://vimeo.com/mraible/angularjs-deep-dive

#dv13javaweb$


How to Become an Artist
Part 1 of 3: Learn the Basics on Your Own

Take some time and try various mediums of art

Recognize your strengths

Do your research and learn the basics

Get the supplies you will need

Observe the world around you

Make time for your art every day

Seek out the opinions of others

Develop your own style

http://www.wikihow.com/Become-an-Artist

Shortcut to becoming an Angular Artist

JUST DO IT.

Questions?
Contact Me!

http://raibledesigns.com

@mraible

Presentations

http://slideshare.net/mraible

Code

http://github.com/mraible

Who to follow on Twitter
AngularJS Team at Google

Web Performance

Miško Hevery - @mhevery

Ilya Grigorik - @igrigorik

Igor Minar - @IgorMinar

Andy Davis - @andydavies

Brian Ford - @briantford

Steve Souders - @Souders

!


Resources
Angular Dart

https://angulardart.org

Devoxx AngularJS Talks on Parleys.com

http://parleys.com/play/5148922b0364bc17fc56c91b (2012)

http://parleys.com/play/529321a5e4b054cd7d2ef4e1 (2013)

Egghead.io - https://egghead.io/

Code
Angular Seed

https://github.com/angular/angular-seed

Lineman Application Template using AngularJS

https://github.com/linemanjs/lineman-angular-template

AngularJS + Rest + Spring Security

https://github.com/joshlong/boot-examples/tree/master/x-auth-security

The Art of AngularJS - DeRailed 2014

More Related Content

What's hot (20)

Similar to The Art of AngularJS - DeRailed 2014 (20)

More from Matt Raible (20)

Recently uploaded (20)

The Art of AngularJS - DeRailed 2014