Apresentação realizada no 1º FrontInCuiabá (2015) com o objetivo de mostrar uma breve introdução ao uso do framework AngularJS escrito com boas práticas.

1. MODULAR ANGULARJS

2. WHO AM I?
@dhyegofernando

3. PLUGINS? I SEE EVERYWHERE

4. VANILLA JS PLUGINS
var plugin = new Plugin(document.querySelector('.plugin­selector'));

5. JQUERY PLUGINS
$('.plugin­selector').plugin();

7. ANGULARJS FTW

8. WHY ANGULARJS?

9. DATA-BINDING

10. DATA-BINDING JQUERY EXAMPLE
$('#input­name').on('change', function() {
$('#greeting­name').text(this.value);
});

11. ONE WAY DATA-BINDING

12. TWO WAY DATA-BINDING

13. DATA-BINDING EXAMPLE
<div ng­app>
<label>Name:</label>
<input type="text" ng­model="yourName">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>

14. DEPENDENCY INJECTION

15. DEPENDENCY INJECTION EXAMPLE

16. 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);
};
});

17. DIRECTIVES

18. TAB COMPONENT

19. 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();

21. 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>

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

24. TODO APP

25. FEATURES
Tasks
List
Add
Mark/Unmark as complete
Archive

26. TODO APP: THE WRONG WAY

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

28. 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>
...

29. 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) {
// ...
}]);

31. COMMON APPROACH MISTAKES

32. FILES STRUCTURE

33. NEVER
SEPARATE FILES IN FOLDER BY THEIR TYPE
|­­ js/
| |­­ controllers.js
| |­­ directives.js
| |­­ services.js
| |­­ app.js
|­­ index.html

34. ALWAYS
SEPARATE 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

35. MODULES (OR LACK THEREOF)

36. NEVER
SEPARATE 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) {
// ...
}]);

37. ALWAYS
SEPARATE 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'
]);

38. TOO MANY CONTROLLERS RESPONSIBILITY

39. NEVER
LET CONTROLLERS DO A LOT OF OTHERTHINGS
(LIKE PERSIST)
controllers.js
angular.module('app.controllers')
.controller('TodoController', ['$scope', function($scope) {
$scope.tasks = [];
$scope.addTask = function() { // ... };
$scope.remaining = function() { // ... };
$scope.archive = function() { // ... };
}])
...

40. ALWAYS
LET CONTROLLERS AS CLEAN AS POSSIBLE
(AND ISOLATE SHARED BEHAVIOURS IN SERVICES)

41. 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(); }
};
}]);

43. JUST SOME TIPS TO KEEP THINGS BETTER...

44. SHARE BEHAVIOURS THROUGH COMPONENTS BUT
DO NOT REINVENT THE WHEEL

45. HOW TO LOOK FOR A COMPONENT

46. WHERE TO FIND COMPONENTS?

47. ANGULARJS DOCS

48. BOWER.IO

49. NGMODULES.ORG

50. 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'
]);

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

53. WRITE GREAT TESTS

54. WRITE SOME DOCUMENTATION

55. FOLLOW THE STYLE GUIDE

56. USE GENERATORS

57. AND FINALLY PUBLISH IT
bower init && bower publish

58. QUESTIONS?

59. NOW... IT'S UP TO YOU

60. THANK YOU
github.com/dhyegofernando
twitter.com/dhyegofernando
SLIDES
bit.ly/1F3KyH2