Introdução ao 

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

1. O que é 2. Arquitetura 3. Interfaces 4. Regras de negócio 5. Comentários e Q&A roadmap 

http? html? apps? ● HTTP inicialmente desenhado para documentos estáticos ● Aplicações Web? Um parto. =( ● MVVM & programação declarativa FTW!!!11 

● Framework open source, by Google ● Desenvolvimento de SPAs (single page applications) ● HTML para marcação de documentos dinâmicos (WAT?) dafuk is angular? 

● Modules ○ Controllers ○ Directives ○ Providers (services, factories, etc.) ○ Filters, etc. architecture 

● Modules ○ Controllers ○ Directives ○ Providers (services, factories, etc.) ○ Filters, etc. architecture 

Interface ● Modules ○ Controllers ○ Directives ○ Providers (services, factories, etc.) ○ Filters, etc. architecture 

● Modules ○ Controllers ○ Directives ○ Providers (services, factories, etc.) ○ Filters, etc. architecture Interface Regras de negócio 

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 

interfaces? templates! ● Código HTML com: ■ Tags e atributos personalizadas (tipo XML, #sqn) ■ Expressões - Ex.: {{first_name}} 

// Custom tags and attributes

Welcome, bud!

interfaces? templates! ● Código HTML com: ■ Tags e atributos personalizadas (tipo XML, #sqn) ■ Expressões - Ex.: {{first_name}} 

// Custom tags and attributes

Welcome, bud!

// Expressions!

Welcome, {{user_name}}!

interfaces? templates! ● Código HTML com: ■ Tags e atributos personalizadas (tipo XML, #sqn) ■ Expressões - Ex.: {{first_name}} 

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”; } 

templates (or just views) 

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”; } 

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; } }; } 

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; } 

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; } 

questions? don’t be shy :) 

Feedback? Discussions? /joelwallis1 thank you!