AngularJS 1 – 2 Conceitos Básicos

Olá pessoas,

Agora que você já instalou o ambiente dev para conseguir escrever suas primeiras aplicações SPA com Angular e provavelmente já deve ter tentado escrever algo e se enrolado bastante com o que vai aonde e que raios são esse monte de arquivos JS vamos entender os conceitos básicos do Angular (sem enrolação) e começar a produzir algo.

Atenção: Este post longo e pode parecer chato em alguns pontos, vou me esforçar para melhorar isto, entretanto é muito importante que você leia e entenda como funciona o framework antes de sair testando uma série de coisas nos próximos posts;

Acompanhe abaixo os links da série:

Série AngularJS1

  1. Configurando seu ambiente Windows
  2. Conceitos Básicos

Como funciona o Angular e o que é MVW? 

O AngularJS é um framework baseado no pattern MVW (Model, View, Whatever) onde a Model é a camada que representa as entidades da app, as Views seriam a camada de apresentação e Whatever seria qualquer coisa que você queira chamar as Controllers e os Services. Se você quer uma definição bacana de padrões arquiteturais de projetos veja este link.

Na verdade gosto de imaginar que a model seria os objetos $scope, as views são o nosso bom e velho html e as controllers são as controllers mesmo. E se for extremamente necessário definir o que seriam os services (se você realmente se incomoda) eu não os colocaria em lugar nenhum nesse contexto porque para o angular services são apenas objetos reutilizáveis dentro da aplicação .

Views, Diretivas, Controllers e Services

Sem muita enrolação, vamos definir o que faz cada coisa:

Views – São suas velhas e boas amigas tags html. Nada de especial, só o de sempre mesmo.

Diretivas – Existem vários lugares aonde você pode conseguir uma definição mais polida de diretivas (a documentação oficial, por exemplo), eu prefiro definir como atributos especiais que grudam as Views (seu html) com as controllers do Angular. Veja os exemplos:

 
<!doctype html>
<html ng-app>
<body>

<div>
        <label>Name:</label>
        <input type="text" ng-model="yourName" placeholder="Enter a name here">

<hr>


<h1>Hello {{yourName}}!</h1>

    </div>

</body>
</html>

Perceba nas linhas destacadas vemos dois elementos que não pertencem ao nosso bom o velho html, as diretivas ng-app e ng-model.

ng-app: “Sinaliza” para o Angular que a partir daquele ponto é iniciada nossa aplicação.

ng-model: Liga o valor inserido no campo com o valor apresentado entre chaves (curly braces ou double mustaches). Quando um valor é passado de dentro do framework para a view chamamos isso de Data-binding. Calma.. Vamos falar mais disso depois.

Diretivas mais comuns

ng-repeat: Itera entre elementos criando uma repetição de resultados. Muito comum quando você tem uma lista de objetos e quer mostra-los na View.


<ul>

<li ng-repeat="cor in cores">
        {{cor}}
    </li>

</ul>

ng-click: Invoca o evento click de uma objeto na View. Muito comum quando queremos executar uma função presente em nossa controller.

<button class="btn btn-primary" ng-click="btnClick()">Click aqui</button>

ng-show / ng-hide: Exibe ou oculta um determinado item da view.


<ul>
    <!-- ng-show mostrará somente se a função retornar true -->

<li ng-show="somentePares()">{{numeros}}</li>

</ul>

ng-disable: Inclui o atributo disable no elemento html da view.


<form class="navbar-form navbar-left" role="search">

<div class="form-group">
        <!-- ng-model 'grudará' o valor de nossa busca numa variável do Angular -->
        <input type="text" class="form-control" placeholder="Buscar" ng-model="busca" required>
    </div>

    <!-- graças a ng-disabled o botão ficará desativado se não houver valor no campo busca -->
    <button type="submit" class="btn btn-default" ng-disabled="!busca" ng-click="btnBuscar(busca)">Submit</button>
