angular js, você precisa conhecer
DESCRIPTION
A construção de interfaces ricas na web podem ser menos traumáticas, essa é a premissa básica desse framework. Nessa palestra faleremos sobre a introdução ao uso do Angular JS e o seu funcionamento, explicando as abstrações e magias que tornam o framework mais produtivo.TRANSCRIPT
![Page 1: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/1.jpg)
carregando...
![Page 2: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/2.jpg)
levante a mão!
![Page 3: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/3.jpg)
<angular-js ng-talk="meet2brains"/>
![Page 4: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/4.jpg)
![Page 5: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/5.jpg)
<html>
<input><a>
<strong>
<textarea>
<br> <em>
<span>
<form>
<div>
<title>
<table>
<legend>
<select>
<option>
<button>
<tr>
<td>
<script>
<ul>
HTML
![Page 6: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/6.jpg)
<video>
<input><a>
<strong>
<textarea>
<br> <em>
<span>
<form>
<div>
<title>
<table>
<legend>
<select>
<option>
<button>
<tr>
<td>
<script>
<ul>
<html>
<canvas>
<audio>
<section>
<menu><hgroup>
<meter>
<progress>
<header>
![Page 7: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/7.jpg)
<video>
<input><a>
<strong>
<textarea>
<br> <em>
<span>
<form>
<div>
<title>
<table>
<legend>
<select>
<option>
<button>
<tr>
<td>
<script>
<ul>
<html>
<canvas>
<audio>
<section>
<menu><hgroup>
<meter>
<progress>
<header>
<ng-view> <ng-switch>
<minha-tag> ng-model=""
![Page 8: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/8.jpg)
Olá, platéia!
<body ng-app>
<input ng-model="nome">
<p>Olá, {{nome}}!</p>
<script href="angular.js"/>
</body>
platéia
![Page 9: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/9.jpg)
<body ng-app>
<input ng-model="nome">
<p>Olá, {{nome}}!</p>
<script href="angular.js"/>
</body>
![Page 10: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/10.jpg)
<body ng-app>
<input ng-model="nome">
<p>Olá, {{nome}}!</p>
<script href="angular.js"/>
</body>
![Page 11: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/11.jpg)
<body ng-app>
<input ng-model="nome">
<p>Olá, {{nome}}!</p>
<script href="angular.js"/>
</body>
![Page 12: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/12.jpg)
mas... e o CONTROLLER?
![Page 13: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/13.jpg)
function SorteadorController($scope) {
$scope.numero = 0;
$scope.sortearNumero = function () {$scope.numero =
Math.floor(Math.random() * 100);};
}
sorteador-controller.js
![Page 14: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/14.jpg)
<body ng-app>
<div ng-controller="SorteadorController">
<button ng-click="sortearNumero()">fazer sorteio!
</button>
<p>O número sorteado foi: {{numero}}</p>
</div>
<script href="angular.js"/><script href="sorteador-controller.js"/>
</body>
![Page 15: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/15.jpg)
<body ng-app>
<div ng-controller="SorteadorController">
<button ng-click="sortearNumero()">fazer sorteio!
</button>
<p>O número sorteado foi: {{numero}}</p>
</div>
<script href="angular.js"/><script href="sorteador-controller.js"/>
</body>
![Page 16: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/16.jpg)
<body ng-app>
<div ng-controller="SorteadorController">
<button ng-click="sortearNumero()">fazer sorteio!
</button>
<p>O número sorteado foi: {{numero}}</p>
</div>
<script href="angular.js"/><script href="sorteador-controller.js"/>
</body>
![Page 17: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/17.jpg)
<body ng-app>
<div ng-controller="SorteadorController">
<button ng-click="sortearNumero()">fazer sorteio!
</button>
<p>O número sorteado foi: {{numero}}</p>
</div>
<script href="angular.js"/><script href="sorteador-controller.js"/>
</body>
![Page 18: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/18.jpg)
MVC
![Page 19: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/19.jpg)
MVC$scope.model = {id: 1,nome: 'Farfinhos',idade: 18
};
![Page 20: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/20.jpg)
MVC<ul>
<li ng-repeat="usuario in usuarios">{{usuario.id}} - {{usuario.nome}}
</li>
</ul>
![Page 21: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/21.jpg)
MVCfunction Controller($scope) {
$scope.model = { ... };
$scope.handlerClick = function () { ... };
}
![Page 22: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/22.jpg)
APP
![Page 23: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/23.jpg)
ControllerAPP
![Page 24: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/24.jpg)
APP Controller
Serviço
![Page 25: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/25.jpg)
APP Controller
Serviço
<view>
![Page 26: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/26.jpg)
APP Controller
Serviço
<view>
filters
![Page 27: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/27.jpg)
Como usar isso tudo para montar uma aplicação single-page?
![Page 28: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/28.jpg)
cria-se uma aplicação...
![Page 29: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/29.jpg)
window.appTalk = angular.module('appTalk', []);
![Page 30: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/30.jpg)
window.appTalk = angular.module('appTalk', []);
<div ng-app="appTalk">...
</div>
![Page 31: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/31.jpg)
cria-se controllers...
![Page 32: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/32.jpg)
window.appTalk.controller('SobreController', [
'$scope',function ($scope){
... código do controller ...
}]);
![Page 33: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/33.jpg)
cria-se serviços...
![Page 34: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/34.jpg)
window.appTalk.service('ServicoNecessario',
function (){
this.funcionalidade = function () {...};
... código do serviço ...
});
![Page 35: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/35.jpg)
cria-se templates...
![Page 36: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/36.jpg)
<div>Detalhes sobre {{nome}}: <br>{{info}}
</div>
![Page 37: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/37.jpg)
configura-se as rotas...
![Page 38: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/38.jpg)
window.appTalk = angular.module('appTalk', []).config(['$routeProvider',
function ($routeProvider) {$routeProvider.when('/sobre', {
templateUrl: 'sobre.html',controller: 'SobreController'
}).when('/home', {
templateUrl: 'home.html',controller: 'HomeController'
}).otherwise({redirectTo: '/home});
}]);
![Page 39: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/39.jpg)
window.appTalk = angular.module('appTalk', []).config(['$routeProvider',
function ($routeProvider) {$routeProvider.when('/sobre', {
templateUrl: 'sobre.html',controller: 'SobreController'
}).when('/home', {
templateUrl: 'home.html',controller: 'HomeController'
}).otherwise({redirectTo: '/home});
}]);
![Page 40: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/40.jpg)
window.appTalk = angular.module('appTalk', []).config(['$routeProvider',
function ($routeProvider) {$routeProvider.when('/sobre', {
templateUrl: 'sobre.html',controller: 'SobreController'
}).when('/home', {
templateUrl: 'home.html',controller: 'HomeController'
}).otherwise({redirectTo: '/home});
}]);
![Page 41: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/41.jpg)
window.appTalk = angular.module('appTalk', []).config(['$routeProvider',
function ($routeProvider) {$routeProvider.when('/sobre', {
templateUrl: 'sobre.html',controller: 'SobreController'
}).when('/home', {
templateUrl: 'home.html',controller: 'HomeController'
}).otherwise({redirectTo: '/home});
}]);
![Page 42: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/42.jpg)
e o DOM?
![Page 43: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/43.jpg)
daqui pra frente, a mágica desaparece
![Page 44: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/44.jpg)
diretiva
![Page 45: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/45.jpg)
APP Controller
Serviço
<view>
filters
diretivas
![Page 46: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/46.jpg)
APP Controller
Serviço
<view>
filters
diretivas scope
![Page 47: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/47.jpg)
APP Controller
Serviço
<view>
filters
diretivas
$injector
![Page 48: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/48.jpg)
E - Elemento:<my-directive></my-directive>
A - Atributo:<div my-directive="exp"> </div>
C - Classe:<div class="my-directive: exp;"></div>
M - Comentário: <!-- directive: my-directive exp -->
![Page 49: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/49.jpg)
<DOM>
![Page 50: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/50.jpg)
<DOM>
COMPILE
![Page 51: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/51.jpg)
<DOM>
COMPILE
LINK
![Page 52: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/52.jpg)
<DOM>
COMPILE
LINK
![Page 53: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/53.jpg)
window.appTalk.directive('directiveName', function factory(injectables) {
var definicaoDeDiretiva = { priority: 0, template: '<div></div>', templateUrl: 'directive.html', replace: false, transclude: false, restrict: 'A', scope: false, compile: function compile(tElement, tAttrs, transclude) { return { pre: function preLink() { ... }, post: function postLink() { ... } } }, link: function postLink(scope, iElement, iAttrs) { ... } };
return definicaoDeDiretiva;});
![Page 54: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/54.jpg)
leaky abstraction
![Page 55: Angular JS, você precisa conhecer](https://reader034.vdocuments.com.br/reader034/viewer/2022042606/549d0174b479599b318b48ac/html5/thumbnails/55.jpg)
Obrigado!
Henrique Netto
mas espere...