Angular

From DreamsIT

Angular instalação...




18/11/2020


Angular (comumente referido como "Angular 2+" ou "Angular 2") é uma plataforma de aplicações web de código-fonte aberto e front-end baseado em TypeScript liderado pela Equipe Angular do Google e por uma comunidade de indivíduos e corporações. Angular é uma reescrita completa do AngularJS, feito pela mesma equipe que o construiu[1].

VERIFICANDO SE O NODE, O NPM E O ANGULAR ESTÃO INSTALADOS:[edit | hide | edit source]

Instalar o node.js ( já vem com o npm )
Abrir o terminal e ver a versão do node, npm e @angular/cli:
a. node -v
b. npm -v
c. ng version (ng -v = mac)


INSTALANDO E CRIANDO O PROJETO COM ANGULAR CLI:[edit | hide | edit source]

1. Desinstalar a versão antiga do angular/cli: sudo npm uninstall -g @angular/cli
3. Limpar o cache: npm cache clean.
2. Instalar o angular cli última versão:  sudo npm install -g @angular/cli
4. Instalar o angular cli última versão específica de forma global: npm install -g @angular/cli ou com versão específica: npm install -g @angular/cli@1.1.2 (está como exemplo), antes de instalar localmente, caso necessário seja, logicamente.
3. Instalar o angular cli localmente: npm install -local @angular/cli


CRIANDO O PROTÓTIPO LOCAL DO PROJETO[edit | hide | edit source]

1. Escolher o workspace
2. ng new meuteste-ui
3. OBS:

Ao digitar o comando para a criação de um novo projeto, para a versão atual, o CLI irá nos fazer algumas perguntas:

Angular Routing

Será exibido uma mensagem perguntando se desejamos adicionar Angular Routing no nosso projeto. Para o nosso caso, como adicionaremos mais a frente essas funcionalidades, podemos digitar N e continuar com a criação do projeto

CSS

Também será perguntado qual formato para folhas de estilo iremos usar em nosso projeto. Podemos escolher entre algumas opções, mas para o nosso caso iremos usar CSS tradicional.

INICIAR O SERVIDOR DE TESTES LOCAL[edit | hide | edit source]

1. ng serve ou npm run start (para mais opções)
2. porta local: localhost:4200
3. ng serve --port 8181 (exemplo para mudar a porta)

ABRINDO O PROJETO NO VISUAL STUDIO CODE:[edit | hide | edit source]

1. Open Folder (abrir a pasta do projeto )
2. TERMINAL:
a. Abir o Terminal: Ctrl + Shift + ‘
b. MENU → view → terminal ou MENU → Terminal
2. ng serve (fazer o build do projeto)
3. obs: caso dê erro, instalar o node_modules: npm install (caso baixar um projeto)

PLUGINS[edit | hide | edit source]

a. TSLint
b. Editor Config for vscode
c. All autocomplete
d. Angular (conforme versão)
e. Auto Import
f. babel-plugin-css
g. html snippets
h. primeng snippets (conforme a versão)
I. typescript toolbox.
j. typescript import

INSTALAR LIBRARIES AUXILIARES:[edit | hide | edit source]

a. INSTALAR O PRIMENG: npm install primeng –save
b. INSTALAR O FONTAWESOME: npm install font-awesome –save 

CRIAR A INTEGRAÇÃO:[edit | hide | edit source]

a. Em versões anteriores: .angular-cli.json:[edit | hide | edit source]

Adicionar em "styles": [[edit | hide | edit source]

"node_modules/ng2-toasty/style-bootstrap.css",

"node_modules/font-awesome/css/font-awesome.min.css",

"node_modules/primeng/resources/themes/omega/theme.css",

"node_modules/primeng/resources/primeng.min.css",

"src/styles.css"

b. Em versões atualizadas: .angular.json:[edit | hide | edit source]

Adicionar em "styles": [[edit | hide | edit source]

"node_modules/ng2-toasty/style-bootstrap.css",

"node_modules/font-awesome/css/font-awesome.min.css",

"node_modules/primeng/resources/themes/omega/theme.css",

"node_modules/primeng/resources/primeng.min.css",

"src/styles.css"

c. Em versões com angular 8:[edit | hide | edit source]

Na versão atual, o PrimeNG não faz mais uso da biblioteca font-awesome.[edit | hide | edit source]

Foi criado uma biblioteca própria do PrimeNG para substituí-lo, que é o primeicons[edit | hide | edit source]

Portanto, para a instalação dos componentes PrimeNG, será necessário os seguintes comandos:[edit | hide | edit source]

npm install primeng --save
npm install primeicons --save

Você verá que as dependências foram instaladas com sucesso, pelo seu arquivo package.json[edit | hide | edit source]

"dependencies": {[edit | hide | edit source]

//...

"primeicons": "^1.0.0",

"primeng": "^8.0.0-rc.1"

}[edit | hide | edit source]

A documentação também mudou, pois alguns temas foram alterados e o padrão para a propriedade styles está assim:

"node_modules/primeicons/primeicons.css",

"node_modules/primeng/resources/themes/nova-light/theme.css",

"node_modules/primeng/resources/primeng.min.css",

Obs: Depois das instalações e integrações, correr o servidor local:[edit | hide | edit source]

ng serve

TESTANDO O PRIMENG[edit | hide | edit source]

a. Sobrescrever app.component.html com esse código do Tabview para o teste:[edit | hide | edit source]

 1<p-tabView>
 2    <p-tabPanel header="Header 1">
 3        Content 1
 4    </p-tabPanel>
 5    <p-tabPanel header="Header 2">
 6        <ng-template pTemplate="content">
 7            Complex Content to Lazy Load
 8        </ng-template>
 9    </p-tabPanel>
10    <p-tabPanel header="Header 3">
11        <ng-template pTemplate="content">
12            Complex Content to Lazy Load
13        </ng-template>
14    </p-tabPanel>
15</p-tabView>

b. Importar o módulo TabView em app.component.ts tanto nos imports quanto em @NgModule:[edit | hide | edit source]

<syntaxhighlight lang="css" line="1" start="1"> ...

import {TabViewModule} from 'primeng/primeng';

@NgModule({

 declarations: [
   AppComponent
 ],
 imports: [
   BrowserModule,
   TabViewModule

...

 ],

...



Autor: Pfyh.





Se você gosta do meu conteúdo, considere comprar um café para mim ou se desejar, me dê um apoio.