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.

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!