</form>

ng-if: Executa uma comparação exibindo o elemento em questão caso essa verificação seja verdadeira.

<!-- esta div so aparecerá se o ususario ja estiver cadastrado -->

<div class="alert alert-warning" role="alert" ng-if="usuarioCadastrado()">

<h2>Usuário já cadastrado!</h2>

</div>

<!-- esta div so aparecerá se o usuário NÃO estiver cadastrado -->

<div ng-if="!usuarioCadastrado()">

<h2>Cadastrado de usuário</h2>


<form class="form">

<div class="form-group">
            <input type="text" class="form-control" placeholder="Seu Nome" ng-model="usrNome" required>
        </div>


<div class="form-group">
            <input type="text" class="form-control" placeholder="Seu Email" ng-model="usrEmail" required>
        </div>

        <button type="submit" class="btn btn-default" ng-disabled="!busca" ng-click="cadastrarUsuario()">Submit</button>
    </form>

</div>

Você deve ter percebido nos casos da ng-click e ng-show/hide que diretivas suportam funções e condições como valor.

Mostrarei depois: Você também pode criar suas próprias diretivas. Isso é muito bom em termos de “componentização” (não, essa palavra não existe) de elementos. Por exemplo, você pode criar uma galeria de fotos padrão e simplesmente chamar a diretiva passando as fotos:

<!-- Esperamos que ao renderizar a diretiva o Angular mostre a galeria e um botâo para adicionar uma nova foto -->
<minhaGaleria datasource="fotos" add="foto"></minhagaleria>

Mas não vamos apressar as coisas, este post já está ficando bem grande graças a complexidade das diretivas.

Controllers – Digamos que você queira escrever uma calculadora. É justo dizer que você deveria escrever as operações em algum lugar que não fosse a view:

Teste este exemplo no Plunker.

Perceba que usamos algumas diretivas que você já viu e outras que você ainda não conhecia. A diretiva ng-controller sinaliza para o Angular que a partir daquela tag o conteúdo está vinculado a controller específica.

Services – Como eu disse anteriormente services são “pedaços de código reutilizáveis” dentro da sua aplicação.

Vamos fazer algumas adaptações na tag scripts no exemplo anterior para usarmos services:

Teste este exemplo no Plunker.

Injeção de dependências (DI – Dependency Injection)

Não sei se você percebeu mas para usar nosso service, foi necessário chamá-lo como parâmetro dentro do controller e obviamente adiciona-lo como source na nossa index.html. Isso acontece porque o Angular funciona com injeção de dependências, ou seja, se você quer usar um pedaço de código que não e em seu contexto atual (ex. Quero chamar um service na minha controller) você precisará injetar uma chamada para este código na função de seu contexto. Pareceu difícil né? Na verdade não é… eu só não consegui explicar isso de maneira mais simples..

Serviços do AngularJS (Built-in Services)
No mundo real nós sabemos que os problemas serão muito mais complexos que estes e você com certeza deve estar morrendo de vontade de chamar uma API dentro de um service e passar os resultados para dentro de uma controller pois isso é o que a maior parte das aplicações fazem.

Mas antes você deve saber que o Angular possui seus próprios services. Os mais comuns são $http, $location e $window:

$http – Realiza chamadas via protocolo http. Você verá bastante isso quando for se comunicar com uma API externa, seja para simplesmente pegar alguns valores ou separar as chamadas de um CRUD inteiro de uma entidade.

$location – Esta é responsável por alguns recursos de navegação é um service baseado no window.location do JS. No caso do Angular, window.location se tornaria $location.path().

$window – Responsável por recursos da janela ativa do navegador,o que em JS comum seria um alert(), aqui no Angular seria um $window.alert();

Mas vamos ao que interessa! No exemplo abaixo eu mostro como fazer uma chamada para a API externa Numbers. Esta API retorna curiosidades sobre os números. Basta informar o número e nosso Service enviará uma chamada Http.Get para a API e a mesma retornará um JSON com a resposta:

Teste este exemplo no Plunker.

Nota: O Plunker exige chamadas https e a Numbers API só suporta chamadas http. Para testar esse código copie e cole do Plunker para seu editor favorito, salve e teste em seu navegador.

Mostrarei depois: Se você já tem conhecimento prévio de AngularJS você deve estar se perguntando porque eu não falei das diferenças entre Service e Factory e porque eu não comentei sobre os objetos do tipo $promise e da importância do .then() quando trabalhamos com chamadas HTTP. A resposta para sua pergunta é: Aguarde e confie! Este assuntos serão abordados em posts mais densos, este post já ficou longo demais e meu objetivo é só te mostrar como as coisas se encaixam antes de começarmos a escrever posts baseados em exemplos práticos (do mundo real).

Por enquanto, é só tudo isso! 😉

Anúncios

AngularJS 1 – 1 Configurando seu ambiente Windows

Olá pessoas,

Pretendo escrever uma série de posts ajudando quem quer começar a desenvolver aplicações web utilizando AngularJS, o famoso framework do Google, de maneira prática, rápida e o mais próxima possível do que uso no meu dia-a-dia.

Acompanhe abaixo os links da série:

Série AngularJS1

  1. Configurando seu ambiente Windows
  2. Conceitos Básicos

Tenho percebido que alguns colegas sofrem ao instalar seu ambiente dev para trabalhar com aplicações usando NPM, Bower, e nosso geradores do Yeoman no Windows.

Pequeno Glossário antes de começar:

Grunt e Gulp: Grunt e Gulp são automatizadores de tarefas. A grosso modo, eles são os responsáveis por minificar todos seus arquivos e deixar tudo pronto numa linda pasta “dist”, da onde você irá simplesmente publicar seus arquivos em seu servidor de hospedagem.

NPM: NPM (Node Pakage Manager) é um repositório (gerenciador de pacotes) de instalações do Node.js. Para quem ja teve experiência com OSX e Linux, é como se fosse um apt-get da vida…

BOWER
: Bower também é um repositório. Em geral usamos os dois, mas você pode usar só o Node ou somente o Bower, de qualquer forma, quando você inicializar seu projeto com o gerador Angular do Yeoman ele irá criar as pastas bower_components e node_modules.

SASS
 e Compass: SASS é o que eu considero assim uma evolução natural do CSS. Imagine você poder variáveis dentro de seu css, ao passo que “background-color:#ccc;” se torne uma váriavel chamada: “.aquele-bg-cinza”. Existe toda uma possibilidade de você “componentizar”elementos do seu CSS.

Yeoman: Nosso querido Yeoman é uma ferramenta capaz de acelerar a criação de projetos “do zero”, por meio de “generators”. Imagine que chato ter que iniciar toda vez um projeto criando todas as pastas, configurar dependências de seus módulos NPM e componentes do Bower, enfim um super trabalho duro. E graças ao Yeoman, desnecessário.

Agora que você já sabe do que estamos falando, vamos começar a fazer as coisas funcionar. Hoje me dia você não precisa mais se revirar e se debater tantando configurar variáveis de ambiente no windows:

1 Instale o Git for Windows

Basta acessar o este link, baixar e instalar o cliente do Github para Windows.

2 Instale o Node.js

Basta acessar este link e escolher uma versão estável do Node.js para Windows. Repare que o próprio instalador já configura as variáveis de ambiente para você.

3 Instale o Ruby Installer

Sim, você vai precisar do Ruby for windows para poder instalar o Compass via gem (repositório de instalações do Ruby, semelhante ao NPM para JavaScript ou o PIMP para Python)

Basta acessar este link e baixar o instalador do Ruby para Windows.

4 Reinicie seu PC

É extremamente recomendado que você reinicie seu PC neste ponto para conseguir executar os comandos do Ruby e do Node.

