Onde encontro ajuda com Angular?

Front-end
#1

Estou com várias dificuldade com implementações do Angular 4, e com isso tenho pedido ajuda a alguns fóruns como GUJ, StackOverFlow em Português e grupos de facebook, mas ainda não está sendo o suficiente, alguém conhece um fórum de Angular para eu solicitar ajuda?

Está um pouco complicado de pedir ajuda nos fóruns que citei porque eu acho que existem pouca gente que mexer com essa tecnologia, o problema não sou eu, tenho explicado de maneira que até o meu gata de estimação da minha casa entenderia o que estou precisando, mas ninguém se prontifica a ajudar, acredite! as solicitações de ajuda que tenho feito são coisas muito simples.

#2

Na verdade, não.
A questão é que, melhor que ficar aprendendo com perguntas em fóruns, você deveria aprender de verdade, fazendo um curso adequado.
A Loiane possui um curso muito bom, que, até onde vi, estava atualizado com angular 4. Procura no youtube “curso angular loiane”.

#3

Eu vi todos os curso dela, e nenhum dos vídeos que ela postou no youtube mostra o que realmente eu preciso porque o conteúdo é superficial, você conhece Angular?

#4

Então fala o que precisa. Ninguém pode adivinhar as tuas necessidades.
E, apenas para constar, existe uma série de coisas, em um curso, que não são mostradas. Boa parte depende do teu interesse, do teu desenvolvimento, da tua capacidade de ir além do básico e, então, realmente aprender.
Aliás, não só na questão do angular, mas, em tudo na vida. Quanto mais cedo aprender isso, mais sucesso terá.

#5

Tudo bem, gostaria de agradecer em tentar me ajudar, eu fiz essas tentativas:

Estou criando um formulário de cadastro de usuário que nele tem que colocar o estado de acordo com as cidades, porém ao selecionar o estado ele tem que carregar o segundo dropdown list com as cidades correspondente ao estado selecionado.

Eu acho que esse tipo de implementação a pessoa tem que ter conhecimento de como trabalhar com Vetores, eu até sei como trabalhar com vetores em Java, mas ai é com Angular né?

Eu procurei material que trabalhe com vetores com typescript, mas não encontrei.

Eu acredito que essa implementação não seja tão complicada, eu só estou tendo dificuldade mesmo por falta de experiência.

Eu fiz 5 postagens no StackOverFlow sobre esse assunto, eu até que tentei colocar aqui nessa postagem as URLs das postagens das minhas dúvidas, mas essa plataforma do GUJ está com problemas e impedi de colocar as URLs.

#6

Você já aprendeu a fazer isso em JavaScript? Ou já pulou pra usar ferramentas como Angular?

Em Javascript basta programar isso no evento onchange do dropdown de Estado.

Tendo essa base de aprendizado, vai saber melhor como procurar fazer usando ferramentas adicionais. Sua pesquisa ou pergunta seria em relação ao evento change, por isso você não encontra solução.

#7

Sei fazer isso tranquilamente com Javascript com Thymeleaf, tenho o código pronto de como fazer isso com Javascript, mas não saberia como colocar isso no arquivo HTML, eu acredito que seja bem diferente, que dizer… é bem diferente!

#8

Com Thymelead é assim:

Código Javascript

var Brewer = Brewer || {};

Brewer.ComboEstado = (function() {
	
	function ComboEstado() {
		this.combo = $('#estado');
		this.emitter = $({});
		this.on = this.emitter.on.bind(this.emitter);
	}
	
	ComboEstado.prototype.iniciar = function() {
		this.combo.on('change', onEstadoAlterado.bind(this));
	}
	
	function onEstadoAlterado() {
		this.emitter.trigger('alterado', this.combo.val());
	}
	
	return ComboEstado;
	
}());

Brewer.ComboCidade = (function() {
	
	function ComboCidade(comboEstado) {
		this.comboEstado = comboEstado;
		this.combo = $('#cidade');
		this.imgLoading = $('.js-img-loading');
	}
	
	ComboCidade.prototype.iniciar = function() {
		reset.call(this);
		this.comboEstado.on('alterado', onEstadoAlterado.bind(this));
	}
	
	function onEstadoAlterado(evento, codigoEstado) {
		if (codigoEstado) {
			var resposta = $.ajax({
				url: this.combo.data('url'),
				method: 'GET',
				contentType: 'application/json',
				data: { 'estado': codigoEstado }, 
				beforeSend: iniciarRequisicao.bind(this),
				complete: finalizarRequisicao.bind(this)
			});
			resposta.done(onBuscarCidadesFinalizado.bind(this));
		} else {
			reset.call(this);
		}
	}
	
	function onBuscarCidadesFinalizado(cidades) {
		var options = [];
		cidades.forEach(function(cidade) {
			options.push('<option value"' + cidade.codigo + '">' + cidade.nome + '</option>');
		});
		
		this.combo.html(options.join(''));
		this.combo.removeAttr('disabled');
	}
	
	function reset() {
		this.combo.html('<option value="">Selecione a cidade</option>');
		this.combo.val('');
		this.combo.attr('disabled', 'disabled');
	}
	
	function iniciarRequisicao() {
		reset.call(this);
		this.imgLoading.show();
	}
	
	function finalizarRequisicao() {
		this.imgLoading.hide();
	}
	
	return ComboCidade;
	
}());

$(function() {
	
	var comboEstado = new Brewer.ComboEstado();
	comboEstado.iniciar();
	
	var comboCidade = new Brewer.ComboCidade(comboEstado);
	comboCidade.iniciar();
	
});

E fica assim no HTML:

<div class="form-group  col-sm-4">
					<label for="estado">Estado</label>
					<select id="estado" class="form-control">
	                    <option value="">Selecione o estado</option>
	                    <option th:each="estado : ${estados}" th:value="${estado.codigo}" th:text="${estado.nome}">São Paulo</option>
	                </select>
				</div>
				
				<div class="form-group  col-sm-4">
					<label  for="cidade">Cidade</label>
					<div class="bw-field-action">
						<select id="cidade" class="form-control" data:url="@{/cidades}">
						</select>
						
						<div class="bw-field-action__icon  js-img-loading" style="display: none">
							<img th:src="@{/images/mini-loading.gif}"/>
						</div>
					</div>
				</div>
			</div>

Mas não sei como ficaria se fosse com Angular!

#9

Para Angular pesquise pelos mesmos caminhos como se fosse js puro, sem Thymelead.

Você parou em que parte? Já programou algo usando o evento “(change)” do angular? Já fez uma requisição http com ele? Vai por partes.

#10

Já ouvir falar, mas os materiais que tem na internet não explica bem como é o funcionamento do change, existem no youtube implementações com change, e funcionando, mas não dá para entender como ele funciona porque eles não explicam mesmo funcionando a aplicação explicada em vídeo.

#11

Evento change em Html/Js puro não tem mistério. Se em Angular é mais complicado, então fico sem entender por que usam.

HTML:

<select onchange="changeEstado(this)">
  <option value="RJ">Rio</option>
  <option value="SP">São Paulo</option>
</select>

JS:

function changeEstado(selectEstado) {
  var estado = selectEstado.options[selectEstado.selectedIndex].value;

  alert(estado);

  //faz a requisacao ajax e preenche cidades deste Estado
}

Se pelo menos corrigir seu critério de pesquisa vai achar por exemplo: http://embed.plnkr.co/cuMsdkK6SuTn41uQSeI6

E lembre-se que exemplos em Angular 2 podem servir para o 4.

Não sou da geração que aprende com vídeos. Prefiro tutoriais escritos, exemplos e livros. Tenta ir por essa linha também.

#12

Ok, qual a parte que você tem dúvidas? Como tratar um vetor no angular? Como trabalhar com ele (iterar)?

#13

precisaria somente de um exemplo prático!

#14

Exemplo prático de que?

#15

Calma, só estou respondendo essa pergunta

#16

Muito obrigado, isso aqui é muito importante.

#17

Olha não sei se vai ajudar muito, mas tem um canal no youtube onde uma programadora senhor com experiência de mais de 10 anos da aulas de Angular, eu ja vi as aulas de java dela e são perfeitas ela realmente sabe sobre o assunto e tem uma didática muito boa, não custa nada da uma olhada lá né, espero que ajude!
link aqui https://www.youtube.com/watch?v=tPOMG0D57S0&index=1&list=PLGxZ4Rq3BOBoSRcKWEdQACbUCNWLczg2G

#18

É o curso da Loiane, que eu citei acima.

#19

Ainda assim, exemplo prático de como requisitar dados ao backend? Como trabalhar com vetores? Como iterar?

#20

Eu sinto muito mas nos vídeo dela somente mostra coisas muito básicas.