{{'slide.iAm' | translate}} DIOGO
{{'slide.iAmWeb' | translate}}

  • FrontEnd

  • BackEnd

  • Expert

{{'whatIDo.the' | translate}} {{'whatIDo.services' | translate}} {{'whatIDo.iOffer' | translate}}

{{'whatIDo.branding' | translate}}

{{'whatIDo.branding.text' | translate}}

{{'whatIDo.development' | translate}}

{{'whatIDo.development.text' | translate}}

FrontEnd

{{'whatIDo.frontend.text' | translate}}

BackEnd

{{'whatIDo.backend.text' | translate}}

{{'aboutMe.hello' | translate}}

{{'aboutMe.iAm' | translate}} Canoas, Rio Grande Do Sul - {{'aboutMe.country' | translate}}. {{'aboutMe.work' | translate}} {{'aboutMe.company' | translate}} {{'aboutMe.and' | translate}} {{'aboutMe.thatCompany' | translate}} {{'aboutMe.currently' | translate}} 3ia.com.br.
{{'aboutMe.passion' | translate}}

{{'aboutMe.resume' | translate}}

{{'aboutMe.viewMyWorks' | translate}}
80

Web Design

85

HTML5 / CSS3

90

JavaScript

75

UI / UX

{{'whatIDo.the' | translate}} {{'myWorks.works' | translate}} {{'myWorks.iAm' | translate}}

tutorial angular

Iniciando com angularjs

angularjs.org

Fala galera, tudo certo? Estou voltando depois de muitos anos sem um site para postar minhas ideias, porém agora com muito mais bagagem para poder ajudar o pessoal da comunidade tanto quem está iniciando como quem já programa, pois a final das contas, todo dia aprendemos algo, correto?

Então, nesse primeiro artigo irei falar sobre o angularjs, quais as vantagens de usar ele, como eu o utilizo no meu dia a dia, etc...

O angularjs é um framework javascript poderoso, pelo menos ao meu ver, hehehehe, ele possui um modelo mvc bem interessante, que nos faz modelar todo nosso código separadamente. Umas das grandes vantagens do angularjs são as promisses, a criação de factories e components, fazendo com que você possa reutilizar muito código e ter uma performance no trabalho com ajax.

Um boa prática que eu sigo é utilizar a styleguide do John Papa, pois é possível ter um código mais enxuto e com boas práticas no uso do angularjs.

Segundo John Papa devemos definir uma variável com o nome vm que irá representar o padrão view-model no uso do alias do controller da página, pois o this faz parte do contexto e se usarmos ele dentro de uma função do controller ele poderá alterar informações do contexto e se atribuir o this para variável vm você terá todo contexto atual sem alterar nada no contexto principal.

Atualmente estou utilizando o angularjs em alguns projetos aqui na empresa, temos uma arquitetura .NET e utilizo o angularjs juntamente com o novo core da microsoft que irei abordar o uso dele em outro tópico, e construi uma leva de componentes reutilizavéis e isso hoje economiza muito esforço.

Vamos então ao nosso primeiro exemplo? Irei construir um projetinho crud onde possamos utilizar uma boa gama de recursos do angularjs.

Nesse primeiro artigo não irei usar o npm, pois quero escrever um artigo somente sobre esses recursos, então hoje iremos criar tudo na mão :)

Vamos criar um diretório chamado angular-crud e dentro dele uma página index.html, ao final do artigo eu posto o link para o download do projeto, ok?

Ao final do <body> importe o angularjs através do link do cdnjs, irei utilizar a versão 1.6.1 nesse tutorial.

Estarei utilizando o atom como IDE, nesse tutorial!

Se você não conhece a estrutura básica de uma página html, então recomendo você pegar o código no site da w3schools, não irei me aprofundar muito em conceito, o objetivo desse tutorial é trazer exemplos práticos :)

Ok, com nossa página index.html em mãos, vamos criar um atributo data-ng-app na tag <html>, ficando assim: <html data-ng-app='myApp'>, mais porque usar o data como prefixo? Porque em certos browsers há validações no ng-... e eles não enchergam nada com data-ng então aconselho a utilizar sempre o "data" e isso deixa o código com uma cara mais "FRONTEND" hahahaha

Agora vamos definir nosso arquivo principal do sistema, onde iremos carregar os módulos do angularjs.

Dentro do nosso diretório angular-crud, crie um novo diretório chamado js e dentro dele um arquivo chamado app.js.

Cole esse trecho de código dentro no arquivo app.js:


	(function(angular){
		'use strict';
		angular.module('myApp', []);
	})(window.angular);
							

