}
<div id="implicit" ng-controller="showController">
<p>(Clique 3 vezes para ver um alerta)</p>
<input ng-init="mensagem=’test’" ng-model="mensagem">
<button ng-click="notificarChamada(mensagem);">
exibir notificação
</button>
</div>
Código online:http://plnkr.co/edit/HG1iZBLIvnQnB0TtDEk9
Todos os serviços em Angular são instanciadoslazily. Isso significa que um
ser-viço será criado somente quando ele é necessário para a instanciação de um serser-viço
ou um componente da aplicação que depende dele. Em outras palavras, Angular não
vai instanciar serviços, a menos que sejam solicitados diretamente ou indiretamente
pela aplicação. Por último, é importante perceber que todos os serviços Angular
são aplicações únicas, ou seja, há apenas um objeto de um determinado serviço por
injector.
Componentes do Módulo Angular:http://docs.angularjs.org/api/ng
5.5 Comunicando com servidor back-end
O serviço $httpé um serviço central Angular que facilita a comunicação com os
servidores HTTP remotos via objeto XMLHttpRequestdo navegador ou através
de JSONP.
O$http APIbaseia-se nas APIsdeferred/promiseexpostas pelo service $q.
En-quanto que para os padrões de uso simples isso não importa muito, para uso
avan-çado é importante para se familiarizar com essas APIs e as garantias que oferecem.
Uso geral
O serviço $httpé uma função que recebe um único argumento – um objeto
de configuração – que é usado para gerar uma solicitação HTTP e retorna uma
pro-messa com dois métodos $httpespecíficos. São eles: successe error.
5.5. Comunicando com servidor back-end Casa do Código
$http({method: ’GET’,
url: ’//api.twitter.com/1.1/search/tweets.json?q=angularjs’}).
success(function(data, status, headers, config) {
// Sucesso get
data // Retorno do objeto feita pela requisição
}).
error(function(data, status, headers, config) {
// Sucesso get
});
Uma vez que o valor retornado da função$httpé umapromise, você também
pode usar o método depois de registrar retornos de chamada. E esses retornos de
chamada receberão um único argumento – um objeto que representa a resposta.
Um código de status de resposta entre 200 e 299 é considerado um status de
sucesso e resultará no retorno sucesso sendo chamado. Note-se que, se a resposta
for um redirecionamento, XMLHttpRequestvai segui-lo de forma transparente, o
que significa que o retorno de erro não será chamado para tais respostas.
Métodos curtos
Todas as invocações ao serviço $httpexigem um método HTTP e a URL a ser
chamada. Para simplificar, foram criados métodos de atalho direto com o nome do
método HTTP, como gete post:
$http.get(’//api.twitter.com/1.1/search/tweets.json?q=angularjs’)
.success(successCallback);
$http.post(’//api.twitter.com/1.1/search/tweets.json?q=angularjs’, data)
.success(successCallback);
Veja um exemplo real de request $http:
<body ng-controller="PessoasCtrl">
<p ng-repeat="dados in pessoas">
Oi, meu nome é <strong>{{ dados.nome }}</strong>
tenho <strong>{{ dados.idade }}</strong> anos de idade,
moro em <strong>{{ dados.cidade }}</strong>!
</p>
</body>
app.controller(’PessoasCtrl’, function($scope, $http) {
$http.get(’dados.json’).success(function(data) {
$scope.pessoas = data;
});
});
[
{
"idade": 23,
"cidade": "Belo Horizonte",
"nome": "Giovanni Keppelen"
},
{
"idade": 25,
"cidade": "Rio de Janeiro",
"nome": "Keppelen"
}
]
Código online:http://plnkr.co/edit/aHxoFbhGoATluQNrqfRJ?p=preview
Para estudos, os outros métodos do Angular para Ajax:
1) $http.get =>http://docs.angularjs. org/api/ng/service/$http#get
2) $http.head =>http://docs.angularjs. org/api/ng/service/$http#head
3) $http.post =>http://docs.angularjs. org/api/ng/service/$http#post
4) $http.put =>http://docs.angularjs. org/api/ng/service/$http#put
5) $http.delete =>http://docs.angularjs. org/api/ng/service/$http#delete
6) $http.jsonp =>http://docs.angularjs. org/api/ng/service/$http#jsonp
5.6 $route AngularJs
AngularJS tem um $route service, que pode ser configurado para lidar com
transições de rotas em aplicações web de uma única página. Abrange todas as
carac-terísticas do $locatione, adicionalmente, oferece outras facilidades muito úteis.
O serviço $location analisa a URL do navegador (com base no
5.6. $route AngularJs Casa do Código
URL são refletidas no serviço $locatione as alterações em $locationsão
refletidas na barra de endereços.
A partir da versão 1.2, o AngularJS teve seu sistema de roteamento entregue
em um arquivo separado ( angular-route.js) com o seu próprio módulo (
ngRoute). Lembre-se de incluir o arquivo-angular route.jse declarar uma
dependência no módulo ngRoute.
Rotas básicas
Em AngularJS, rotas podem ser definidas durante a configuração do
apli-cativo usando o serviço $routeProvider. A sintaxe usada pelo serviço
$routeProvideré semelhante a usada com $locationpersonalizado. Veja um
exemplo:
angular.module(’ExemploNgRoute’, [’ngRoute’])
.config(function($routeProvider, $locationProvider) {
$routeProvider.when(’/livro/:livroId’, {
templateUrl: ’livro.html’,
controller: LivroCtrl,
resolve: {
delay: function($q, $timeout) {
var delay = $q.defer();
$timeout(delay.resolve, 1000);
return delay.promise;
}
}
});
$routeProvider.when(’/livro/:livroId/ch/:capituloId’, {
templateUrl: ’capitulo.html’,
controller: CapituloCtrl
});
$locationProvider.html5Mode(true);
});
O serviço$routeProviderexpõe uma API de estilo fluente, na qual passamos
o método que encadeia chamadas para a definição de novas rotas e da criação de uma
rota default.
Uma vez iniciado, o pedido não pode ser reconfigurado para suportar rotas
adi-cionais (ou remover as já existentes). Isso está ligado ao fato de que os providers
Angular podem ser injetados e manipulados somente em blocos de configuração
executados durante inicialização do aplicativo.
No exemplo anterior, você pode ver que TemplateUrlera a única propriedade
para cada rota, mas a sintaxe oferecida pelo serviço$routeProvideré muito mais
rica.
O conteúdo de uma rota pode também ser especificada em linha usando a
pro-priedade modelo de um objeto de definição de rota. Embora esta seja uma sintaxe
suportada, codificar marcação da rota em sua definição não é muito flexível (nem
sustentável), por isso raramente é utilizada na prática.
Exemplo mais completo de $route:
Index.html
<div ng-app="ExemploNgRoute">
<div ng-controller="MeusLivrosCtrl" class="tabs">
<a href="Livro/Angular">Angular</a>
<a href="Livro/Angular/ch/1">Angular: Ch1</a>
<a href="Livro/jQuery">jQuery</a>
<a href="Livro/jQuery/ch/4?key=value">jQuery: Ch4</a>
<a href="Livro/VanilhaJS">VanilhaJS</a><br/>
<div ng-view></div>
<hr />
<pre>$location.path() = {{$location.path()}}</pre>
<pre>$route.current.templateUrl = {{$route.current.templateUrl}}</pre>
<pre>$route.current.params = {{$route.current.params}}</pre>
<pre>$route.current.scope.name = {{$route.current.scope.name}}</pre>
<pre>$routeParams = {{$routeParams}}</pre>
</div>
</div>
livro.html
controller: {{nome}}<br />
Livro Id: {{params.livroId}}<br />
5.6. $route AngularJs Casa do Código
controller: {{name}}<br />
Livro Id: {{params.bookId}}<br />
Capitulo Id: {{params.chapterId}}
script.js
angular.module(’ExemploNgRoute’, [’ngRoute’])
.config(function($routeProvider, $locationProvider) {
$routeProvider.when(’/Livro/:livroId’, {
templateUrl: ’livro.html’,
controller: livroCtrl,
resolve: {
// Com 1 segundo de atraso
delay: function($q, $timeout) {
var delay = $q.defer();
$timeout(delay.resolve, 1000);
return delay.promise;
}
}
});
$routeProvider.when(’/Livro/:livroId/ch/:capituloId’, {
templateUrl: ’capitulo.html’,
controller: capituloCtrl
});
// Para configurar os inks dentro do plunker
$locationProvider.html5Mode(true);
});
function MeusLivrosCtrl($scope, $route, $routeParams, $location) {
$scope.$route = $route;
$scope.$location = $location;
$scope.$routeParams = $routeParams;
}
function livroCtrl($scope, $routeParams) {
$scope.nome = "livroCtrl";
$scope.params = $routeParams;
}
function capituloCtrl($scope, $routeParams) {
$scope.nome = "capituloCtrl";
$scope.params = $routeParams;
}
Código online:http://embed.plnkr.co/8zNXCmheCPCsnxqr78YH/preview
No documento
Casa do Código Livros para o programador Rua Vergueiro, º andar Vila Mariana São Paulo SP Brasil
(páginas 77-83)