5 Verifique se o Node e o Ruby foram instalados

Se tudo deu certo até aqui, os comandos abaixo devem retornar a versão atual do Node e do Ruby instados:

git --version
npm - v
ruby -v

Seu resultado deve ser algo parecido com isto:

versions

5 Instalando Compass

Agora vamos instalar o Compass usando gem (nosso npm do ruby).

Antes de mais nada, vamos adicionar o caminho pelo qual será pesquisada nossa gem.

gem sources --add http://rubygems.org/

E em seguida, confirme com [Y] e execute:

gem install compass

OK. Git, Node, Ruby e Compass instalados com sucesso até aqui.

6 Instalando Yeoman

Agora a coisa ficou bem fácil, basta instalar globalmente o Yeoman:

npm install -g yo

E só pra garantir, nós vamos usar o yo doctor para verificar se tudo está instalado como deveria.

yo doctor

E no final ele deve retornar: “Everything looks all right!“.

7 Instalando generator Angular

Angular é um dos generators mais populares no yo, foi desenvolvido pelos próprios yeoman team. Você encontrar generators para outros tipos de app no próprio site do yo, neste link. E você também pode visitar o git do generator Angular neste link.

Para instalar esse generator utilize o seguinte comando:

npm install -g grunt-cli bower yo generator-karma generator-angular

Esse comando bacana faz um monte de coisas na sequencia ele instala globalmente o grunt, o bower, o karma (havia me esquecido de mencionar este. Karma é uma ferramenta de testes para seu código JS) e o generator angular.

Após todo esse trabalhinho (nem foi tão difícil assim…) você pode navegar até a pasta aonde seu projeto será criado e inciá-lo com o seguinte comando:

yo angular [nome-do-seu-app]

Então o Yeoman aparecerá e te fará umas perguntas sinistras, de primeiro momento responda não para o uso do Gulp (experimental) e responda sim para o uso de Sass, compass, e a versão sass do Bootstrap.

yo

Feito isso veja que os arquivos de seu projeto já foram criados e você poderá testar seu projeto com o seguinte comando:

grunt serve

Caso você encontre erros você ainda pode forçar a execução do projeto com:

grunt serve --force

E quando quiser publicar seu projeto basta utilizar o comando:

grunt

Você verá que foi criada uma pasta “dist” na raiz de seu projeto. É lá que você encontrará todos os arquivos minificados para publicação em seu servidor de hospedagem seja ela qual for.

Por hoje é só.

Sim isso será uma série sobre Angular1 e sim, eu já estou estudando Angular2 e pretendo em breve começar a compartilhar mais sobre… Sim também falarei sobre Ionic Framework. 😉

Este post é dedicado aos amigos Gabriel Gois e Apolo Roberto e acredito que escrevendo e guardando isso em algum lugar me ajudarei e os ajudarei.

Desenvolvendo ASP.Net MVC diretamente no Mac.. Pode? Pode!

Hoje acordei pensando em colocar em prática a missão de desenvolver uma aplicação web utilizando somente o Visual Studio  Code diretamente no Mac OSX sem abrir minha VM de windows e recorrer ao Visual Studio de maneira convencional.

Isso porque após ter focado no desenvolvimento frontend e ter mergulhado no mundo do node.js e do AngularJS eu realmente sonhei com o dias aonde eu poderia construir uma WebAPI com a mesma facilidade que se constrói uma app web com Yeolman.

DNU, DNX, DNVM e nada mais disso é verdade graças ao .NET CLI

Fato, eu não inventei nada. Quem alimentou essa esperança em mim foi o @vquaiato, nesse postnesse, e nesse, onde ele explicou o que era o DNU, DNX e o DNVM. Caso você queira entender melhor esses carinhas, acesse os posts e leia com mais calma. Basicamente o DNX era o ambiente de execução do SDK, DNU era o gerenciador de pacotes e o DNVM era o gerenciador de runtimes do dotNet.

