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

Introdução ao AngularJS

Acfa202cc869d143b760cff76659cb64?s=47 Joel Jucá
November 07, 2015

Introdução ao AngularJS

Uma introdução ao framework AngularJS e seus principais conceitos: módulos, controladores, diretivas, providers (services, etc.), two-way data binding e injeção de dependência.

An introduction to AngularJS and its main concepts: modules, controllers, directives, providers (services, etc.), two-way data binding and depedency injection.

Acfa202cc869d143b760cff76659cb64?s=128

Joel Jucá

November 07, 2015
Tweet

Transcript

  1. Introdução ao

  2. Joel Wallis Jucá Cearense, 27, Webdev /joelwallis1 $ whoami

  3. 1. O que é 2. Arquitetura 3. Interfaces 4. Regras

    de negócio 5. Comentários e Q&A roadmap
  4. http? html? apps? • HTTP inicialmente desenhado para documentos estáticos

    • Aplicações Web? Um parto. =( • MVVM & programação declarativa FTW!!!11
  5. • Framework open source, by Google • Desenvolvimento de SPAs

    (single page applications) • HTML para marcação de documentos dinâmicos (WAT?) dafuk is angular?
  6. • Modules ◦ Controllers ◦ Directives ◦ Providers (services, factories,

    etc.) ◦ Filters, etc. architecture
  7. • Modules ◦ Controllers ◦ Directives ◦ Providers (services, factories,

    etc.) ◦ <del>Filters, etc.</del> architecture
  8. Interface • Modules ◦ Controllers ◦ Directives ◦ Providers (services,

    factories, etc.) ◦ <del>Filters, etc.</del> architecture
  9. • Modules ◦ Controllers ◦ Directives ◦ Providers (services, factories,

    etc.) ◦ <del>Filters, etc.</del> architecture Interface Regras de negócio
  10. first things first: modules! // Creates a new module angular.module(‘myApp’,

    []); // Loads an existing module var myApp = angular.module(‘myApp’); • Containers. Apenas. • Declaram dependência em outros módulos
  11. interfaces? templates! • Código HTML com: ▪ Tags e atributos

    personalizadas (tipo XML, #sqn) ▪ Expressões - Ex.: {{first_name}}
  12. // Custom tags and attributes <p ng-show=”is_welcome”>Welcome, bud!</p> <user-profile user=”joelwallis”></user-profile>

    interfaces? templates! • Código HTML com: ▪ Tags e atributos personalizadas (tipo XML, #sqn) ▪ Expressões - Ex.: {{first_name}}
  13. // Custom tags and attributes <p ng-show=”is_welcome”>Welcome, bud!</p> <user-profile user=”joelwallis”></user-profile>

    // Expressions! <p>Welcome, {{user_name}}!</p> interfaces? templates! • Código HTML com: ▪ Tags e atributos personalizadas (tipo XML, #sqn) ▪ Expressões - Ex.: {{first_name}}
  14. controllers // file: example-controller.js var myApp = angular(‘myApp’); myApp.controller(‘Example’, Example);

    function Example($scope) { $scope.is_welcome = true; $scope.user_name = “Joel Wallis”; }
  15. templates (or just views) <!-- file: example-view.html --> <div ng-show=”is_welcome”>

    <p>Welcome, {{user_name}}.</p> </div>
  16. two-way data binding! // file: example-controller.js var myApp = angular(‘myApp’);

    myApp.controller(‘Example’, Example); function Example($scope) { $scope.is_welcome = true; $scope.user_name = “Joel Wallis”; } <!-- file: example-view.html --> <div ng-show=”is_welcome”> <p>Welcome, {{user_name}}.</p> </div>
  17. providers // file: user-factory.js var myApp = angular(‘myApp’); myApp.factory(‘UserFactory’, UserFactory);

    function UserFactory($scope) { return { load: function(id) { var userObj; // do magic and populates the userObj return userObj; } }; }
  18. controllers // file: user-profile-controller.js var myApp = angular(‘myApp’); myApp.factory(‘UserProfile, UserProfile);

    function UserProfile($scope, UserFactory) { var userObj = UserFactory.load(1); $scope.user = userObj; }
  19. dependency injection! // file: user-factory.js var myApp = angular(‘myApp’); myApp.factory(‘UserFactory’,

    UserFactory); function UserFactory($scope) { return { load: function(id) { var userObj; // do magic and populates the userObj return userObj; } }; } // file: user-profile-controller.js var myApp = angular(‘myApp’); myApp.factory(‘UserProfile, UserProfile); function UserProfile($scope, UserFactory) { var userObj = UserFactory.load(1); $scope.user = userObj; }
  20. questions? don’t be shy :)

  21. Feedback? Discussions? /joelwallis1 thank you!