Fórum Angular JS, diferencial. #550952

10/04/2016

0

Front-end

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

Responder

Posts

10/04/2016

Marcelo Pastore

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

Gostei + 0

10/04/2016

Gabriela Monte

Acompanhando!
Responder

Gostei + 0

11/04/2016

Fabricio Alves

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.
Responder

Gostei + 0

11/04/2016

Marcelo Pastore

Nem lembro se tinha alguem do forum que usava, aguardar.
Responder

Gostei + 0

12/04/2016

Jothaz

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:
Responder

Gostei + 0

12/04/2016

Gabriela Monte

Está sendo bastante solicitado.

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

Gostei + 0

12/04/2016

Fabricio Alves

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]
Responder

Gostei + 0

12/04/2016

Jothaz

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]
Responder

Gostei + 0

12/04/2016

Fabricio Alves

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?
Responder

Gostei + 0

12/04/2016

Gabriela Monte

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

Gostei + 0

12/04/2016

Jothaz

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;
    }	
});
Responder

Gostei + 0

12/04/2016

Gabriela Monte

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! :-)
Responder

Gostei + 0

12/04/2016

Fabricio Alves

Melhor explicação não poderia ter, está ótimo Jothaz, entendi tudo!!!
Responder

Gostei + 0

12/04/2016

David Sylvestre

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
Responder

Gostei + 0

12/04/2016

Fabricio Alves

Muito obrigado David.
Responder

Gostei + 0

Mais tópicos

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar