javascript – Página: 4 – Blog do Camilo

Série AngularJS Usando Locale no AngularJS

Olá Pessoal,

No post de hoje vamos ver como dar suporte à formatação suportando o locale de um país. É muito simples fazer isso como AngularJS .

Lets go…

Starting…

No GitHub do AngularJS temos vários locale já disponíveis . Então vamos dizer que precisamos formatar um valor para suportar a nossa moeda. Por default o angularJS suporte o locale en_US. Para outras formatações é preciso adicionarmos .js especifico para o país. Baixe o .js https://github.com/angular/angular.js/tree/master/src/ngLocale referente ao país que deseja. Nesse caso vou usar o pt_br.js (angular-locale_pt-br.js). Baixe o arquivo no github do angular. Uma forma simples é copiar o código e criar um arquivo .js .

Desenvolvimento

Considerando que você já fez um Hello World com AngularJS e brincou com os outros posts aqui no blog, vou ignorar toda parte de setup básico do angular.

Step 1

Adicione o arquivo angular-locale_pt-br.js no seu arquivo index.html. Assim:

<head>

<meta charset=“UTF-8”>

<title>Insert title here</title>

<script src=“js/lib/angular.js”></script>

<script src=“js/app.js”></script>

<script src=“js/angular-locale_pt-br.js”></script>

</head>

<body>

<div ng-view>

</div>

</body>

Step 2

Crie um arquivo locale.html

<body>

<input type=“text” ng-model=“valor”/> <p/>

Default currency {{valor | currency : “$”}} <p/>

Real {{ valor | currency}}

</body>

Nada demais aqui, estamos apenas usando o recurso de filter sobre qual currency usar. Se não informamos nenhum, será usado a default do angularjs, mas se encontrar algum locale e for compatível com a do browser, será usado. Por exemplo, se tenho o browser em português e o js para o locale pt-Br, o default será no idioma português do Brasil.

Step 3

Usando rotas, vamos adicionar uma para locale. No meu arquivo app.js está assim:

var app = angular.module(“myapp”,[]);

//creating route

app.config(function($routeProvider,$httpProvider,$locationProvider){

       $routeProvider.

       when(“/”,{templateUrl:”home.html”}).

when(“/locale”,{templateUrl:”locale.html”})



});

Step 4

Vamos agora testar a aplicação.

Simples, não?

Vou ficando por aqui. Espero que tenham gostado dessa dica.

Abraços, see ya!!!

Série AngularJS: Aprendendo usar Deep Linking ou Rotas

Olá Pessoal,

No post de hoje vamos conhecer o recurso de deep linking do Angular, conhecido também como Rotas.

Lets go…

Deep Linking ou Rotas

É uma funcionalidade que temos no Angular e é muito útil durante o dia a dia. Na prática funciona assim:

O que acontece quando chamar /create? Quero que carregue o arquivo createform.html e o controller createController.js . Pronto, é isso que fazemos com as Rotas. E qual a vantagem disso?

Fácil Manutenção;
Tudo em uma página.

Na Prática

Vamos ver metendo mão na massa o que é melhor. Vou usar um projeto que está no meu GitHub chamado de recipeangularjsexample. Não há nada de Java nesse projeto. Considerando que você já sabe como configurar um projeto com AngularJS, então vou pular a parte de setup. Caso tenha dúvida, veja os posts iniciais da série.

Criando arquivo app.js

No arquivo app.js que deixei na raiz do projeto deixe assim:

var app = angular.module(“myapp”,[]);

//creating route

app.config(function($routeProvider,$httpProvider,$locationProvider){

       $routeProvider.

       when(“/”,{templateUrl:”home.html”}).

       when(“/upper”,{templateUrl:”upperfilter.html”}).

       when(“/serviceioc”,{templateUrl:”serviceioc.html”}).

       when(“/watch”,{templateUrl:”watch.html”,controller:recipeController});

});

É muito simples a leitura:

“quando chamar upper, carregue o conteúdo do arquivo upperfilter.html. Mas quando chamar watch, carregue o conteúdo watch.html e o controller recipeController”

Note: No exemplo acima não necessariamente os arquivos de outras rotas precise existir, meu objetivo foi mostrar como funciona e para que você entenda melhor o conceito é bem simples.

Observe que não somos obrigados a ter o controller para cada link e o que informamos é o nome do controller e não o nome do arquivo .js. Quem está começando pode se confundir e querer informar o nome do arquivo js. Ao fazer isso e chamar alguma função teremos erro no console Java script.

Crie os arquivos HTML acima e por enquanto deixe-os vazios.

Criando o recipeController.js

Crie o arquivo conforme a imagem a seguir:

Criando o arquivo index.html

O arquivo index.html é que vai carregar os arquivos javascript, portanto deixe assim:

<html ng-app=“myapp”>

<head>

<meta charset=“UTF-8”>

<title>Insert title here</title>

<script src=“js/lib/angular.js”></script>

<script src=“js/app.js”></script>

<script src=“js/recipeController.js”></script>

</head>

<body>

<div ng-view>

</div>

</body>

</html>

Não se esqueça do ng-app e ng-view. O ng-view é onde o conteúdo das páginas serão renderizados. Por isso que falei no inicio do post: uma única página para renderizar o conteúdo. É como um include.

Altere o conteúdo da página watch.html e acesse no browser:

http://localhost:8080/receipeangularexample/#/watch

Veja que vai aparecer o conteúdo que temos dentro de watch.html.

Se você tentar http://localhost:8080/receipeangularexample/watch vai receber 404? Por quê? Porque para ser um deep linking precisamos colocar # para que o response seja interceptado e tratado como rota e não um serviço da aplicação.

No meu Github há um repositorio com alguns exemplos usando AngularJS

Por hoje é isso. Simples, não?

Abraços, see ya!!

Série AngularJS: Hello World in few minutes

Olá Pessoal,

O post de hoje é para quem está querendo começar a brincar com AngularJS e aqui vai um simples “Hello World” e vou deixar que o próprio exemplo prático fale pelo framework.

Lets go…

Na prática

Crie um simple project webapp pelo maven ou dynamic web Project (não é requerido, mas considerando que você seja um desenvolvedor Java);
Em webapps crie um arquivo hello.html.

Escreva o seguinte código:

<!doctype html>

<!– estamos dizendo ‘quero usar angularjs’ –>

<html ng-app>

<head>

<!– definido a versão do angular que queremos –>

<script

        src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js”></script>

        <!– aqui criamos um js que terá as function –>

<script src=“todo.js”>

</script>

<title>Insert title here</title>

</head>

<body>

<!– chamamos a funcao que está no .js –>

        <div ng-controller=“hello”>

        <!– chamamos a variavel que declaramos no .js –>

                Hello {{name}}

                <hr />

                <label>Name</label>

<input ng-model=“typeName” placeHolder=“type your name please” /> <br />

                        Hi {{typeName}}, <br />

                        <br/>

                <br/>

                <label>Quantity of product</label>

                <input type=“number”   ng-model=“qt” required=“required” />

                        <label>Inform Price</label>

                        <input type=“number” ng-model=“price” required=“required” />

                        Total {{qt *price | currency}}

        </div>

</body>

</html>

Vamos entender um pouco melhor, apesar dos comentários. Quando fizermos ng-model estamos declarando uma variável, e quando dizemos {{ expresion }} estamos imprimindo o valor da variável. Se você já usou expression languague com JSF, por exemplo, é o mesmo conceito, porém com sintaxe diferente. Mas observe que quando fizemos Hello {{ name }} ele busca a variável que está na function hello() que criamos no .js. Veja:

function hello($scope){

$scope.name=”world AngularJS \O/”;

}

O .js você pode colocar na raiz de webapps, ou dentro de um subdiretório, desde que você informe no arquivo .html onde está o seu .js.

O resultado será algo assim:

Simples? Show, né?

Esse é o AngularJS. Esse post foi apenas uma pequena introdução prática sem entrar nos detalhes do framework. Para quem quiser estudar e se aprofundar basta passar no http://angularjs.org/ e se divertir.

No meu Github há exemplos de projetos que tenho feito com angularJS: https://github.com/camilolopes

Abraços.