Upgrade to Pro — share decks privately, control downloads, hide ads and more …

AngularJS Style Guide

Avatar for willian willian
September 26, 2015

AngularJS Style Guide

Avatar for willian

willian

September 26, 2015
Tweet

More Decks by willian

Other Decks in Programming

Transcript

  1. @willian SYSTEMJS Um carregador de módulos ES6 que nos permite

    importar assets em ambiente de desenvolvimento convertendo ES6 para ES5.
  2. @willian 'use strict'; import angular from 'angular'; import {mainModule} from

    './main'; angular.element(document).ready(function() { angular.bootstrap(document.querySelector('[data-main-app]'), [ mainModule.name ], { strictDi: true }); });
  3. @willian JSPM Carrega qualquer formato de módulo (ES6, AMD, CommonJS)

    diretamente de repositórios Github, npm e mais.
  4. @willian var conference = { name: 'Front in Vale' };

    _.assign(conference, { 'date': '2015-09-26' }); // → { 'name': 'Front in Vale', 'date': '2015-09-26' }
  5. @willian . ├── app │ ├── bootstrap.js │ ├── components

    │ │ ├── loading-view │ │ │ ├── loading-view_controller.js │ │ │ ├── loading-view_directive.js │ │ │ └── loading-view_template.html │ │ └── site-header │ │ ├── site-header_controller.js │ │ ├── site-header_directive.js │ │ └── site-header_template.html │ ├── main.js │ ├── routes │ │ └── todo │ │ ├── todo_controller.js │ │ ├── todo_route.js │ │ └── todo_template.html │ └── services │ ├── api │ │ └── api.js │ └── todo │ ├── todo.js │ └── todo.spec.js ├── assets │ ├── fonts │ ├── images │ └── stylesheets │ ├── app.scss │ ├── base │ │ ├── _functions.scss │ │ ├── _mixins.scss │ │ └── _variables.scss │ ├── core │ │ ├── _basic.scss │ │ └── _vendor.scss │ ├── layout │ │ └── _header.scss │ └── ui │ └── _loading_bar.scss ├── config │ └── config.json └── index.html
  6. @willian ROUTES Responsável por configurar URLs e templates específicos para

    cada rota, podendo ou não conter seu próprio controller.
  7. @willian 'use strict'; import angular from 'angular'; import 'angular-ui-router'; import

    {todoControllerModule} from './todo_controller'; import template from './todo_template.html!text'; export let todoRouteModule = angular.module('todoRouteModule', [ 'ui.router', todoControllerModule.name ]).config([ '$stateProvider', function TodoRoute($stateProvider) { $stateProvider.state('todo', { url: '/', template: template, controller: 'TodoController', controllerAs: 'ctrl', resolve: { tasks: [ 'Todo', function tasksResolver(Todo) { return Todo.get(); } ] } }); } ]);
  8. @willian 'use strict'; import angular from 'angular'; import {siteHeaderControllerModule} from

    './site-header_controller'; import template from './site-header_template.html!text'; export var siteHeaderComponentModule = angular.module('siteHeaderComponentModule', [ siteHeaderControllerModule.name ]).directive('siteHeader', [ function siteHeader() { return { restrict: 'E', template: template, controller: 'SiteHeaderController', controllerAs: 'ctrl', bindToController: true, scope: { currentUser: '=currentUser', authenticated: '=authenticated' } }; } ]);
  9. @willian 'use strict'; import angular from 'angular'; import {siteHeaderControllerModule} from

    './site-header_controller'; import template from './site-header_template.html!text'; export var siteHeaderComponentModule = angular.module('siteHeaderComponentModule', [ siteHeaderControllerModule.name ]).directive('siteHeader', [ function siteHeader() { return { restrict: 'E', template: template, controller: 'SiteHeaderController', controllerAs: 'ctrl', bindToController: true, scope: { currentUser: '=currentUser', authenticated: '=authenticated' } }; } ]);
  10. @willian 'use strict'; import angular from 'angular'; import {siteHeaderControllerModule} from

    './site-header_controller'; import template from './site-header_template.html!text'; export var siteHeaderComponentModule = angular.module('siteHeaderComponentModule', [ siteHeaderControllerModule.name ]).directive('siteHeader', [ function siteHeader() { return { restrict: 'E', template: template, controller: 'SiteHeaderController', controllerAs: 'ctrl', bindToController: true, scope: { currentUser: '=currentUser', authenticated: '=authenticated' } }; } ]);
  11. @willian 'use strict'; import angular from 'angular'; import 'angular-ui-router'; import

    {todoControllerModule} from './todo_controller'; import template from './todo_template.html!text'; export let todoRouteModule = angular.module('todoRouteModule', [ 'ui.router', todoControllerModule.name ]).config([ '$stateProvider', function TodoRoute($stateProvider) { $stateProvider.state('todo', { url: '/', template: template, controller: 'TodoController', controllerAs: 'ctrl', resolve: { tasks: [ 'Todo', function tasksResolver(Todo) { return Todo.get(); } ] } }); } ]);
  12. @willian 'use strict'; import angular from 'angular'; import _ from

    'lodash'; export let todoControllerModule = angular.module('todoControllerModule', [ ]).controller('TodoController', [ 'tasks', function TodoController(tasks) { let ctrl = this; _.assign(ctrl, { tasks: tasks; }); } ]);
  13. @willian 'use strict'; import angular from 'angular'; import _ from

    'lodash'; export let todoControllerModule = angular.module('todoControllerModule', [ ]).controller('TodoController', [ 'tasks', function TodoController(tasks) { let ctrl = this; _.assign(ctrl, { tasks: tasks; }); } ]);
  14. @willian 'use strict'; import angular from 'angular'; import _ from

    'lodash'; export let todoControllerModule = angular.module('todoControllerModule', [ ]).controller('TodoController', [ 'Todo', 'tasks', function TodoController(Todo, tasks) { let ctrl = this; function addTask(taskName) { Todo.add({ name: taskName }); tasks = Todo.get(); } _.assign(ctrl, { addTask: addTask, tasks: tasks; }); } ]);
  15. @willian SERVICES E FACTORIES Sempre trate services como classes e

    nunca exporte services como uma única função.
  16. @willian 'use strict'; import angular from 'angular'; export var todoModule

    = angular.module('todoModule', []).factory('Todo', [ function Todo() { var tasks = []; function validate(task) { return (task.name !=== null && task.name !=== ''); } function get() { return tasks; } function add(task) { if (validate(task)) { tasks.push(task); } else { alert('Invalid data.'); } } return { get: get, add: add }; } ]);
  17. @willian 'use strict'; import angular from 'angular'; export var todoModule

    = angular.module('todoModule', []).factory('Todo', [ function Todo() { ... } ]);
  18. @willian 'use strict'; import angular from 'angular'; export var todoModule

    = angular.module('todoModule', []).factory('Todo', [ function Todo() { ... } ]);
  19. @willian 'use strict'; import angular from 'angular'; import {siteHeaderControllerModule} from

    './site-header_controller'; import template from './site-header_template.html!text'; export var siteHeaderComponentModule = angular.module('siteHeaderComponentModule', [ siteHeaderControllerModule.name ]).directive('siteHeader', [ function siteHeader() { return { restrict: 'E', template: template, controller: 'SiteHeaderController', controllerAs: 'ctrl', bindToController: true, scope: { currentUser: '=currentUser', authenticated: '=authenticated' } }; } ]);
  20. @willian • $timeout ao invés de setTimeout • $interval ao

    invés de setInterval • $window ao invés de window • $document ao invés de document • $http ao invés de $.ajax • $q (promises) ao invés de callbacks
  21. @willian 'use strict'; import angular from 'angular'; import _ from

    'lodash'; export let todoControllerModule = angular.module('todoControllerModule', [ ]).controller('TodoController', [ 'tasks', function TodoController(tasks) { let ctrl = this; _.assign(ctrl, { tasks: tasks; }); } ]);
  22. @willian 'use strict'; import angular from 'angular'; import {mainModule} from

    './main'; angular.element(document).ready(function() { angular.bootstrap(document.querySelector('[data-main-app]'), [ mainModule.name ], { strictDi: true }); }); Lança um erro se a sintaxe para injetar dependências (array sintax) ou $inject não forem utilizados
  23. @willian 'use strict'; import angular from 'angular'; import _ from

    'lodash'; export let todoControllerModule = angular.module('todoControllerModule', [ ]).controller('TodoController', [ 'Todo', 'tasks', function TodoController(Todo, tasks) { let ctrl = this; function addTask(taskName) { Todo.add({ name: taskName }); tasks = Todo.get(); } _.assign(ctrl, { addTask: addTask, tasks: tasks; }); } ]);