angular google – Blog do Camilo

Usando Yoeman com AngularJS

Olá Pessoal,

No post de hoje vamos ver como usar o Yeoman com AngularJS. Eu falei sobre o Yeoman rapidamente nesse post.

Lets go…

Step 1

Para o ambiente Windows, você pode ter o Gitbash instalado com suporte a execução de comando linux/unix. Instale também o NodeJS.

Step 2

Agora abra o Gitbash e digite o comando

npm install -g yo

Ao terminar

Step 3

Para ter suporte à criação de projetos com o angular, precisamos instalar o generator para o framework.

npm install -g generator-angular

Crie uma pasta algo como yeomandemo. Entre nela e digite

yo

Responda Y

E escolha a opção:

yo angular

E vá respondendo às perguntas.

Pronto, seu projeto foi criado. Para entender a estrutura há um post completo: http://www.sitepoint.com/kickstart-your-angularjs-development-with-yeoman-grunt-and-bower/

No meu github coloquei um exemplo do projeto demo que fiz com yoeman gerando o projeto com angular https://github.com/camilolopes/workspaceAngularJs

Abraços. See ya!!!

AngularJS: Primeira aplicação a gente nunca esquece

Olá pessoal,

O post de hoje é mais para compartilhar com você a minha primeira aplicação com angularJS. Como dizem: “a primeira vez a gente nunca esquece”, e comigo não foi diferente. Apesar da aplicação não seguir boas práticas, eu não quis apagar da minha vida,pelo contrário.

Lets go..

Movie Vote

É uma aplicação que exibe aos usuários opções de filmes e no final mostra o mais votado. A combinação nunca pode repetir o mesmo filme na pergunta, ou seja, não posso perguntar: “Qual seu filme favorito?”.

Batman
Batman

Desenvolver essa aplicação simples na época me ajudou a entender muitas coisas básicas do framework que não conhecia bem ou não entendia quando fazia de maneira isolada. Juntar as peças e comunicação entre controller, view etc, faz a diferença no aprendizado, e certamente vamos errar, ter exceções na tela, mas não vamos desmotivar e desistir. Quando criei essa aplicação o objetivo mesmo era praticar o básico do básico do framework, sem ainda estar preocupado com as boas práticas etc. Deixei isso para o segundo tempo do jogo. Depois de ter desenvolvido, aprendi como internacionalizar apps com angularJS e coloquei em prática testando no movie-vote.

Onde quero chegar?

Sem prática, não tem como aprender. Parece óbvio, mas é preciso exercitar, criar, dar trabalho para você mesmo, e não necessariamente criar algo complexo; pode ser simples. Esse simples, pode acreditar que vai dar um certo trabalho de fazer quando você está usando uma tecnologia nova. E o melhor de tudo: não se envergonhe daquilo que fez quando estava aprendendo, tenha orgulho, pois quando você olha para o passado e vê o presente saberá se evoluiu ou continua escrevendo e pesando da mesma forma que começou.

Vou ficando por aqui. Segue o link da aplicação movie-vote https://github.com/camilolopes/workspaceAngularJs

Abraços, see ya!

Série AngularJS Usando o $watch

Olá Pessoal,

No post de hoje vamos ver como usar o $watch no angular. Mas pra que serve? Bem, se você já trabalhou com JSF ou JavaScript puro certamente algum dia teve que implementar em algum elemento alguma ação após alteração de um campo. Por exemplo, após digitar o usuário, digitar o email e senha habilitamos o botão login. É isso que vamos ver com o $watch, ele faz sync com um elemento.

Lets go…

Starting…

Para esse exemplo vamos usar o projeto recipeangularexample, que já estamos usando nos últimos posts, portanto vou considerar que você tem a estrutura do projeto conforme estamos evoluindo desde o último post. Se você baixar a versão do GitHub terá o projeto completo com tudo que veremos na série.

Development

A implementação é bem simples, vejamos:

Alterando recipeController.js

var recipeController = function ($scope){

       $scope.name=””;

       //é aqui que está mágica

       $scope.$watch(“name”,function(newValue,oldValue){

             if($scope.name.length > 0){

                    $scope.greeting = “Greeting ” + $scope.name;

             }

       });

};

Alterando o arquivo watch.html

<body>

<div>

<input type=“text” ng-model=“name”>

<p>{{greeting}}

</div>

</body>

Resultado:

Simples, não?

Abracos, see ya!!