Desenvolvimento

Enriqueça Seu Html com Angular

Angular é uma framework desenvolvida pela mãe Google, por isso já devemos esperar por algo inovador e de qualidade (caso esteja pensando que o cara que fez este post é fanboy… ACERTOU!)

Sempre que falamos em aplicativos pensamos do lado server-side primeiro, qual linguagem utilizar? quais frameworks vão facilitar o trabalho? qual arquitetura é a mais adequada?… Mas e o front-end, que se f@d$? Não! pois com a framework da google é possível aplicar padrões e desenvolver seu front-end utilizando o tão conhecido MVC, criar novas diretivas (tags) e criar expressões no corpo da página

Veja só um exemplo de expressão: <span>{{2+2}}</span>

Tudo que estiver entre {{}} será calculado e exibido na tela

Outro exemplo clássico é: <input ng-model=”x“><span>{{x}}</span>

O ng-model diz ao angular “Pegue o valor que o usuário inserir neste input e guarde na variável x”, na outra linha dentro de {{}} o “x” é exibido. Achou complicado? Então faz isso na mão com JavaScript.

Tudo isso só irá funcionar se o código do Angular estiver dentro de uma tag com ng-app. Quer ver funcionar? Crie um arquivo .html e cole o código abaixo

<!DOCTYPE html>
<html>
    <head>
        <title>Exemplo de Angular</title>
    </head>
    <body>
        <div ng-app>
            <span>Isto é uma expressão: {{2+2}}</span>
            <br>
            <span>Isto também é uma expressão: {{"Martins" + ", Thiago"}}</span>
            <br>
            <br>
            <h4>Isto é uma calculadora:</h4>
            <input type="number" ng-model="x">+<input type="number" ng-model="y">={{x+y}}
            <br>
            <br>
            <h4>Este é aquele exemplo clássico de Angular</h4>
            <input type="text" ng-model="nome"><span>Nome: {{nome}}</span>
        </div>
        <span>Fora de ng-app: {{2+2}}</span>
    </body>
    <script type="application/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
</html>

Bem os exemplos acima são resumidos ao extremo, mas é o ponta-pé inicial para quem quiser começar… Já existem vários tutoriais disponíveis. Assistam o tutorial oficial que é dividido em 5 níveis através deste link

Gostou? Quer mais? Comente um comentário sobre seus pensamentos e dúvidas =)

Padrão

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s