No javascript podemos escrever essas funções de diversas formar, mas esse é o padrão adotado, segundo a styleguide do John Papa, e por que usar strict? Porque o strict é mais rigoroso na interpretação da linguagem.

Com isso inicializamos nosso módulo no angularjs e setamos em nosso data-ng-app o nome do módulo que definimos aqui nesse trecho do código, fácil né?

Com o módulo já definido vamos criar elementos na página correspondente ao nosso crud. Vamos iniciar com a criação do menu, o crud será sobre instrumentos musicais :) Irei usar o bootstrap para dar uma estilizada no projeto, então importe o .css do mesmo no site do cdnjs.


<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
  <title>Tutorial de angularjs</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/>
</head>
<body>
  <div class="navbar navbar-inverse navbar-fixed-top"><!-- início do navbar -->
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Instrumentos musicais</a>
      </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a ui-sref="listar">Cadastro</a></li>
        </ul>
      </div>
    </div>
  </div><!-- fim do navbar -->

  <div class="container page"><!-- início do container da página -->

    <form name="ctrl.form" novalidate><!-- início do form -->
      <nav class="navbar navbar-default">
        <button type="submit" class="btn btn-success navbar-btn button">Salvar</button>
        <button type="reset" class="btn btn-default navbar-btn button">Limpar</button>
      </nav>
      <div class="form-group">
        <label for="codigo">Código:</label>
        <input type="text" class="form-control" id="codigo" name="codigo"/>
      </div>
      <div class="form-group">
        <label for="descricao">Descrição:</label>
        <input type="text" class="form-control" id="descricao" name="descricao"/>
      </div>
      <div class="form-group">
        <label for="marca">Marca:</label>
        <input type="text" class="form-control" id="marca" name="marca" />
      </div>
    </form><!-- fim do form -->

    <div class="jumbotron"><!-- início do jumbotron -->

      <table class="table table-striped"><!-- início do table -->
        <thead>
          <th>Código</th>
          <th>Descrição</th>
          <th>Marca</th>
          <th></th>
          <th></th>
        </thead>
        <tbody>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td><button class="btn glyphicon glyphicon-pencil" ></button></td>
            <td><button class="btn glyphicon glyphicon-trash"></button></td>
          </tr>
        </tbody>
      </table><!-- fim do form -->

    </div><!-- fim do jumbotron -->

  </div><!-- fim do container da página -->

  <!-- Import the javascript files by cdnjs -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js" type="text/javascript"></script>  

<!-- Import the local angularjs files -->
  <script src="js/app.js" type="text/javascript"></script>

</body>
</html>

						

Note que eu já importei o arquivo app.js na página pois já tinhamos definido o data-ng-app.

Vamos criar um diretório dentro da pasta angular-crud com o nome css e dentro dela crie um arquivo chamado app.css, importe o arquivo na página abaixo onde nós importamos o css do bootstrap, e cole o código abaixo:

.page {
  margin-top: 80px;
  margin-bottom: 20px;
}

.button {
  margin-left: 10px;
}

.form-control:required {
  border: 1px solid #DE4F4F;
}
						

Agora com nossa página html completa, podemos voltar ao angularjs e dar vida na nossa aplicação.

Crie um diretório chamado controller dentro do diretório angular-crud/js e dentro crie um arquivo chamado cadastroCtrl.js, usamos o sufixo Ctrl para nos referenciar ao Controller.

Crie um bloco javascript padrão para o nosso controller, segue o código abaixo:


(function(){
  'use strict';
    angular.module('myApp').controller('CadastroCtrl', CadastroCtrl);
    function CadastroCtrl() {
        var vm = this;
    }
})();
						

O que mudou nesse bloco, de acordo com o que vimos no bloco anterior onde nós definimos nosso módulo?

Se você respondeu controller, está correto, ali definimos nosso controller e já passamos a usar a variável vm para receber o nosso escopo.

Agora vamos definir em nossa página .html o controller, então coloque o atributo data-ng-controller na div onde temos a classe container page, ficando assim: <div class="container page" data-ng-controller="CadastroCtrl as ctrl">.

Agora você precisa importar o arquivo cadastroCtrl.js em nossa página index.html abaixo onde está importado o arquivo app.js.

Para ligar os campos da página ao nosso controller, temos que usar o atributo data-ng-model, que irá ligar o campo ao nosso modelo, então seguindo o padrão do alias que estamos usando, temos que declarar o controller antes do nome que daremos ao model, por exemplo: "<input type="input" data-ng-model="ctrl.codigo">", porém como iremos estar utilizando um formulário nesse caso para ficar mais prático e não precisar passar todos os campos para o controller, iremos atribuir os models ao objeto "data" assim podemos passar todos os campos de uma só vez para o formulário que irá leva-los ao nosso controller, ficando assim: <input type="input" data-ng-model="ctrl.data.codigo">.