Complicado né? Mas relaxa porque o @giovannibassi mostrou nesse post, depois de um bom tempo que agora tudo ficou mais fácil você só precisa do .NET CLI.

“Less talk, more code!”

Configurando seu ambiente de desenvolvimento

Agora que já expliquei o que eu queria, porque e quem me ajudou, vamos compartilhar logo a maneira de fazer esse negócio funcionar:

1. Instale o homebrew no seu Mac com o seguinte comando (Caso tenha problemas, acesse o site oficial do homebrew):

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Homebrew

2. Execute os seguintes comandos em seu terminal:

˜$ brew update
˜$ brew install openssl
˜$ brew link --force openssl

3. Instale o .NET Core a partir deste link

.NET Core

4. Instale o Node.js caso já não tenha instalado.

Node.js

5. Assim que terminar de instalar o Node.js instale o generator Yeoman para dotnet via NPM. Volte ao terminal e execute o comando:

npm install -g generator-aspnet

Importante: O próprio npm e a comunidade do Node.js não indica utilizar sudo antes dos comandos, entretanto para fins de teste você pode se livrar de problemas de acesso diretórios facilmente utilizando sudo + comando do npm. Agora se você quer realmente aprender a resolver este problema de permissão ao instalar pacotes via npm, acesse este link.

Iniciando e executando um novo projeto

1. Abra o terminal, acesse sua pasta de projetos utilize os comandos:

mkdir aspnet-mvc
cd aspnet-mvc
yo aspnet

Yo

project

2. Uma série de coisas irão acontecer no seu terminal, fique atento para possíveis erros durante este processo. Neste momento o Yeoman generator vai acessar diversos repositórios e preparar todos os arquivos de seu projeto. Para executar sua aplicação, você deverá utilizar os comandos (na minha opinião, bem auto explicativos):

dotnet restore
dotnet build
dotnet run

webpage

Hey! Você cansou de ver essa linda página em seus projetos, certo? Ótimo! As coisas estão funcionando como deveriam; mas para nos certificar, vamos alterar alguma coisa nesse projeto.

3. Abra seu Visual Studio Code (caso não tenha instalado, clique aqui) e acesse a pasta de seu projeto (command + O). Você também precisará da extensão do C# para o Visual Studio Code. Caso o mesmo não sugira o download acesse este link.

4. Agora vamos editar a action About dentro de HomeController.cs. Vamos inserir algo bem proximo do que antes você fazia com ViewBags:

ViewData["SomeData"] = "pseudo viewbag msg..";

controller

5. Agora vamos alterar a view About.cshtml a fim de refletir a alteração da action About:

<p>Test data from controller:
<strong>@ViewData["SomeData"]</strong></p>

view

6. Tudo extremamente simples, agora a parte triste: Infelizmente ainda precisamos recompilar o C#, então ainda não temos recursos bacanas como livre reload; mas você perceberá que ainda sim é muito mais rápido do que você estava acostumado no ASP.NET MVC dentro do Visual Studio. Volte a tela do terminal e utilize (control + c) para parar a instancia atual de seu site e execute novamente o comando:

dotnet run

resultado

7. Pronto.. Graças ao .Net Core, você conseguiu criar um projeto ASP.Net MVC sem auxilio do Visual Studio, utilizando somente o .NET CLI, Visual Studio Code e o Yeoman!

Referências

Building Projects with Yeoman
ASP.NET 5 – Primeiros passos (dnvm, dnu, dnx e yeoman)
Adeus DNX, bem vindo .NET CLI

Conclusão

Podemos perceber que a Microsoft está super alinhada com tecnologias extremamente ágeis que já fazem parte da vida de um montão de gente como: Node.js/NPM, Bower, generators do Yeoman etc.. isso é muito bom! Acredito que o .Net Core veio para integrar e enxugar uma série de soluções que já eram boas e tem tudo para ficar ainda melhores!

Legal né?! 😉