angularjs na prática
TRANSCRIPT
AngularJS na PráticaDo básico ao infinito…e além!
+TiagoCedrim, NYX Knowledge Front-End Developer
Google Developers - developers.google.com
• Tiago Cedrim
• Formado em Sistemas de Informação
• Desenvolvedor front-end na
Quem sou eu?
Google Developers - developers.google.com
Do básico ao infinito…e além!
Google Developers - developers.google.com
Breve Historia do AngularJS
• Originalmente desenvolvido em 2009
• Misko Hevery e Adam Abrons
• Google Feedback com 18 mil linhas e 6 meses de desenvolvimento
• Misko fez uma afirmação ousada. - “Refaço o Google Feedback em 2 semanas”
• 1 semana com 1500 linhas
Google Developers - developers.google.com
Sobre AngularJS
• Framework JavaScript
• MVC (Model-View-Controller) para Web
• Single Page Application
Google Developers - developers.google.com
Como Usar?
• Há duas partes para iniciar uma aplicação AngularJS
• Carregar o código fonte do AngularJS
• Inicializar o AngularJS (ng-app)
Google Developers - developers.google.com
Github
• https://github.com/tiagocedrim/angularjsNaPratica
CLONA LÁ!!
Google Developers - developers.google.com
Chega de blablabla…<html> <head> <title>GDG Maceió</title> </head> <body ng-app=“”>
<!- Data Binding é a sincronização automática entre o model e a view //->
{{Tiago Cedrim}} <!-- Libs --><script src="bower_components/angular/angular.min.js"></script> </body> </html>
Google Developers - developers.google.com
ng-model
<h4>Texto</h4>
<!— ng-model é usado em campos de entrada sempre quisermos que o usuário insira e tenha acesso ao valor em JavaScript
//—>
<input ng-model="seuNome"/> <div class="well"> Você digitou : <strong>{{seuNome}}</strong> </div>
Google Developers - developers.google.com
ng-class, ng-show e ng-hide<!— ng-show e ng-hide elas inspecionam uma variável e, se o valor for true ou false, mostram ou ocultam o elemento.
ng-class é usada para aplicar e remover classes CSS dos elementos de forma seletiva. Ela pode receber strings ou objetos como valores
//—>
<input type="checkbox" ng-model=“pulsar"> <input type="checkbox" ng-model="inverte"> <input type="checkbox" ng-model=“escondeMostra”> <span ng-hide="escondeMostra">Você está lendo meu nome...</span> <span ng-show="escondeMostra">E agora não!</span> <div ng-hide="escondeMostra"> <h2 ng-class="{'pulsa': pulsar, 'cabeca_pra_baixo': inverte }"> Tiago Cedrim </h2> </div>
Google Developers - developers.google.com
Module e Controller• Modules são contêineres • Controller representa nossa força de trabalho
Google Developers - developers.google.com
$scope• $scope é a cola entre a view e o controller
Google Developers - developers.google.com
Module,controller e $scope na prática
angular.module('gdgApp', []);angular.module('gdgApp') .controller('Gdg4Controller', ['$scope', function ($scope) { $scope.seuNome = ""; $scope.nome = ""; $scope.contrario = function () { return $scope.nome.split("").reverse().join("") } $scope.capsLock = function () { return $scope.seuNome.toUpperCase(); } }])
<div ng-controller="Gdg4Controller"> <input ng-model=“seuNome"/> <input ng-model=“nome”/>
</div ng-controller="Gdg4Controller">
Google Developers - developers.google.com
ng-click
<button ng-click="volta()"></button> <button ng-click="vai()"></button>
Google Developers - developers.google.com
ng-repeatangular.module('gdgApp', []);angular.module('gdgApp') .controller('Gdg4Controller', ['$scope', function ($scope) {
$scope.jogos = [ { 'id': 0, 'nome': 'UFC', 'preco': '119' }, { 'id': 1, 'nome': 'GTA V', 'preco': '199' }, { 'id': 2, 'nome': 'Watch Dogs', 'preco': '99' } }])
<tr ng-repeat="jogo in jogo"> <td>{{jogo.nome}}</td> <td>{{jogo.preco | currency : 'R$ '}}</td> </tr>
Google Developers - developers.google.com
Juntando Tudo
https://github.com/johnpapa/angularjs-styleguide/blob/master/i18n/PT-BR.md
FIM