Agora você pode fazer o mesmo nos outros campos do formulário.

O legal de trabalhar com formulários no angular, além da possibilidade citada acima, temos os status do formulário, como valid, invalid, pending, pristine, dirty e submitted, então você consegue validar o formulário criando regras para deixar um botão desativado por exemplo.

Já tinhamos criado os botões em nossa página, agora podemos criar uma validação nesses para que se os campos obrigatórios ainda não sejam populados iremos deixa-los desativados e aproveitando podemos já definir que o campo Código e Descrição, são obrigatórios, ok?

Abaixo está o código do formulário já com os atributos do angulajs:


<form name="ctrl.form" data-ng-submit="ctrl.submitForm(ctrl.data)" novalidate><!-- início do form -->
      <nav class="navbar navbar-default">
        <button type="submit" class="btn btn-success navbar-btn button" data-ng-disabled="ctrl.form.$invalid">Salvar</button>
        <button type="reset" class="btn btn-default navbar-btn button" data-ng-click="ctrl.limpar();" data-ng-disabled="ctrl.form.$invalid">Limpar</button>
      </nav>
      <div class="form-group">
        <label for="codigo">Código:</label>
        <input type="text" class="form-control" id="codigo" name="codigo" data-ng-model="ctrl.data.codigo" data-ng-required="ctrl.form.codigo.$error.required"/>
      </div>
      <div class="form-group">
        <label for="descricao">Descrição:</label>
        <input type="text" class="form-control" id="descricao" name="descricao" data-ng-model="ctrl.data.descricao" data-ng-required="ctrl.form.descricao.$error.required"/>
      </div>
      <div class="form-group">
        <label for="marca">Marca:</label>
        <input type="text" class="form-control" id="marca" data-ng-model="ctrl.data.marca" />
      </div>
    </form><!-- fim do form -->

						

Vejam que na tag do formulário eu usei o data-ng-submit que passa um método e como parâmetro um objeto, correto? Esse método será criado lá no nosso controller substituindo o ctrl por vm que é a variável que lê o nosso escopo, um detalhe interessante é o atributo name, perceberam? Então o angular faz as ligações em nossa página através do atributo name, por isso que ao usar uma validação em um botão por exemplo para verificar se ele deve estar ativo ou inativo você passa através do name do formulário. Vamos ver como ficou nosso controller? Segue o código abaixo:


(function(){
  'use strict';
    angular.module('myApp').controller('CadastroCtrl', CadastroCtrl);
    function CadastroCtrl() {
        var vm = this;
        vm.lista = [];
        //Limpa o formulário
        var limpar = function(){
          vm.edicao = false;
          vm.data = {};
        };
        vm.limpar = limpar;

        //Faz o submit do formulário e verifica se é inserção ou edição
        var submitForm = function (data) {
            var item = angular.copy(data);
            if (vm.form.$valid) {              
                vm.lista.push(item);              
            }
        };
        vm.submitForm = submitForm;

    }
})();


						

Acima coloquei o código do controller, note que tem duas variáveis definidas como função, é uma dica bem interessante trabalhar dessa maneira uma vez que o código fica muito mais organizado e de fácil manutenção, está tudo declarado na styleguide do John Papa. Então criei duas funções que se refere aos nossos botões um de limpar e o outro de salvar, como isso ao salvar o formulário, estamos atribuindo o objeto do formulário para dentro da lista, usando o "push" que serve para adicionar um objeto dentro de um array, mas porque usar angular.copy, para que ele serve? Nesse momento até não irá fazer muita diferença, mas logo quando formos editar o nosso formulário ele garantirá que o objeto atual não seja alterado, porque o angular trabalha no escopo atual, tudo que tem na tela e altera em "tempo real" então se editarmos um formulário no momento que alterar algo no campo o objeto é atualizado juntamente no mesmo instante, então usamos o copy para trabalhar com uma cópia do objeto naquele escopo, legal né :)

Bom, agora iremos focar na listagem, para isso o angular tem uma grande ferramenta que é o data-ng-repeat, esse atributo é um loop que interage o array e vai criando elementos repetidos na tela, por isso iremos usá-lo, pois ele irá criar para nós as linhas da tabela e podemos navegar entre os objetos pegando os valores e manipulando-os.

Atribua ao tr do tbody o atributo data-ng-repeat e juntamente passe a lista que está populada e que foi criada no controller, assim como no exemplo abaixo:


<tr data-ng-repeat="row in ctrl.lista">
						

Assim nossa tabela será interada mais sem valores nas linhas, pois faltou passar o valor no td, e para isso existe duas formas, a primeira é usando as tags nativas do angularjs que é definida com duas {{ }} porém o ruim dessa prática é que enquanto nossa página não é renderizada as tags ficam visiveis na página, então eu prefiro usar o atributo data-ng-bind que tem o mesmo papel, porém só mostra após renderizado. Segue o código da nossa tabela:


	<table class="table table-striped"><!-- início do table -->
	<thead>
		<th>Código</th>
		<th>Descrição</th>
		<th>Marca</th>
		<th></th>
		<th></th>
	</thead>
	<tbody>
		<tr data-ng-repeat="row in ctrl.lista">
		<td data-ng-bind="row.codigo"></td>
		<td data-ng-bind="row.descricao"></td>
		<td data-ng-bind="row.marca"></td>
		<td><button class="btn glyphicon glyphicon-pencil" data-ng-click="ctrl.editar(row, $index);"></button></td>
		<td><button class="btn glyphicon glyphicon-trash" data-ng-click="ctrl.remover($index);"></button></td>
		</tr>
	</tbody>
	</table><!-- fim do form -->

						

Já coloquei o código dos botões alterar e excluir, observe que em ambos eu passo o $index que é um ponteiro que marca a linha em que houve o clique, isso nos facilita muito na hora de pesquisar um registro em um json ou até mesmo remover uma linha usando o splice, então vamos verificar como ficou nosso controller?


(function(){
  'use strict';

    angular.module('myApp').controller('CadastroCtrl', CadastroCtrl);

    CadastroCtrl.$inject = [];
    function CadastroCtrl() {
        var vm = this;
        vm.lista = [];
        vm.edicao = false;

        //Limpa o formulário
        var limpar = function(){
          vm.edicao = false;
          vm.data = {};
        };
        vm.limpar = limpar;

        //Faz o submit do formulário e verifica se é inserção ou edição
        var submitForm = function (data) {
            var item = angular.copy(data);
            if (vm.form.$valid) {
              if(vm.edicao){
                vm.lista[item.index] = item;
              } else {
                vm.lista.push(item);
              }
            }
        };
        vm.submitForm = submitForm;

        //Popula os campos nos campos após o clique na tabela
        var editar = function(item, index){
          var itemToEdit = angular.copy(item);
          vm.data = itemToEdit;
          vm.data.index = index;
          vm.edicao = true;
        };
        vm.editar = editar;

        //Remove o item da tabela
        var remover = function(index){
          vm.edicao = false;
      		vm.lista.splice(index, 1);
        };
        vm.remover = remover;
    }
})();

						

Muito legal, aqui temos o controller todo construído, vamos verificar como está o código.

Vejam que tem uma flag chamada edicao, aqui eu digo se a requisição é para salvar ou alterar o registro. A variável começa como falso, pois por default queremos salvar um novo registro e seto novamente ele como false no método limpar.

No submit do formulário, eu verifico se o formulário está sendo alterado ou se é para salvar e faço a ação desejada, vejam que se for edição eu localizo o registro no array através do index e passo o objeto a ser alterado.

No método editar eu faço um copy para uma variável e passo as informações da linha para o objeto formulário e seto um valor no objeto passando o $index da linha para poder alterar o objeto.

E por fim eu criei um método remover que pega o índice e apaga o registro do json utilizando o splice.

Então galera, nesse post eu falei um pouco do uso do angular, claro que tem diversas formas de trabalhar com o angularjs, aqui eu mostrei como eu costumo trabalhar e um ponto em que eu irei deixar para um próximo post é de como fazer de uma melhor forma o uso dos métodos para obter uma melhor prática.

Abaixo está disponível o projeto para download, espero ter ajudado em algum ponto e qualquer crítica ou sugestão podem preencher o formulário de contato que irei responder com certeza :)

Download do projeto - GitHub
site para adestramento de cães

Adestramento de cães

adestradorcanino.com.br

Desenvolvi esse site para meu amigo Cristiano, que hoje faz um excelente trabalho de adestramento de cães, na cidade de Campo Bom / RS.

{{'contactMe.keepIn' | translate}} {{'contactMe.touch' | translate}} {{'contactMe.withMe' | translate}}

{{'contactMe.text' | translate}}

Diogo Soares
Rio Grande Do Sul, {{'aboutMe.country' | translate}} +55 (51) 99792-9082