po-ui / Po Angular

Pré-requisitos

Para começar a utilizar o PO UI é pré-requisito ter o Node.js instalado (versão 10.x ou acima) e o seu gerenciador de pacote favorito na versão mais atual. Caso você ainda não tenha instalado o pacote @angular/cli, instale-o via npm ou yarn.

Instalando com npm:

npm i -g @angular/[email protected]

Caso prefira instalar com o yarn:

yarn global add @angular/[email protected]

Passo 1 - Crie o seu primeiro projeto

Caso você já tenha um projeto criado e deseje apenas incluir o Po, pule esta etapa e vá para o Passo 1.1.

O Angular CLI se encarrega de construir toda estrutura inicial do projeto. Para isso, execute o seguinte comando:

ng new my-po-project --skipInstall

O parâmetro --skip-install permite criar o projeto, contudo, não instalará as dependências automaticamente.

Passo 1.1 - Instalando as dependências

Antes de executar a instalação ou inserir o Po no seu projeto existente, é necessário verificar as dependências do seu projeto, algumas delas precisam estar de acordo com a versão do Po e Angular (elas podem ser encontradas no arquivo package.json localizado na raiz da aplicação).

Veja abaixo a lista de dependências e as versões compatíveis, elas devem ser conferidas e se necessário, ajustadas no seu projeto.

  "dependencies": {
    "@angular/animations": "~11.2.0",
    "@angular/common": "~11.2.0",
    "@angular/compiler": "~11.2.0",
    "@angular/core": "~11.2.0",
    "@angular/forms": "~11.2.0",
    "@angular/platform-browser": "~11.2.0",
    "@angular/platform-browser-dynamic": "~11.2.0",
    "@angular/platform-server": "~11.2.0",
    "@angular/router": "~11.2.0",
    "tslib": "^2.0.0",
    "rxjs": "~6.6.0",
    "zone.js": "~0.10.3"
    ...
  },
  "devDependencies": {
    ...
    "typescript": "~4.1.3"
  }

Após verificar se estas dependências do seu projeto estão com as versões compatíveis declaradas acima, acesse a pasta raiz do seu projeto e execute o comando abaixo:

Instalando com npm:

npm install

Caso prefira instalar com o yarn:

yarn install

Passo 2 - Adiconando o pacote @po-ui/ng-components

Utilizando o comando ng add do Angular CLI, vamos adicionar o Po em seu projeto e o mesmo se encarregará de configurar o tema, instalar o pacote e importar o módulo do Po.

Execute o comando abaixo na pasta raiz do seu projeto:

ng add @po-ui/ng-components

Ao executar o comando acima, será perguntado se deseja incluir uma estrutura inicial em seu projeto com menu lateral, página e toolbar, utilizando componentes do Po, caso desejar, apenas informe: Y.

Passo 3 - Rode o seu projeto

Agora basta executar mais um comando para subir a aplicação e ver o seu projeto rodando no browser ;).

ng serve

Abra o browser e acesse a url http://localhost:4200. Pronto!

E agora?

Agora é só abrir seu editor / IDE favorito e começar a trabalhar no seu projeto.

Caso você queira utilizar nossos componentes de templates, como o po-page-login, po-modal-password-recovery, po-page-blocked-user, po-page-dynamic-table entre outros, basta adicionar o pacote @po-ui/ng-templates executando o comando abaixo:

ng add @po-ui/ng-templates

Ao executar este comando, será instalado o pacote @po-ui/ng-templates e configurado o PoTemplatesModules no app.module

A partir dai o seu projeto está preparado para receber outros componentes do PO UI! \o/