Full-Stack Development with Javascript Angular/Node (AngularJS/NodeJS)

1. MEAN - Notes from the field
Chris Clarke
Hydrahack Birmingham
18th March 2014
Full-Stack Development with Javascript

4. • Mongo
• Express
• AngularJS
• NodeJS
http://github.com/linnovate/mean
What’s MEAN?

5. Who are Talis?

6. • MongoDB ~2.5yrs
• Using express/node ~2yrs
• Angular ~9 months

7. Angular AppAngular App
Typical MEAN Shape
DBDB
APIAPI
Server side
pages
Server side
pages
StaticsStatics
JSON
JSON
HTMLHTML
JSON
Client side
Server side

8. Typical structure

9. Typical structure

10. Typical structure

11. Typical structure

12. Video Timeline Editor

13. Textbook Player

14. Angular 101
• Single page web app framework, by Google
• Extends HTML vocabulary to provide dynamic
views
• Broadly MVC (more accurately MVVM)
• Bi-directional data binding to HTML

15. Angular 101
• Routing
• Templates
• Controllers
• Directives

16. Routing
$routeProvider.when('/modules/:module_id', {
templateUrl: 'partials/module.html',
controller: 'TeachCtrl',
loginRequired: true,
activeTab:"teach"
});

17. Routing
$routeProvider.when('/modules/:module_id', {
templateUrl: 'partials/module.html',
controller: 'TeachCtrl',
loginRequired: true,
activeTab:"teach"
});

18. Routing
$routeProvider.when('/modules/:module_id', {
templateUrl: 'partials/module.html',
controller: 'TeachCtrl',
loginRequired: true,
activeTab:"teach"
});

19. Routing
$routeProvider.when('/modules/:module_id', {
templateUrl: 'partials/module.html',
controller: 'TeachCtrl',
loginRequired: true,
activeTab:"teach"
});

20. Routing
$routeProvider.when('/modules/:module_id', {
templateUrl: 'partials/module.html',
controller: 'TeachCtrl',
loginRequired: true,
activeTab:"teach"
});

21. <ul ng-show="modules!=null">
<li ng-repeat="m in modules | orderBy:'title'"
ng-class="{active:module._id==m._id}">
<a ng-href="#/modules/{{ m._id }}">{{m.title}}</a>
</li>
<li>
<a ng-click="add()">Add new</a>
</li>
</ul>

22. <ul ng-show="modules!=null">
<li ng-repeat="m in modules | orderBy:'title'"
ng-class="{active:module._id==m._id}">
<a ng-href="#/modules/{{ m._id }}">{{m.title}}</a>
</li>
<li>
<a ng-click="add()">Add new</a>
</li>
</ul>

23. <ul ng-show="modules!=null">
<li ng-repeat="m in modules | orderBy:'title'"
ng-class="{active:module._id==m._id}">
<a ng-href="#/modules/{{ m._id }}">{{m.title}}</a>
</li>
<li>
<a ng-click="add()">Add new</a>
</li>
</ul>

24. <ul ng-show="modules!=null">
<li ng-repeat="m in modules | orderBy:'title'"
ng-class="{active:module._id==m._id}">
<a ng-href="#/modules/{{ m._id }}">{{m.title}}</a>
</li>
<li>
<a ng-click="add()">Add new</a>
</li>
</ul>

25. <ul ng-show="modules!=null">
<li ng-repeat="m in modules | orderBy:'title'"
ng-class="{active:module._id==m._id}">
<a ng-href="#/modules/{{ m._id }}">{{m.title}}</a>
</li>
<li>
<a ng-click="add()">Add new</a>
</li>
</ul>

26. <ul ng-show="modules!=null">
<li ng-repeat="m in modules | orderBy:'title'"
ng-class="{active:module._id==m._id}">
<a ng-href="#/modules/{{ m._id }}">{{m.title}}</a>
</li>
<li>
<a ng-click="add()">Add new</a>
</li>
</ul>

27. <ul ng-show="modules!=null">
<li ng-repeat="m in modules | orderBy:'title'"
ng-class="{active:module._id==m._id}">
<a ng-href="#/modules/{{ m._id }}">{{m.title}}</a>
</li>
<li>
<a ng-click="add()">Add new</a>
</li>
</ul>

28. <input ng-model="profile.first_name" type="text" required>
<input ng-model="profile.surname" type="text" required>
<input ng-model="profile.email" type="email" required>
<button ng-disabled="!profile.email"
ng-click="update()">Update</button>

