AngularJS: Série de Bolso (parte 3)

No último post da série de bolso sobre AngularJS conversamos sobre

  • Inicialização de módulos
  • $scope
  • Controllers com e sem apelido
  • Injeção de dependência

Neste artigo o foco será o uso de diretivas nativas do AngularJS para dar mais comportamento à aplicação.

Diretivas, segundo a documentação oficial, são marcadores que ditam ao AngularJS a atribuição de comportamentos e/ou características ao Document Object Model (DOM) do HTML.

Diretivas para mim são uma forma de encapsular comportamentos que minha aplicação precisa ter durante o seu uso.

O AngularJS possui uma série de diretivas padrões, todas com o prefixo ng. Você pode criar suas próprias diretivas também, mas neste artigo vamos focar no uso de algumas que o framework nos fornece nativamente.

Vamos começar preparando a nossa estrutura de pastas novamente. Vou seguir o mesmo padrão do artigo anterior.

Prepare seu index.html assim:

<!doctype html>
<html class="no-js" ng-app="app">
    <head>
        <title>AngularJS - Série de bolso (parte 3)</title>
    </head>
    <body ng-controller="MainController as mainCtrl">

        <script src="scripts/angular.js"></script>
        <script src="scripts/app.js"></script>
        <script src="scripts/MainController.js"></script>
    </body>
</html>

seu app.js:

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

E seu MainController.js:

(function(){
    'use strict';
    angular
        .module('app')
        .controller('MainController', MainController);
    
    MainController.$inject = [];
    function MainController(){
        var vm = this;
    }

}());

Conhecendo as diretivas!

Se você leu e programou junto com o artigo anterior, já usou algumas dessas diretivas:

ng-app: Diretiva responsável por iniciar o AngularJS com base na tag que foi inserida.

ng-model: Transfere o valor inserido no elemento HTML para o objeto javascript referenciado.

ng-controller: Atribui um controlador a um elemento html e seus filhos. Pode ser usado de forma aninhada, de forma a controllers terem herdeiros.

ng-click: Executa algo ao “escutar” um click no elemento aplicado. Você pode passar uma função e argumentos para ela. Vamos a um exemplo:

index.html:

<!doctype html>
<html class="no-js" ng-app="app">
    <head>
        <title>AngularJS - Série de bolso (parte 3)</title>
    </head>
    <body ng-controller="MainController as mainCtrl">

        <button type="button" ng-click="mainCtrl.exibirMensagem('Olá AngularJS!')">
            Exibir Olá
        </button>

        <br /><br />

        <button type="button" ng-click="mainCtrl.exibirMensagem('Adeus AngularJS!')">
            Exibir Adeus
        </button>

        <script src="scripts/angular.js"></script>
        <script src="scripts/app.js"></script>
        <script src="scripts/MainController.js"></script>
    </body>
</html>

 

MainController.js:

(function(){
    'use strict';
    angular
        .module('app')
        .controller('MainController', MainController);
    
    MainController.$inject = [];
    function MainController(){
        var vm = this;
        vm.exibirMensagem = exibirMensagem;

        activate();

        function activate(){

        } 

        function exibirMensagem(msg){
            console.log('>>>', msg, '<<<');
        }
    }

}());

ng-show: Determina se o elemento será visível ou não, dependendo do argumento que recebe (true/false). Vamos ver um exemplo combinado com ng-model:

index.html:

<!doctype html>
<html class="no-js" ng-app="app">
    <head>
        <title>AngularJS - Série de bolso (parte 3)</title>
    </head>
    <body ng-controller="MainController as mainCtrl">

        <p ng-show="mainCtrl.primeiroParagrafo">
            <strong>Primeiro parágrafo!</strong>
            <br />
            Curabitur sed pellentesque lorem. Phasellus mollis lorem ultricies velit facilisis dictum.
        </p>

        <p ng-show="mainCtrl.segundoParagrafo">
            <strong>Segundo parágrafo!</strong>
            <br />
            Aliquam sed tempor lacus, vitae ultrices enim. Nullam orci libero, bibendum in vehicula sit amet, pharetra ac dolor. 
        </p>

        <p>
            <input type="checkbox" ng-model="mainCtrl.primeiroParagrafo"> Exibir primeiro paragrafo
            <br />
            <input type="checkbox" ng-model="mainCtrl.segundoParagrafo"> Exibir segundo paragrafo
        </p>

        <script src="scripts/angular.js"></script>
        <script src="scripts/app.js"></script>
        <script src="scripts/MainController.js"></script>
    </body>
</html>

MainController.js:

(function(){
    'use strict';
    angular
        .module('app')
        .controller('MainController', MainController);
    
    MainController.$inject = [];
    function MainController(){
        var vm = this;
        vm.primeiroParagrafo = true;
        vm.segundoParagrafo = true;

        vm.exibirMensagem = exibirMensagem;

        activate();

        function activate(){

        } 

        function exibirMensagem(msg){
            console.log('>>>', msg, '<<<');
        }
    }

}());

