Angular & Angular-cli tutorial de instalação

Autor: Lucas Antonio Ramos Sartori

Portfolio: https://sartori-ria.github.io/

Contato: faltou.criatividade0@gmail.com

Github: https://github.com/sartori-ria

Instalando Node

ATENÇÃO CASO RESOLVA UTILIZAR A VERSÃO 6 DO NODE, SAIBA QUE ELA TERÁ SUPORTE APENAS ATÉ ABRIL DE 2018

Para trabalhar com o Angular precisará ter instalado a versao 6 ou mais recente

Instalando Node

Linux e MacOSX

https://nodejs.org/en/

Ou pelo terminal

https://www.digitalocean.com/community/tutorials/como-instalar-o-node-js-no-ubuntu-16-04-pt

Windows

https://nodejs.org/en/

Verificar a versao instalada:

node -v
npm -v

Instalando TypeScript

Linux e MacOSX

sudo npm install -g typescript

Windows

npm install -g typescript

Verificar a versao instalada:

tsc -v

Instalando Angular-cli

Linux e MacOSX

sudo npm install -g @angular/cli

Windows

npm install -g @angular/cli

Verificar a versao instalada:

ng -v

Atualizando libs para a ultima versao

Linux e MacOSX

sudo npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@latest typescript@latest --save

Windows

npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest typescript@latest --save

Comandos principais do Angular-cli

Component ng g component my-new-component
Directive ng g directive my-new-directive
Pipe ng g pipe my-new-pipe
Service ng g service my-new-service
Class ng g class my-new-class
Guard ng g guard my-new-guard
Interface ng g interface my-new-interface
Enum ng g enum my-new-enum
Module ng g module my-module

*obs: todos os comandos de geração podem ser abreviados exemplo:

ng g componente meu_componente

ficaria como:

ng g c meu_componente

Criando projeto com sass, scss, styles

ng new nome_projeto --style=scss
ng new nome_projeto --style=sass
ng new nome_projeto --style=styles

Criando módulo de rotas com Angular-cli

Na criação do projeto:

ng new nome_projeto --routing

Na criação de um módulo

ng g m nome_modulo --routing

iniciar o servidor

ng serve

Por padrão o Angular-cli irá iniciar na porta localhost:4200

Caso queira mudar para um ip e também uma porta

Ng serve --host seu.ip --port sua_porta

Exemplo:

ng serve --host 0.0.0.0 --port 4201

Criar a build de producao

ng build

Nisso ele irá minificar todo o seu projeto no diretório dist/

O que está neste diretório será a sua aplicação final que será enviada ao servidor

Testes

ng lint

irá verificar todo o seu código em busca de erros incluindo se esta de acordo com o style guide

ng test

Utiliza o Jasmine, https://jasmine.github.io/ , para testes unitarios, utiliza os arquivos .spec.ts criados

ng e2e

Utiliza o protractor, http://www.protractortest.org/#/ , para testes end-to-end, testes de integração

Documentação

ng doc termo_para_busca

Nisso ele irá abrir no seu navegador a documentação oficial do angular: https://angular.io

 

Bower

sudo npm install -g bower

Para quem gosta de utiliza-lo para baixar determinadas dependencias

Para usá-lo é o mesmo que baixar uma dependencia pelo npm

bower install sua_dependencia

Ela irá para o diretório: bower_components

Instalando Bootstrap pelo angular-cli

Para baixar a versão estável:

npm install bootstrap

Para baixar a última versão

npm install bootstrap@next

Para baixar uma versão específica

npm install bootstrap@numero_da_versao

ngx-bootstrap

npm install ngx-bootstrap --save

Instalando Materialize pelo angular-cli

https://www.npmjs.com/package/angular2-materialize

Incluindo bibliotecas de estilo no projeto

no arquivo .angular-cli.json, no array “styles” é onde irá incluir os arquivos css, aviso sério evite incluir nessa parte por scss ou outra extensão, opte pelos que já são .css a chance de dar merda se não fizer com eles é grande. Para incluir arquivos javaScript no array “scripts” voce fará a inclusão deles.

na duvida segue o exemplo a baixo

"styles": [
  "styles.scss",
  "../node_modules/materialize-css/dist/css/materialize.css",
  "../bower_components/ionicons/css/ionicons.css",
  "../bower_components/font-awesome/css/font-awesome.css"
],
"scripts": [
  "../node_modules/jquery/dist/jquery.js",
  "../node_modules/hammerjs/hammer.js",
  "../node_modules/materialize-css/dist/js/materialize.js"
],

Pronto meu filho, já pode brincar a vontade com angular

pica-pau4-g-20091215

Referencias

https://angular.io/

https://www.typescriptlang.org/

https://github.com/angular/angular-cli

https://github.com/valor-software/ngx-bootstrap

https://www.npmjs.com/package/angular2-materialize

https://nodejs.org/en/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

Up ↑

%d bloggers like this: