Learn how you can increase team velocity by following the design patterns you know from MVC – for AngularJS projects.

1. Patterns Are Good For Managers
Presented by Michael Cooper, Senior Consultant

2. Not all of your devscan be like him.
Without a Superman, you need:
•Team Productivity
•On Boarding
•Standardized Code & Patterns
•Code Documentation
•Test Coverage
•Quality
www.agilethought.com 2
http://moviepilot.com/posts/2014/07/04/those-batman-v-superman-rumors-faked-by- warner-bros-1673661?lt_source=external,manual

3. These require a disciplined approach.
www.agilethought.com 3

4. Making Swim Lanes … Your devsknow MVC
.NET MVC, Java Spring, around since 1970s
www.agilethought.com 4

5. MVC encourages SOLID code.
www.agilethought.com 5
Models
Views
Controllers
ServiceLayer
MVC
Model classes
View templates,
Html Helpers
MVC Razor code
Controller
Service Layer code
Angular
Model factory classes
View templates
Directives
Moustache code
Controllers
Services

6. The pattern allows us to have many people working on the same project.
www.agilethought.com 6
Dev A
DevsB&C
DevsB&C
Dev D
And new-to-Angular devsneed to only learn one area / pattern … allowing them to be productive within one week.
Models
Views
Controllers
ServiceLayer

7. The pattern allows our test patterns to be standardized, giving us high coverage.
www.agilethought.com 7
Model Unit Tests
Functional Tests
Controller Unit Tests
Service Unit Tests
Integration Tests
Karma/Jasmine
Protractor, Frisby
Models
Views
Controllers
ServiceLayer

8. An eco-system to support the Angular pattern.
•Project template
•Automated test setup
•Live templates (Intellij) that build models, controllers, services and their tests
•Lots of examples
•Proof it works!
•Recently completed project: 83% UI code coverage
www.agilethought.com 8

9. Code Samples –MVC Angular
www.agilethought.com 9

10. Named Spaced Modules
www.agilethought.com 10

11. Templates, Partial Views
www.agilethought.com 11

12. Controller
www.agilethought.com 12
.NET MVC
Angular
public classHomeController: Controller{
public ActionResultAbout()
{
ViewBag[“name"] = “Dolly";
return View();
}
}
[HttpPost]
public ActionResultAbout(form){
//something
}
.config(function config( $stateProvider) {
$stateProvider.state( 'about', {
url: '/about',
views: {
"main": {
controller: HomeAboutController',
templateUrl: 'about/about.tpl.html'
}
})
.controller(‘HomeAboutController',
function HomeAboutController( $scope ) {
$scope.name = ‘Dolly’;
$state.go(‘about’);
$scope.respond= function(){ //something } ;
});

13. HTML Helpers/Directives
www.agilethought.com 13
.NET MVC
Angular
public static class HtmlHelperExtensions{ public static MvcHtmlStringCustomTextBox(this
HtmlHelperhtmlHelper,
string name, string value) { varbuilder = new TagBuilder(“input”); builder.MergeAttribute(“type”, “text”); builder.MergeAttribute(“name”, name); builder.MergeAttribute(“value”, value); return MvcHtmlString
.Create(builder.ToString(
TagRenderMode.SelfClosing)); } }
.directive(“CustomTextBox”, function(){
return {
template:‘<input type=“text” name={{name}}
value={{value}} />’,
restrict: ‘E’,
scope: {
name: ‘=‘,
value: ‘=‘
}
}
});
use:@Html.CustomTextBox(“custom_txtbox”,”Custom Helper Method”)
use:<custom-text-box name=“custom_txtbox”
value=“Custom Helper Method”/>

14. Models
www.agilethought.com 14
.NET MVC
Angular
public class Animal{ publicAnimal();
public string name {get;set;}
public void Run(speed){
// do something
} }
.factory(“Animal”, function(){
varAnimal= function(){
this.name = ‘’;
}
Animal.prototype.Run= function(){
// do something
}
return Animal;
});
use:
varhorse= new Animal();
horse.name = “George”;
horse.Run();
use:
varhorse= new Animal();
horse.name = ‘George’;
horse.Run();

15. Services Persistence
www.agilethought.com 15
.NET MVC
Angular
public staticclass StoreAnimals{ private AnimalStorebarn;
public void Save(Animal animal){
barn.Animals.add(animal);
} }
.service(“StoreAnimals”, function($http){
varsave = function(animal){
return $http.POST(
AnimalStore,
angular.toJSON(animal));
}
return:{
save: save
}
});
use:
varhorse= new Animal();
horse.name = “George”;
StoreAnimals.Save(horse);
use:
varhorse= new Animal();
horse.name = ‘George’;
StoreAnimals.save(horse).promise.then(function(){
//next thing
});

16. Dependency Injection
www.agilethought.com 16
.NET MVC
Angular
public staticclass StoreAnimals{
vardb; publicStoreAnimals(db){
this.db= db
}
public void Save(Animalanimal){
db.Save(animal);
} }
angular.module(‘myApp.store’, [
‘myApp.database’])
.service(“StoreAnimals”, function(db){
varsave = function(animal){
return db.Save(animal);
}
return:{
save: save
}
});

17. Code Documentation
www.agilethought.com 17
.NET MVC
Angular
public staticclass StoreAnimals{
vardb;
publicStoreAnimals(db){
this.db= db
}
/// <summary>
/// Stores an animal
/// </summary>
/// <paramname=“animal">the one to
/// persist</param>
/// <returns></returns>
public void Save(Animalanimal){
db.Save(animal);
} }
angular.module(‘myApp.store’, [
‘myApp.database’])
.service(“StoreAnimals”, function(db){
/**
* @method Save -Stores an animal
* @param{Animal}animal –the one to persist
*/
varsave = function(animal){
return db.Save(animal);
}
return:{
save: save
}
});

18. Visit our library of free webinar videos!
Previous Webinars:
•Azure + Visual Studio Online: How to build, test, deploy and monitor seamlessly
•6 Steps To Achieving Predictable Release Management With Visual Studio 2013
•How To Create High Value Development Teams
•5 TFS Features That Will Dramatically Improve Your Team's Performance
18

19. About Michael
19
Mike Cooper spent much of his career in software sales, development and general management, with large firms like Reuters and Pitney Bowes, and a series of start-ups. His true love is making great software, and he has built software for television, finance, construction and government, and co-founded a number of veteran–owned businesses.He is a consultant at AgileThought, specializing in AngularJS.
Thank You
@mbcoop
Questions about AngularJS? Email me at Michael.Cooper@agilethought.com
linkedin.com/in/michaelcooper