29. <input ng-model="profile.first_name" type="text" required>
<input ng-model="profile.surname" type="text" required>
<input ng-model="profile.email" type="email" required>
<button ng-disabled="!profile.email"
ng-click="update()">Update</button>

30. <input ng-model="profile.first_name" type="text" required>
<input ng-model="profile.surname" type="text" required>
<input ng-model="profile.email" type="email" required>
<button ng-disabled="!profile.email"
ng-click="update()">Update</button>

31. <input ng-model="profile.first_name" type="text" required>
<input ng-model="profile.surname" type="text" required>
<input ng-model="profile.email" type="email" required>
<button ng-disabled="!profile.email"
ng-click="update()">Update</button>

32. QuickTime™ and a
'avc1' decompressor
are needed to see this picture.

33. Controllers Horizontal
angular.module('talis.controllers.user', [])
.controller('AccountCtrl',function($scope, userSvc) {
// update the profile
$scope.update = function() {
userSvc.updateProfile($scope.profile,function(err,profile) {
if (!err) {
$scope.profile = profile;
}
});
})
.controller('SomeOtherCtrl',....);

34. Controllers Horizontal
angular.module('talis.controllers.user', [])
.controller('AccountCtrl',function($scope, userSvc) {
// update the profile
$scope.update = function() {
userSvc.updateProfile($scope.profile,function(err,profile) {
if (!err) {
$scope.profile = profile;
}
});
})
.controller('SomeOtherCtrl',....);

35. Controllers Horizontal
angular.module('talis.controllers.user', [])
.controller('AccountCtrl',function($scope, userSvc) {
// update the profile
$scope.update = function() {
userSvc.updateProfile($scope.profile,function(err,profile) {
if (!err) {
$scope.profile = profile;
}
});
})
.controller('SomeOtherCtrl',....);

36. Controllers Horizontal
angular.module('talis.controllers.user', [])
.controller('AccountCtrl',function($scope, userSvc) {
// update the profile
$scope.update = function() {
userSvc.updateProfile($scope.profile,function(err,profile) {
if (!err) {
$scope.profile = profile;
}
});
})
.controller('SomeOtherCtrl',....);

37. Controllers Horizontal
angular.module('talis.controllers.user', [])
.controller('AccountCtrl',function($scope, userSvc) {
// update the profile
$scope.update = function() {
userSvc.updateProfile($scope.profile,function(err,profile) {
if (!err) {
$scope.profile = profile;
}
});
})
.controller('SomeOtherCtrl',....);

38. Controllers Horizontal
angular.module('talis.controllers.user', [])
.controller('AccountCtrl',function($scope, userSvc) {
// update the profile
$scope.update = function() {
userSvc.updateProfile($scope.profile,function(err,profile) {
if (!err) {
$scope.profile = profile;
}
});
})
.controller('SomeOtherCtrl',....);

39. Directives
<textbook-player user="user" textbook="textbook">
...
</textbook-player>

40. Directives
<textbook-player user="user" textbook="textbook">
...
</textbook-player>

41. Directives
<div user="user" textbook="textbook" textbook-player>
...
</div>

42. Directives
<div user="user" textbook="textbook" textbook-player>
...
</div>
angular.module('talis.directives.player.textbook', [])
.directive("textbookPlayer", function() {
return {
restrict: "A",
scope: {
user: '=',
entity: '='
},
controller: function($scope,textbookSvc) {
// textbook logic in here
}
}
});

43. Directives
<div user="user" textbook="textbook" textbook-player>
...
</div>
angular.module('talis.directives.player.textbook', [])
.directive("textbookPlayer", function() {
return {
restrict: "A",
scope: {
user: '=',
entity: '='
},
controller: function($scope,textbookSvc) {
// textbook logic in here
}
}
});

44. Directives
<div user="user" textbook="textbook" textbook-player>
...
</div>
angular.module('talis.directives.player.textbook', [])
.directive("textbookPlayer", function() {
return {
restrict: "A",
scope: {
user: '=',
entity: '='
},
controller: function($scope,textbookSvc) {
// textbook logic in here
}
}
});

45. Directives
<div user="user" textbook="textbook" textbook-player>
...
</div>
angular.module('talis.directives.player.textbook', [])
.directive("textbookPlayer", function() {
return {
restrict: "A",
scope: {
user: '=',
entity: '='
},
controller: function($scope,textbookSvc) {
// textbook logic in here
}
}
});

46. –Jonny Clientside
“Waat?”

47. Notes From the Field
Act I: The Basics

48. Elem vs. Attr directives
<textbook-player user="user" textbook="textbook">
...
</textbook-player>
<div user="user" textbook="textbook" textbook-player>
...
</div>

49. Minification
angular.module('talis.controllers.user', [])
.controller('AccountCtrl',function($scope, userSvc) {
..
});
angular.module('talis.controllers.user', [])
.controller('AccountCtrl',['$scope','userSvc’,
function($scope, userSvc) {
...
}
]);

50. Minification
angular.module('talis.controllers.user', [])
.controller('AccountCtrl',function($scope, userSvc) {
..
});
angular.module('talis.controllers.user', [])
.controller('AccountCtrl',['$scope','userSvc’,
function($scope, userSvc) {
...
}
]);
a.m('talis.controllers.user', [])
.c('AccountCtrl',['$scope','userSvc’,
function(s, u) {
...
}
]);

51. Mongo _id
{
_id: ObjectId(1234),
name: “Jonny Clientside”,
age: 24,
interests: [‘JQuery’,‘HTML5’
}
<a ng-href="#/people/{{ p._id }}">{{p.name}}</a>

52. Notes From the Field
Act II: Advanced

53. Angular AppAngular App
Typical MEAN Shape
DBDB
APIAPI
Server side
pages
Server side
pages
StaticsStatics
JSON
JSON
HTMLHTML
JSON
Client side
Server side

54. Angular AppAngular App
JSON
9090
9090
9090
9090
Users
API
Users
API
APIAPI
Server side
pages
Server side
pages
StaticsStatics
JSON
JSON
JSON
Client side
Meta
API
Meta
API
Files
API
Files
API
Anno
API
Anno
API
JSON
DBDBDBDBDBDB DBDB
RedisRedisRedisRedis
HTMLHTML
JSON

55. Logging
• A lot of activity in the client side
• Some within Express/Node server side
• More behind your API proxy

56. var loggingModule = angular.module('talis.services.logging', []);
loggingModule.factory(
"traceService",
function(){
return({
print: printStackTrace
});
}
);
loggingModule.provider(
"$exceptionHandler",{
$get: function(exceptionLoggingService){
return(exceptionLoggingService);
}
}
);

57. var loggingModule = angular.module('talis.services.logging', []);
loggingModule.factory(
"traceService",
function(){
return({
print: printStackTrace
});
}
);
loggingModule.provider(
"$exceptionHandler",{
$get: function(exceptionLoggingService){
return(exceptionLoggingService);
}
}
);

58. loggingModule.factory(
"exceptionLoggingService",
["$log","$window", "traceService",
function($log, $window, traceService){
function error(exception, cause){
$log.error.apply($log, arguments);
try{
var errorMessage = exception.toString();
var stackTrace = traceService.print({e: exception});
$.ajax({
type: "POST",
url: "/logger",
contentType: "application/json",
data: angular.toJson({
url: $window.location.href,
message: errorMessage,
type: "exception",
stackTrace: stackTrace,
cause: ( cause || "")
})
});
} catch (loggingError){
$log.warn("Error server-side logging failed");
$log.log(loggingError);
}
}
return(error);
}]
);

60. Logging

61. Security
• APIs secured with OAuth 2.0 Bearer tokens
• Tokens obtained with a key/secret
• If your app is downloaded and run on the client,
where do you put the secret?

62. Security
• Have node return the OAuth token as JSON behind
a login barrier
• Angular requests this JSON when a route that
requires login is first requsted
• If status != 200, Angular app redirects browser to
login page
• User logs in, repeat

63. Security
• Dealing with tokens on every service call is a PITA
• Tokens expiring is normal
• Deal with it globally using a couple of advanced
$http features

64. .run(function($rootScope,$injector) {
$injector.get("$http").defaults.transformRequest =
function(data, headersGetter) {
headersGetter()['Authorization']="Bearer "+$rootScope.token
if (data) {
return angular.toJson(data);
}
};
});

65. $httpProvider.responseInterceptors.push(
function ($rootScope, $q, $injector, $location) {
return function(promise) {
return promise.then(function(response) {
return response; // no action, was successful
}, function (response) {
// error - was it 401 or something else?
if (response.status===401 && response.data.error && response.data.error === "invalid_token") {
var deferred = $q.defer(); // defer until we can re-request a new token
// Get a new token... (cannot inject $http directly as will cause a circular ref)
$injector.get("$http").jsonp('/some/endpoint/that/reissues/tokens?cb=JSON_CALLBACK')
.then(function(loginResponse) {
if (loginResponse.data) {
$rootScope.oauth = loginResponse.data.oauth; // we have a new oauth token - set at $rootScope
// now let's retry the original request
$injector.get("$http")(response.config).then(function(response) {
// we have a successful response - resolve it using deferred
deferred.resolve(response);
},function(response) {
deferred.reject(); // something went wrong
});
} else {
deferred.reject(); // login.json didn't give us data
}
}, function(response) {
deferred.reject(); // token retry failed, redirect so user can login again
$location.path('/user/sign/in');
return;
});
return deferred.promise; // return the deferred promise
}
return $q.reject(response); // not a recoverable error
});
};
});

66. $httpProvider.responseInterceptors.push(
function ($rootScope, $q, $injector, $location) {
return function(promise) {
return promise.then(function(response) {
return response; // no action, was successful
}, function (response) {
// error - was it 401 or something else?
if (response.status===401 && response.data.error && response.data.error === "invalid_token") {
var deferred = $q.defer(); // defer until we can re-request a new token
// Get a new token... (cannot inject $http directly as will cause a circular ref)
$injector.get("$http").jsonp('/some/endpoint/that/reissues/tokens?cb=JSON_CALLBACK')
.then(function(loginResponse) {
if (loginResponse.data) {
$rootScope.oauth = loginResponse.data.oauth; // we have a new oauth token - set at $rootScope
// now let's retry the original request
$injector.get("$http")(response.config).then(function(response) {
// we have a successful response - resolve it using deferred
deferred.resolve(response);
},function(response) {
deferred.reject(); // something went wrong
});
} else {
deferred.reject(); // login.json didn't give us data
}
}, function(response) {
deferred.reject(); // token retry failed, redirect so user can login again
$location.path('/user/sign/in');
return;
});
return deferred.promise; // return the deferred promise
}
return $q.reject(response); // not a recoverable error
});
};
});

67. $httpProvider.responseInterceptors.push(
function ($rootScope, $q, $injector, $location) {
return function(promise) {
return promise.then(function(response) {
return response; // no action, was successful
}, function (response) {
// error - was it 401 or something else?
if (response.status===401 && response.data.error && response.data.error === "invalid_token") {
var deferred = $q.defer(); // defer until we can re-request a new token
// Get a new token... (cannot inject $http directly as will cause a circular ref)
$injector.get("$http").jsonp('/some/endpoint/that/reissues/tokens?cb=JSON_CALLBACK')
.then(function(loginResponse) {
if (loginResponse.data) {
$rootScope.oauth = loginResponse.data.oauth; // we have a new oauth token - set at $rootScope
// now let's retry the original request
$injector.get("$http")(response.config).then(function(response) {
// we have a successful response - resolve it using deferred
deferred.resolve(response);
},function(response) {
deferred.reject(); // something went wrong
});
} else {
deferred.reject(); // login.json didn't give us data
}
}, function(response) {
deferred.reject(); // token retry failed, redirect so user can login again
$location.path('/user/sign/in');
return;
});
return deferred.promise; // return the deferred promise
}
return $q.reject(response); // not a recoverable error
});
};
});

68. $httpProvider.responseInterceptors.push(
function ($rootScope, $q, $injector, $location) {
return function(promise) {
return promise.then(function(response) {
return response; // no action, was successful
}, function (response) {
// error - was it 401 or something else?
if (response.status===401 && response.data.error && response.data.error === "invalid_token") {
var deferred = $q.defer(); // defer until we can re-request a new token
// Get a new token... (cannot inject $http directly as will cause a circular ref)
$injector.get("$http").jsonp('/some/endpoint/that/reissues/tokens?cb=JSON_CALLBACK')
.then(function(loginResponse) {
if (loginResponse.data) {
$rootScope.oauth = loginResponse.data.oauth; // we have a new oauth token - set at $rootScope
// now let's retry the original request
$injector.get("$http")(response.config).then(function(response) {
// we have a successful response - resolve it using deferred
deferred.resolve(response);
},function(response) {
deferred.reject(); // something went wrong
});
} else {
deferred.reject(); // login.json didn't give us data
}
}, function(response) {
deferred.reject(); // token retry failed, redirect so user can login again
$location.path('/user/sign/in');
return;
});
return deferred.promise; // return the deferred promise
}
return $q.reject(response); // not a recoverable error
});
};
});

69. $httpProvider.responseInterceptors.push(
function ($rootScope, $q, $injector, $location) {
return function(promise) {
return promise.then(function(response) {
return response; // no action, was successful
}, function (response) {
// error - was it 401 or something else?
if (response.status===401 && response.data.error && response.data.error === "invalid_token") {
var deferred = $q.defer(); // defer until we can re-request a new token
// Get a new token... (cannot inject $http directly as will cause a circular ref)
$injector.get("$http").jsonp('/some/endpoint/that/reissues/tokens?cb=JSON_CALLBACK')
.then(function(loginResponse) {
if (loginResponse.data) {
$rootScope.oauth = loginResponse.data.oauth; // we have a new oauth token - set at $rootScope
// now let's retry the original request
$injector.get("$http")(response.config).then(function(response) {
// we have a successful response - resolve it using deferred
deferred.resolve(response);
},function(response) {
deferred.reject(); // something went wrong
});
} else {
deferred.reject(); // login.json didn't give us data
}
}, function(response) {
deferred.reject(); // token retry failed, redirect so user can login again
$location.path('/user/sign/in');
return;
});
return deferred.promise; // return the deferred promise
}
return $q.reject(response); // not a recoverable error
});
};
});

70. $httpProvider.responseInterceptors.push(
function ($rootScope, $q, $injector, $location) {
return function(promise) {
return promise.then(function(response) {
return response; // no action, was successful
}, function (response) {
// error - was it 401 or something else?
if (response.status===401 && response.data.error && response.data.error === "invalid_token") {
var deferred = $q.defer(); // defer until we can re-request a new token
// Get a new token... (cannot inject $http directly as will cause a circular ref)
$injector.get("$http").jsonp('/some/endpoint/that/reissues/tokens?cb=JSON_CALLBACK')
.then(function(loginResponse) {
if (loginResponse.data) {
$rootScope.oauth = loginResponse.data.oauth; // we have a new oauth token - set at $rootScope
// now let's retry the original request
$injector.get("$http")(response.config).then(function(response) {
// we have a successful response - resolve it using deferred
deferred.resolve(response);
},function(response) {
deferred.reject(); // something went wrong
});
} else {
deferred.reject(); // login.json didn't give us data
}
}, function(response) {
deferred.reject(); // token retry failed, redirect so user can login again
$location.path('/user/sign/in');
return;
});
return deferred.promise; // return the deferred promise
}
return $q.reject(response); // not a recoverable error
});
};
});

71. $httpProvider.responseInterceptors.push(
function ($rootScope, $q, $injector, $location) {
return function(promise) {
return promise.then(function(response) {
return response; // no action, was successful
}, function (response) {
// error - was it 401 or something else?
if (response.status===401 && response.data.error && response.data.error === "invalid_token") {
var deferred = $q.defer(); // defer until we can re-request a new token
// Get a new token... (cannot inject $http directly as will cause a circular ref)
$injector.get("$http").jsonp('/some/endpoint/that/reissues/tokens?cb=JSON_CALLBACK')
.then(function(loginResponse) {
if (loginResponse.data) {
$rootScope.oauth = loginResponse.data.oauth; // we have a new oauth token - set at $rootScope
// now let's retry the original request
$injector.get("$http")(response.config).then(function(response) {
// we have a successful response - resolve it using deferred
deferred.resolve(response);
},function(response) {
deferred.reject(); // something went wrong
});
} else {
deferred.reject(); // login.json didn't give us data
}
}, function(response) {
deferred.reject(); // token retry failed, redirect so user can login again
$location.path('/user/sign/in');
return;
});
return deferred.promise; // return the deferred promise
}
return $q.reject(response); // not a recoverable error
});
};
});

72. Environments
• Pretty usual to deal with prod, dev, testing
environment config on the server side
• Inject this into your client side app using a dynamic
JS include

73. Environments
<script type="text/javascript" src="env/config.js"></script>

74. Environments
angular.module('talis.environment', [], function($provide)
constant('API_ENDPOINT', 'http://localhost:3000').
constant('ACTIVATE_FEATURE_FLIPS',true);

75. Environments
angular.module('talis.environment', [], function($provide)
constant('API_ENDPOINT', 'https://talis.com').
constant('ACTIVATE_FEATURE_FLIPS',false);

76. That’s it.

77. http://engineering.talis.com

78. We are hiring!
http://www.talis.com/jobs

79. @talis
facebook.com/talisgroup
+44 (0) 121 374 2740
talis.com
info@talis.com
48 Frederick Street
Birmingham
B1 3HN