O qual queremos fazer é monitorar o componente por duas maneiras: A primeira é oferecendo um tempo elevado de modo a de que este usuário conclua a digitaçãeste da palavra que está buscando através do mé especialmentetodo debounceTime e a segunda é utilizando este mé especialmentetodo distinctUntilChanged de que irá comparar a palavra (ou a sequência por caracteres) digitada utilizando a última que foi procurada, evitando que uma nova requisiçãeste mesmo que emitida para 1 resultado que já se encontra na tela.
Perceba também igualmente similarmente identicamente conjuntamente que, por padrão, o Ionic utiliza Sass para a escrita por CSS e TypeScript para as classes, ao invfois por JavaScript puro. Fique à vontade para vasculhar as pastas do projeto e entender tais como as informações sãeste organizadas, uma vez de que o presente tutorial não tem este propósito por explorar isso usando Pormenores.
Vamos ver isso acontecendo em tempo real. Abra o arquivo home.html e remova este Lei desnecessário até de que ele esteja Assim sendo:
Ele representa este valor qual será exibido em cada cfoilula da lista, qual, neste caso, representa este tÃtulo do feed. Esta sintaxe entre chaves duplas é chamada por Interpolação.
Embora nossa aplicaçãeste consiga requisitar dados externos utilizando sucesso, não há nada que informe ao usuário Derivado do este status dessa ação.
Isso significa que, independente do device do usuário, ele manter-seá executando este app no Crosswalk. O ganho por performance é visÃvel porém ele É possibilitado a aumentar o tamanho final da sua própria aplicação. De modo a instalar, digite: ionic plugin add cordova-plugin-crosswalk-webview
Da mesma forma que adicionamos uma funcionalidade de modo a carregar posts Ainda mais antigos em algum momento que chegarmos ao fim da nossa lista, precisamos por sua vez viabilizar uma maneira do atualiza-la usando os posts Ainda mais recentes. Uma Perfeito maneira por criar isso é contendo este componente Refresher na minha e sua aplicaçãeste.
Pelo nosso caso, o decorador está dizendo de que as modificações pelo html Seroada feitas somente pelo componente page-home e que nosso arquivo, ou mesmo que, este template html de que iremos usar, se chama home.html, Aprecie:
Doravante estamos utilizando um novo template por lista, de que comporta imagens. O Ionic já faz o serviçeste do ajustar os produtos pra você contanto de que indiquemos isso através dos atributos e classes de que o framework nos oferece.
Agora qual a minha e sua lista possui potencial de modo a aumentar cada vez mais do tamanho, seria interessante termos uma opção por filtrar posts pertencentes à determinadas classes. Podemos executar isso facilmente com uma Action Sheet.
Este app será cem% funcional e poderá ser instalado pelo seu smartphone e, quem sabe, até exatamente evoluir usando a inclusãeste de novas funcionalidades.
Nenhumas mais delongas, vamos começar inserindo este markup do componente antes da tag pelo arquivo home.html:
Em seguida, pegamos este array blog aqui resultante da requisiçãeste e adicionamos no fim do array original atravfois do mfoitodo concat do JavaScript. Note similarmente identicamente conjuntamente qual utilizamos este mfoitodo complete do componente, indicando de que o mesmo deve ser removido da view.
Note de que o atributo src da tag de imagem está envolto por colchetes. Tal sintaxe se chama Property binding