Pular para o conteúdo principal

Postagens

Angular 4 & Bootstrap 4

E ai galera.  Neste post irei demonstrar como fazer a preparação inicial de uma aplicação que utilize Angular 4 e Bootstrap 4. Após você instalar o Angular-CLI  você pode iniciar sua aplicação angular digitando o comando no cmd: ng new minha-app cd minha-app Após navegar para a pasta de sua app você pode instalar o Bootstrap 4 e o ng-bootstrap . O ng-bootstrap é uma biblioteca que contem componentes bootstrap para angular, fazendo com que não seja necessário adicionar bootstrap.js em nossa aplicação. npm install --save @ng-bootstrap/ng-bootstrap bootstrap@4.0.0-beta Com todas instalações realizadas, você deve registrar o css do bootsrap no arquivo angular-cli.json na propriedade styles. "styles" : [ "../node_modules/bootstrap/dist/css/bootstrap.min.css" , "styles.css" ] No arquivo app.module.ts deve ser feito importação do módulo do ng-bootstrap o  NgbModule. E por fim você pode começar a utilizar os co...

Npm install: EPERM: operation not permitted

Ao tentar instalar algum pacote via npm utilizando windows você se depara com este erro: node_modules\Fsevents\ node_modules\aws4\package.json npm ERR! code EPERM npm ERR! errno -4048 npm ERR! syscall unlink npm ERR! Error: EPERM: operation not permitted Please try running this command again as root/Administrator. Muito provavelmente você pode estar utilizando versão de npm 5.4.0 ou 5.3.0. Para verificar digite no cmd npm -v Se for este seu caso, poderá corrigir fazendo downgrade de versão ou um upgrade do npm. Para downgrade uma versão que funciona bem seria 5.0.3: npm i -g npm@5.0.3 Para upgrade 5.4.2 atualmente está funcionando bem npm i -g npm ou npm i -g npm@5.4.2

VS Code: Bons plugins para Angular 4

Segue minha lista preferida de plugins para hora do desenvolvimento de aplicações angular: Angular v4 TypeScript Snippets Criado pelo evangelista Angular John Papa, este plugin ajuda muito no momento de escrever componentes, serviços ou até mesmo diretivas como ngFor e ngIf no template do angular. Se você gosta de fazer uso de snippets este é um ótimo plugin: https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2 AUTOIMPORT Após ter seu componente ou modulo typescript criado pode vir a ser necessário uso de outros recursos de módulos do angular ou de módulos já criados  por você através do import. A tarefa de escrever manualmente, verificar que o modulo não esta importado e adicionar a referencia no topo do typescript como endereço correto de importação se torna cansativa conforme a aplicação vai crescendo. Este plugin é uma mão na roda. https://marketplace.visualstudio.com/items?itemName=steoates.autoimport VS CODE ICONS VS CODE ICONS ajuda m...

DICA: Ordenar resultados coluna varchar em query SQL como inteiros

Olá Existem alguns casos em que nos deparamos com uma base de dados onde um dado apesar de numérico está armazenado em coluna do tipo string/varchar... e não podemos alterar o tipo da mesma. Ao longo do uso em consultas pode vir a necessidade de classificar e ordenar estes dados como números mas ao executar o comando order by o resultado não é satisfatório na maioria dos casos. A seguir deixo uma dica rápida de como implementar uma ordenação de valores a partir de uma coluna de modo que ela se comporte como ordenação de inteiro em SQL Server. order by CAST ( SUBSTRING (SuaColunaAqui+ '0' , PATINDEX( '%[0-9]%' , SuaColunaAqui + '0' ), LEN(SuaColunaAqui + '0' )) AS INT)

Incluindo jQuery em projeto Vue webpack

Olá Existem muitos plugins feitos em jQuery que ainda não tem uma versão em Vue JS. É claro você pode optar por criar o seu próprio, converter a estrututra de jQuery para Vue JS ou utilizar algo compatível feito por alguém da comunidade Vue. Mas em alguns casos não há tempo necessário para tomar alguma das decisões acima, pois o plugin é muito robusto ou coisa similar. Então partimos para a união dos dois :) Vue + jQuery Após criar seu projeto Vue JS você deve navegar até a pasta do projeto e instalar o jQuery como seguinte comando: npm install jquery --save Feito a etapa acima, você deve editar o arquivo main.js dentro da pasta src adicionado instruções de uso do jQuery. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 import Vue from 'vue' import App from './App' import router from './router' import jQuery from 'jquery' ; global.jQuery = jQuery; global.$ = jQuery; Vue.config.productionTip = false /* eslint-disable no-new...

Aumento performance consulta Entity Framework 6

Olá Segue uma dica para aumentar a velocidade de consulta com uso de Entity Framework. _context.Configuration.AutoDetectChangesEnabled = false ; _context.Configuration.EnsureTransactionsForFunctionsAndCommands = false ; _context.Configuration.LazyLoadingEnabled = false ; _context.Configuration.ProxyCreationEnabled = false ; _context.Configuration.UseDatabaseNullSemantics = false ; _context.Configuration.ValidateOnSaveEnabled = false ; No exemplo acima você teria a instancia de seu DbContext na variável _context e alteraria algumas propriedades antes de realizar a consulta para remover a execução de algumas tarefas que talvez no momento da consulta não são interessantes. Fica dica. Até a próxima.

Dica: Extensão Indentar código VUE Visual Studio Code

Olá Por muitas é necessário um atalho para formatar o seu código fonte no editor de texto. Para formatação de HTML, CSS, JS e afins no visual studio code você pode utilizar o: HTML Snippets Mas esta extensão acima não formata arquivos de template .vue . Para formatar este tipo de arquivos é necessário instalar alguma outra extensão. Entre as que busquei a que faz o serviço da melhor forma atualmente utilizando o atalho alt+shift+f   é o plugin ventur: Vetur Este plugin é muito bom mesmo. Facilitou bastante a formatação de fontes em templates .vue. É isso espero que ajude;)