Modular Angular JS

MODULAR ANGULARJS

WHO AM I?

@dhyegofernando

PLUGINS? I SEE EVERYWHERE

VANILLA JS PLUGINS

var plugin = new Plugin(document.querySelector('.plugin­selector'));

JQUERY PLUGINS

$('.plugin­selector').plugin();

ANGULARJS FTW

WHY ANGULARJS?

DATA-BINDING

DATA-BINDING JQUERY EXAMPLE

$('#input­name').on('change', function() $('#greeting­name').text(this.value); );

ONE WAY DATA-BINDING

TWO WAY DATA-BINDING

DATA-BINDING EXAMPLE

<div ng­app> <label>Name:</label> <input type="text" ng­model="yourName"> <hr> <h1>Hello yourName!</h1> </div>

DEPENDENCY INJECTION

DEPENDENCY INJECTION EXAMPLE

DEPENDENCY INJECTION EXAMPLE<div ng­app="app" ng­controller="GreetingController"> <form ng­submit="greet()"> <input type="text" ng­model="name"> <button type="submit">Greet</button> </form> </div>

angular.module('app', []) .controller('GreetingController', function($scope) $scope.name = 'John Doe'; $scope.greet = function() alert('Hello ' + $scope.name); ; );

DIRECTIVES

TAB COMPONENT

NON-SEMANTIC TAB COMPONENT<div id="tab"> <ul class="tab­head"> <li><a href="#content­1">Title 1</a></li> <li><a href="#content­2">Title 2</a></li> <li><a href="#content­3">Title 3</a></li> </ul> <div id="content­1" class="tab­content"> <p>Content 1 goes here</p> </div> <div id="content­2" class="tab­content"> <p>Content 2 goes here</p> </div> <div id="content­3" class="tab­content"> <p>Content 3 goes here</p> </div> </div>

$('#tab').tab();

SEMANTIC TAB COMPONENT<tabset> <tab heading="Title 1"> <p>Content 1 goes here</p> </tab> <tab heading="Title 2"> <p>Content 2 goes here</p> </tab> <tab heading="Title 3"> <p>Content 3 goes here</p> </tab> </tabset>

NOW LET'S LET THE THINGS A LITTLE BIT MORE INTERESTING

TODO APP

FEATURESTasks

ListAddMark/Unmark as completeArchive

TODO APP: THE WRONG WAY

STRUCTURE|­­ js/ | |­­ controllers.js | |­­ directives.js | |­­ services.js | |­­ app.js |­­ index.html

index.html

... <div ng­controller="TodoController"> <span>remaining() of tasks.length remaining</span> [ <a href="" ng­click="archive()">archive</a> ] <ul> <li ng­repeat="task in tasks"> <input type="checkbox" ng­model="task.done"> <span class="done­task.done">task.text</span> </li> </ul> <form ng­submit="addTask()"> <input type="text" ng­model="taskText"> <input type="submit" value="add"> </form> </div> ...

app.js

angular.module('app', ['app.controllers']);

controllers.js

angular.module('app.controllers') .controller('TodoController', ['$scope', function($scope) $scope.tasks = []; $scope.addTask = function() // ... ; $scope.remaining = function() // ... ; $scope.archive = function() // ... ; ]) .controller('OtherController', ['$scope', function($scope) // ... ]);

COMMON APPROACH MISTAKES

FILES STRUCTURE

NEVERSEPARATE FILES IN FOLDER BY THEIR TYPE

|­­ js/ | |­­ controllers.js | |­­ directives.js | |­­ services.js | |­­ app.js |­­ index.html

ALWAYSSEPARATE FILES IN THEIR COMPONENT NAME FOLDER

|­­ src/ | |­­ todo/ | | |­­ todo.html | | |­­ todo.module.js | | |­­ todo.config.js | | |­­ todo.controller.js| | |­­ todo.controller.spec.js | |­­ tasks/ | | |­­ tasks.module.js | | |­­ tasks.service.js | | |­­ tasks.service.spec.js | | |­­ tasks.directive.js| | |­­ tasks.directive.spec.js | |­­ app.module.js | |­­ index.html

MODULES (OR LACK THEREOF)

NEVERSEPARATE MODULES BY THEIR TYPE

controllers.js

angular.module('app.controllers') .controller('TodoController', ['$scope', function($scope) $scope.tasks = []; $scope.addTask = function() // ... ; $scope.remaining = function() // ... ; $scope.archive = function() // ... ; ]) .controller('OtherController', ['$scope', function($scope) // ... ]);

ALWAYSSEPARATE MODULES BY THEIR COMPONENT NAME

todo/todo.controller.js

angular.module('todo') .controller('TodoController', ['$scope', function($scope) $scope.tasks = []; $scope.addTask = function() // ... ; $scope.remaining = function() // ... ; $scope.archive = function() // ... ; ]);

app.module.js

angular.module('app', [ 'todo' ]);

TOO MANY CONTROLLERS RESPONSIBILITY

NEVERLET CONTROLLERS DO A LOT OF OTHER THINGS

(LIKE PERSIST)

controllers.js

angular.module('app.controllers') .controller('TodoController', ['$scope', function($scope) $scope.tasks = []; $scope.addTask = function() // ... ; $scope.remaining = function() // ... ; $scope.archive = function() // ... ; ]) ...

ALWAYSLET CONTROLLERS AS CLEAN AS POSSIBLE

(AND ISOLATE SHARED BEHAVIOURS IN SERVICES)

todo/todo.controller.js

angular.module('todo') .controller('TodoController', ['$scope', 'Tasks', function($scope) $scope.tasks = Tasks.get(); $scope.addTask = function() Tasks.add(); ; $scope.remaining = function() Tasks.count(); ; $scope.archive = function() Tasks.archive(); ; ]);

tasks/tasks.service.js

angular.module('tasks') .factory('Tasks', ['$http', function($http) return get: function() $http.get(); , add: function() $http.post(); , count: function() $http.get().length; , archive: function() $http.put(); ; ]);

JUST SOME TIPS TO KEEP THINGS BETTER...

SHARE BEHAVIOURS THROUGH COMPONENTS BUT

DO NOT REINVENT THE WHEEL

HOW TO LOOK FOR A COMPONENT

WHERE TO FIND COMPONENTS?

ANGULARJS DOCS

BOWER.IO

NGMODULES.ORG

HOW TO USE A COMPONENT?Download or Install the component

bower install ­­save angular­material

Load the component files

<link href="angular­material.min.css" rel="stylesheet"> <script src="angular­material.min.js">

Set as a module dependency

angular.module('app', [ 'ngMaterial' ]);

WHAT DO I HAVE TO DO TO BUILD MY OWN COMPONENT?

WRITE GREAT TESTS

WRITE SOME DOCUMENTATION

FOLLOW THE STYLE GUIDE

USE GENERATORS

AND FINALLY PUBLISH ITbower init && bower publish

QUESTIONS?

NOW... IT'S UP TO YOU

THANK YOU

github.com/dhyegofernando

twitter.com/dhyegofernando

SLIDESbit.ly/1F3KyH2