ng-hide: Mesmo objetivo do ng-show, mas funciona ao contrário. Se receber true, esconde o elemento. False exibe. *Eu pessoalmente prefiro usar o ng-show sempre que possível.

ng-repeat: Repete uma estrutura HTML para todos os elementos da coleção que receber. Você usará muito disso em suas aplicações. Vamos a um exemplo exibindo pessoas:

index.html

<!doctype html>
<html class="no-js" ng-app="app">
    <head>
        <title>AngularJS - Série de bolso (parte 3)</title>
    </head>
    <body ng-controller="MainController as mainCtrl">

        <div ng-repeat="pessoa in mainCtrl.pessoas">
            <p>
                {{pessoa.Nome}} ({{pessoa.Id}})
                <br />
                {{pessoa.Email}}
            </p>      
            <hr />      
        </div>

        <script src="scripts/angular.js"></script>
        <script src="scripts/app.js"></script>
        <script src="scripts/MainController.js"></script>
    </body>
</html>

MainController.js:

(function(){
    'use strict';
    angular
        .module('app')
        .controller('MainController', MainController);
    
    MainController.$inject = [];
    function MainController(){
        var vm = this;
        vm.primeiroParagrafo = true;
        vm.segundoParagrafo = true;
        vm.pessoas = undefined;

        vm.exibirMensagem = exibirMensagem;

        activate();

        function activate(){
            vm.pessoas = [
                {Id: 1, Nome: 'Diogo Vechio', Email: 'diogo@fotografiasbr.com.br'},
                {Id: 2, Nome: 'Cocão', Email: 'nakamura@ninjanet.com'}
            ];
        } 

        function exibirMensagem(msg){
            console.log('>>>', msg, '<<<');
        }
    }

}());

ng-options: Gera a lista de options da tag <select>.

ng-class: Insere uma classe no elemento html. Vamos a um exemplo com options e class:

index.html:

<!doctype html>
<html class="no-js" ng-app="app">
    <head>
        <title>AngularJS - Série de bolso (parte 3)</title>

        <style>
            .light-blue {
                color: #294c6d;
                background-color: #89b6ff;
            }

            .rose {
                color: #511f51;
                background-color: #ff89ff;
            }

            .active {
                color: #FF0;
            }
        </style>

    </head>
    <body ng-controller="MainController as mainCtrl">

        <select ng-model="mainCtrl.selectedClass"
                ng-options="classe.Css as classe.Descricao for classe in mainCtrl.classes">
        </select>

        <p ng-class="mainCtrl.selectedClass">
            Este lindo texto foi escrito pensando em você.
        </p>

        <p></p>

        <p ng-class="{active: mainCtrl.isActive}">
            Este novo texto foi escrito rapidamente para você.
        </p>

        <input type="checkbox" ng-model="mainCtrl.isActive"> Ilegivel

        <script src="scripts/angular.js"></script>
        <script src="scripts/app.js"></script>
        <script src="scripts/MainController.js"></script>
    </body>
</html>

MainController.js:

(function(){
    'use strict';
    angular
        .module('app')
        .controller('MainController', MainController);
    
    MainController.$inject = [];
    function MainController(){
        var vm = this;
        vm.primeiroParagrafo = true;
        vm.segundoParagrafo = true;
        vm.pessoas = undefined;
        vm.classes = undefined;
        vm.selectedClass = 'light-blue';
        vm.isActive = true;

        vm.exibirMensagem = exibirMensagem;

        activate();

        function activate(){
            vm.pessoas = [
                {Id: 1, Nome: 'Diogo Vechio', Email: 'diogo@fotografiasbr.com.br'},
                {Id: 2, Nome: 'Cocão', Email: 'nakamura@ninjanet.com'}
            ];

            vm.classes = [
                {Descricao: 'Azul Claro', Css: 'light-blue'},
                {Descricao: 'Rosa', Css: 'rose'}
            ];
        } 

        function exibirMensagem(msg){
            console.log('>>>', msg, '<<<');
        }
    }

}());

Concluindo

Fora essas citadas, existem diversas outras, geralmente com uso bem intuitivo.

Por exemplo, o que você acha que a diretiva ng-checked faz? Seria algo relacionado ao atributo checked do HTML? Sim 🙂

Enquanto existe o ng-click para o onclick, qual seria o equivalente ao onchange? ng-change!

Todas as diretivas são bem simples e diretas, mas podemos combiná-las e ter resultados interessantes. A criação de um wizard pode ser feito basicamente com ng-click e ng-show/ng-hide. Nosso conhecimento em javascript é que vai ditar nossos limites, visto que o AngularJS é apenas um facilitador.

Deixo aqui um exemplo de uma to-do list, com alguns gracejos proporcionados pelo AngularJS e javascript.

Autor: Doná

Um piracicabano médio, amante do desenvolvimento web.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *