Angular JS, diferencial.

Front-end

10/04/2016

Estou pesquisando sobre frameworks Javascript e me deparei com o Angular JS, pela leitura superficial me parece avançado no nivel de agregar ao sistemas/sites.
Qual o diferencial dele? É fácil de aprender?
Fabricio Alves

Fabricio Alves

Curtidas 2

Respostas

Marcelo Pastore

Marcelo Pastore

10/04/2016

Nem lembro se já vi algum post sobre o framework, mas que está sendo cada vez mais pedido, isso está.
GOSTEI 0
Gabriela Monte

Gabriela Monte

10/04/2016

Acompanhando!
GOSTEI 0
Fabricio Alves

Fabricio Alves

10/04/2016

Nem lembro se já vi algum post sobre o framework, mas que está sendo cada vez mais pedido, isso está.


Já pesquisei e não achei.
GOSTEI 0
Marcelo Pastore

Marcelo Pastore

10/04/2016

Nem lembro se tinha alguem do forum que usava, aguardar.
GOSTEI 0
Jothaz

Jothaz

10/04/2016

Para uns AngularJS é apena uma moda, mas acredito que é um ótima ferramenta se bem utilizada.

Tenho usado AngularJS e ajuda muito principalmente se seu projeto utiliza MVC, facilitando o binding entre Model e View.

Achei bem fácil, mas já tenho um certo conhecimento em JavaScritp e MVC. Para os iniciantes pode ser um pouco mais complicado, mas com esfoço e dedicação consegue-se aprender.

Tenho visto muitas vagas pedindo AngularJS, então certamente é um diferencial.

Veja um exemplo funcional:
GOSTEI 0
Gabriela Monte

Gabriela Monte

10/04/2016

Está sendo bastante solicitado.

Tenho visto muitas vagas pedindo AngularJS, então certamente é um diferencial.
GOSTEI 0
Fabricio Alves

Fabricio Alves

10/04/2016

Ajuda então ter uma base de MVC e JavaScript(Isso já espera por motivos obvios). hehehe. Sobre vagas, estão quase sempre exigindo mais de um framework.

Estas pastas fazem parte do Angular?

[img]http://arquivo.devmedia.com.br/forum/imagem/379120-20160412-122931.jpg[/img]
GOSTEI 0
Jothaz

Jothaz

10/04/2016

No caso o AngularJS é como o Bootstrap basta referencá-lo:

[img]http://arquivo.devmedia.com.br/forum/imagem/418027-20160412-124535.png[/img]


E claro o arquivo do angular deve esta na pasta referenciada:

[img]http://arquivo.devmedia.com.br/forum/imagem/418027-20160412-124648.png[/img]

Depois ligar sua página ao escopo do Angular:

[img]http://arquivo.devmedia.com.br/forum/imagem/418027-20160412-125347.png[/img]

Toda a minipulação é feita pelo javascritp que esta em:

[img]http://arquivo.devmedia.com.br/forum/imagem/418027-20160412-125458.png[/img]

Que esta em:

[img]http://arquivo.devmedia.com.br/forum/imagem/418027-20160412-125603.png[/img]


Este exemplo peguei na internet fiz algumas melhorias, eu gosto de tudo separado, mas você pode colocar tudo na mesmas e na mesma página para começar a aprender.

O que eque foi descrito acima é somente uma visão extremamente simplificada e não tem pretensão de ensinar nada é só para lhe dar uma visão da estrutura deste exemplo.

Como eu disse para quem já tem experiência em bem simples, mas para iniciantes pode assustar, mas procure por tutoriais e exemplos que vai achar.

Existe o concorrente do Angular que é o knockoutjs

[url:descricao=Se quer mesmo se dedicar a aprender aconselho um lida na documentação oficial que é muito boa: ]https://docs.angularjs.org/guide[/url]
GOSTEI 0
Fabricio Alves

Fabricio Alves

10/04/2016

Gostei do exemplo, essa funcionalidade add veio somente do Angular e que vem do arquivo angular 1.0.1.
Essas pastas com os arquivos, foi implementação sua?
GOSTEI 0
Gabriela Monte

Gabriela Monte

10/04/2016

Não sei se usa muitos frameworks Jothaz, mas se puder responder pela sua experiencia, JQuery ou Angular?
GOSTEI 0
Jothaz

Jothaz

10/04/2016

Como já tinha dito este exemplo foi um dos primeiros que baixei para estudar. E posteriormente modifiquei,por exemplo para não permitir cadastrar itens em duplicidade.

A forma como você arquiteta sua aplicação é pessoal, como gosto de separar os objetos usei a estrutura do exemplo que baixei, mas vc pode usar a que quiser.

Vou tentar aclarar as coisas, mas comece a estudar para se inteirar de como as coisas funciona, senão vais ficar perdido.
Ressalto você deve conhecer bem de JavaScritp e MVC, do contrário tera algumas dificuldades.

Na imagem abaixo tudo que esta em vermelho pertence ao Angular, para fazer o link em o AnglularJS e sua página:

[img]http://arquivo.devmedia.com.br/forum/imagem/418027-20160412-141321.png[/img]

O que esta no aarquivo "lista-compras.js" na para \app, foi desenvolvido e não é nada mais que usar as extensões que o Angular disponibiliza ao JavaScritp. Então é basicamente JavaScritp. Não é nada mais que um Cotroller para manipular os dados da View.


//Aqui defino o controller ligando ao escope 'app' que foi o neme que dei no html 	<body ng-app="app" >
//Assim fica tudo no mesm escopo
angular.module('app',[]).controller('ListaComprasController', function($scope) {	

	//Aqui é criado um JSON que simular uma base de dados, se usar algum back-end
	//é só usar sua Model.
    $scope.itens = [
        {produto: 'Leite', quantidade: 2, comprado: false},
        {produto: 'Cerveja', quantidade: 12, comprado: false}
    ];

	//Esta funcção adiconat o item, mas verificar se ja existe para evitar duplicidade
    $scope.adicionaItem = function () {
       //Verifica se o produto ja existe
        if ( $scope.verificaProdutoExistente($scope.item.produto) === -1 ){
			$scope.itens.push({produto: $scope.item.produto,
							   quantidade: $scope.item.quantidade,
							   comprado: false});
			$scope.item.produto = $scope.item.quantidade = '';
	   } else {
            //Logica caso o produdo ja exista na lista
            alert("Produto ja existe.")
        }
    };
	
   //Verifica se produto existe usada em conjunto com 	adicionaItem
   $scope.verificaProdutoExistente = function(value) {
        for(var i = 0; i < $scope.itens.length; i++) {
            if($scope.itens[i].hasOwnProperty("produto") && $scope.itens[i]["produto"] === value) {
                return i;
            }
        }
        return -1;
    }	
});
GOSTEI 0
Gabriela Monte

Gabriela Monte

10/04/2016

Não sei se usa muitos frameworks Jothaz, mas se puder responder pela sua experiencia, JQuery ou Angular?


Oi Jothaz, acho que esqueceu de responder! :-)
GOSTEI 0
Fabricio Alves

Fabricio Alves

10/04/2016

Melhor explicação não poderia ter, está ótimo Jothaz, entendi tudo!!!
GOSTEI 0
David Sylvestre

David Sylvestre

10/04/2016

Fabricio, tem esse tutorial[1] do Rodrigo Branas, ele é bem bacana para quem está começando com angularjs

[1]https://www.youtube.com/watch?v=_y7rKxqPoyg
GOSTEI 0
Fabricio Alves

Fabricio Alves

10/04/2016

Muito obrigado David.
GOSTEI 0
Jothaz

Jothaz

10/04/2016

Não sei se usa muitos frameworks Jothaz, mas se puder responder pela sua experiencia, JQuery ou Angular?


Não esqueci é falta de tempo mesmo.

Na verdade você pode usar os dois!

Vou tenter explicar as diferenças de forma sucinta, mas é assunto muita discussão.

O jQuey é uma biblioteca (ou framework) que tem como principla objetivo simplificar a sintaxe do JavaScritp oferendo um forma eficiente de manipular o DOM.

Exemplificando: 

			<input id="meu_imput"  name="meu_imput" type="text" />
			
			//Para manipular este controle ficaria assim: 
			
			//No Javascritp 
			document.getElementById('meu_imput').value = 666;
			
			//No jQuery
			$('#meu_imput').val(666);



As principais características do jQuery seriam:

--Torna a aplicação cross-browser, assim diminui ou resolve definitivamente a incompatibilidade entre os navegadores;
--Usar AJAX de forma simples, fácil e intuitiva;
--Integração robusta com os recursos do CSS;
--Reutilização do código, por exemplo através de plugins criados por outros desenvolvedores;
--Efeitos e animações;
--HTML manipulação/DOM e etc.


O AngularJS é um framework, focado no trabalho com dados,voltado na interação usuário/aplicativo. Quando você executa o AngularJS ele faz a mágica de unira DOM e JavaScript transformando em um aplicativo Angular, realizando a vinculação entre Controller, Model e View (padrão MVC).

As principais características são:

--Data Binding de mão dupla, liga View - Model;
--Validação de Form Client-side
--TDD;
--Ponto para trabalhar com API's REST;
--MVV como Padrão de desenvolvimento e etc.

O assunto é vasto e complexo e talvez as explicações acima mais confundam que esclareçam. mas tentei simplificar ao máximo.

Com David A. Sylvestre disse procurem no Google que vão achar muito material.

E se preparem, pois é muita informação para absorver.

Eu particularmente uso e tenho gostado, mas já muitas criticas então cabe a cada um decidir se vale ou não a pena.
GOSTEI 0
Gabriela Monte

Gabriela Monte

10/04/2016

Agora estou vendo que um não tem nada haver com o outro, as finalidades, os dois podem se complementar! Desculpa Jothaz pela insistência, mas agradeço por demais a ajuda.
GOSTEI 0
Fabricio Alves

Fabricio Alves

10/04/2016

Tambem estava perdido nesses definições dos frameworks.
GOSTEI 0
Maria Dantas

Maria Dantas

10/04/2016

Oi Jothaz boa tarde, não posso deixar de comentar sua resposta explicativa sobre os dois frameworks, citando as diferenças, muito boa, entendi bem, mas queria apenas tirar uma duvida, creio que seja simples demais, o Angular é mais utilizado em projetos que envolvem uma logica alem de um simples site, é isso? Usar: Java, PHP...etc.
GOSTEI 0
Maria Tavares

Maria Tavares

10/04/2016

Oi Jothaz boa tarde, não posso deixar de comentar sua resposta explicativa sobre os dois frameworks, citando as diferenças, muito boa, entendi bem, mas queria apenas tirar uma duvida, creio que seja simples demais, o Angular é mais utilizado em projetos que envolvem uma logica alem de um simples site, é isso? Usar: Java, PHP...etc.


Bom, eu acho que cabe mais nesses tipos de sites, mas pela organização usaria em um site comum.
GOSTEI 0
Maria Dantas

Maria Dantas

10/04/2016

Se os impactos forem positivos vale a pena usar, mas vou aguardar mais opiniões, obrigada Maria Tavares.
GOSTEI 0
Maria Tavares

Maria Tavares

10/04/2016

Devem ser, mas de qualquer forma é bom aguardar mais informações.
GOSTEI 0
Jothaz

Jothaz

10/04/2016

Antes de mais nada vou dar os devidos créditos pelo projeto que estou compartilhando. Depois de procuar achei o link original que é [url:descricao=Criando uma aplicação simples com AngularJS ]http://tableless.com.br/criando-uma-aplicacao-simples-com-angularjs/[/url].

Maria Dantas.

O exemplo que postei foi o primeiro que estudei. Ele é bem simples, mas mesmo sendo simples mostra como o AngularJS é poderoso e robusto.

Agora você pode usar o AngularJS em conjunto com qualquer tecnologia que você desejar: Java, .Net, Ruby, PHP e etc. Claro que para usar o AngularJS em sua totalidade o ideal é utilizar MVC, pois assim o binding (view->model/model->view) é utilizado a sua plenitude o que facilita sua vida e economiza muitas linhas de códigos. A grosso modo quando você altera um valor no view (página de edição) este valor é alterado imediatamente na model (sues dados), assim tudo fica ligado sem a necessidade de um inferência do desenvolvedor.

Por saber que o fórum é frequentado por iniciantes nem me estendi sobre as funcionalidades do AngularJS, para evitar um post gigante e com um grande quantidade de informações. Mas o angular permite ainda: filtros, ordenações, injeção de dependencias, Localization Ready, Comunicação com o servidor, Template engine integrada, Diretivas, Service (lógica de negócio reutilizável independentes de views) e etc.

Então você pode utilizá-lo para projetos profissionais independentize do tamanho. E justamente neste cenário é que o AngularJS mostra os seus beneficios.

Espero que tenha respondido sua dúvida.
GOSTEI 0
Maria Dantas

Maria Dantas

10/04/2016

Extremamente grata!
Espero que tenha respondido sua dúvida.
GOSTEI 0
POSTAR