diegolirio/Criando Projeto Angular e Forma Modular e com uma arquitetura totalmente reaproveitavel.md

## Criando Projeto Angular e Forma Modular e com uma arquitetura totalmente reaproveitavel.md

      
    Raw
  

              Criando Projeto Angular e Forma Modular e com uma arquitetura totalmente reaproveitavel.md
            
          
    1. Crie um arquivo index.html contendo

<html ng-app="app">
	<head>
		<title>AngularJS</title>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular-route.js"></script>
	</head>
	<body>
		<h1>Minha aplicação AngularJS</h1>
		<div ng-view></div>
	</body>
</html>

Na linha 7 estamos declarando a biblioteca do AngularJS para podermos utiliza-lo em nossa aplicação
Na linha 4 na tag  existe um atributo ng-app contendo "app", declaramos isso porque aí dizemos que nosso html é uma aplicação angularJS, mas poderia ser também em algum bloco, como em uma  ou mesmo no .
Na linha 8 declaramos a biblioteca de sistema de rotas do angularJS que sera explicado a frente.
Na linha 11 na tag  é para utilizar o angularJS de uma forma Single Page Aplication (SPA), para mudar somente o conteudo desse bloco(isso é feito através de ajax que o angular utiliza), e o restante continuando da mesma forma.

2. Crie um arquivo app.js com o conteudo

var app = angular.module('app', ['ngRoute']);

app.config(['$routeProvider', function($routeProvider) {
	
		$routeProvider
			.when('/', { template: '<p style="color:red;">Conteudo Estatico</p>'});		
}]);

Na linha 23 declaramos a variavel app como modulo da nossa aplicação angular para configuração das rotas,controllers e serviços
Na linha 25 é feita a configuração das rotas válidas do SPA do angular. O serviço $routeProvider já é um serviço do angularJS, recebemos por parametro já estanciado, ou seja, o angularJS injeta(Injeção de Dependencia) esse serviço para ser utilizado.
Na linha 27,28 configuramos a primeira rota, a url '/' ou root, no primeiro parametro do metodo when, o segundo parametro passamos um JSON, o { template: 'Conteudo completado pela rota...
' } completa a parte a ser renderizada no 
.

3. Separando o html do javascript utilizando o pattern MVC.


Quando configuramos as rotas, para serem renderizadas completando a lacuna na 
, escrevemos html no javascript, mas como sabemos que isso não é boa prática de programação, seria mais ideal se separasemos esse html em um arquivo próprio do html. Então vamos alterar o arquivo app.js acrecentando mais uma rota.

app.config(['$routeProvider', function($routeProvider) {
	
		$routeProvider
			.when('/',    { template: '<p style="color:red;">Conteudo Estatico</p>'});
			.when('/mvc', { templateUrl: '/aplicando-mvc.html'});		
}]);

Agora iremos criar o arquivo aplicando-mvc.html

<div>
	<h4 style="color:blue;">Separamos o Html do Javascript</h4>
</div>

Na nova rota configurada utilizamos um JSON diferente, o templateUrl, o nome já diz é a url apontando para o arquivo html.
Para acessar a nova rota digite /#/mvc

4. Camada Controller


Vamos novamente adicionar uma nova rota.

var app = angular.module('app', ['ngRoute']);

app.config(['$routeProvider', function($routeProvider) {
	
		$routeProvider
			.when('/',           { template: '<p style="color:red;">Conteudo Estatico</p>'})
			.when('/mvc',        { templateUrl: 'aplicando-mvc.html'})
			.when('/controller', { templateUrl: 'aplicando-controller.html' });
}]);

Agora vamos criar o arquivo aplicando-controller.html

<div ng-controller="AplicandoController as apCtrl">
	<h4 style="color:orange;">{{apCtrl.texto}}</h4>
</div>


Na linha 75 temos um novo atributo o ng-controller onde referenciamos qual controller estamos utilizando.


Na linha 76 estamos utilizando {{apCtrl.texto}} a variavel texto é uma variavel do controller onde é preenchido no controller.


Agora vamos criar o arquivo AplicandoController.js


app.controller('AplicandoController', ['$scope', function($scope) {
	
	var self = this;
	
	self.texto = "Aplicando controller....";
	
}]);

A variavel app criado no app.js criamos um controller, no primeiro parametro é o nome do Controller, e o segundo é o corpo, onde criaremos a classe Controller, utilizando injeção de dependencia, variaveis e busca de dados em um back-end por exemplo.
Na linha 89 criamos uma variavel chamada texto, a mesmo utilizada no html.
Antes de digitar na url do navegador /#/controller vamos adicionar a referencia do AplicandoController.js no arquivo index.html

<html ng-app="app">
	<head>
		<title>AngularJS</title>
	</head>
	<body>
		
		<h1>Aplicacao AngularJS</h1>
		<div ng-view></div>
		
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular-route.js"></script>
		<script type="text/javascript" src="app.js"></script>
		<script type="text/javascript" src="AplicandoController.js"></script>
		
	</body>

</html>
5. Aplicando a Camada Service


Utilizaremos a mesma rota e o mesmo controller, mas o controller acessará a camada service, que é responsavel pelo acesso aos dados na camada back-end.

app.controller('AplicandoController', ['$scope', 'AplicandoService', function($scope, AplicandoService) {
	
	var self = this;
	
	self.texto = "Aplicando controller....";
	
	AplicandoService.getListaProdutos().then(function(resp) {
		self.produtos = resp.data;
	}, function(error) {
		alert(error.data);
	});
	
}]);

Na linha 122 Injetamos o servico AplicandoService
Na linha 128 a linha 132, acessamos um metodo getListaProdutos que busca uma lista de protudos em json.
Entao criaremos a camada AplicandoService no arquivo AplicandoService.js

app.factory('AplicandoService', ['$http', function($http) {
	
	return {
		getListaProdutos : function() {
			return $http.get('produtos.json');			
		}
	}
	
}]);

Na linha 142 criamos um serviço nosso no angularJS utilizando o metodo factory e injetando o serviço $http que no metodo getListaProdutos que através do serviço $http requisita a url de um provavel serviço rest no back-end, utilizamos um arquivo json para simular um sistema back-end. Então vamos criar o arquivo produtos.json.

[{"id":1,"descricao":"Livro aprendendo Java em 21 dias"},
 {"id":2,"descricao":"Notebook DELL"}]

Agora vamos adicionar o AplicandoService.js no index.html

<script type="text/javascript" src="AplicandoService.js"></script>

E no arquivo aplicando-controller.js iremos popular os dados.

<div ng-controller="AplicandoController as apCtrl">
	<h4 style="color:orange;">{{apCtrl.texto}}</h4>
	<br/>
	<table border="1">
		<tr>
			<th>Id</th>
			<th>Descricao</th>
		</tr>
		<tbody>
			<tr ng-repeat="p in apCtrl.produtos">
				<td>{{p.id}}</td>
				<td>{{p.descricao}}</td>
			</tr>
		</tbody>
	</table>
</div>