You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+27-12Lines changed: 27 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -21,20 +21,22 @@ Biblioteca de componentes de UI para Angular.
21
21
22
22
### Pré-requisitos
23
23
24
-
Para começar a utilização do PO tenha em mãos o `Node.js` instalado (deve-se utilizar a versão 10.x ou acima) e o seu gerenciador de pacote favorito atualizado. Caso você ainda não tenha instalado o pacote `@angular/cli`, instale-o via `npm` ou `yarn`.
24
+
Para começar a utilizar o **Po** (Portinari 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`.
25
25
26
26
Instalando com npm:
27
27
```
28
28
npm i -g @angular/cli@8.0.0
29
29
```
30
30
31
-
Caso prefira o yarn:
31
+
Caso prefira instalar com o yarn:
32
32
```
33
33
yarn global add @angular/cli@8.0.0
34
34
```
35
35
36
36
### Passo 1 - Crie o seu primeiro projeto
37
37
38
+
> Caso você já tenha um projeto criado e deseje apenas incluir o **Po**, pule esta etapa e vá para o **Passo 1.1**.
39
+
38
40
O [Angular CLI](https://cli.angular.io/) se encarrega de construir toda estrutura inicial do projeto. Para isso, execute o seguinte comando:
39
41
40
42
```
@@ -46,8 +48,9 @@ ng new my-po-project --skipInstall
46
48
47
49
#### Passo 1.1 - Instalando as dependências
48
50
49
-
Antes de executar a instalação, é necessário que todas as dependências do projeto estejam declaradas de acordo com a versão
50
-
do PO e Angular no arquivo **package.json**, localizado na raiz da aplicação.
51
+
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).
52
+
53
+
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.
51
54
52
55
```
53
56
"dependencies": {
@@ -66,46 +69,58 @@ do PO e Angular no arquivo **package.json**, localizado na raiz da aplicação.
66
69
}
67
70
```
68
71
69
-
Após verificar as dependencias, acesse a pasta raiz do seu projeto e execute o comando abaixo:
72
+
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:
70
73
71
74
Instalando com npm:
72
75
```
73
76
npm install
74
77
```
75
78
76
-
Caso prefira o yarn:
79
+
Caso prefira instalar com o yarn:
77
80
```
78
81
yarn install
79
82
```
80
83
81
84
### Passo 2 - Adiconando o pacote @portinari/portinari-ui
82
85
83
-
Utilizando o comando `ng add` do [Angular CLI](https://cli.angular.io/), 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.
86
+
Utilizando o comando `ng add` do [Angular CLI](https://cli.angular.io/), 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**.
84
87
85
88
Execute o comando abaixo na pasta raiz do seu projeto:
86
89
87
90
```
88
91
ng add @portinari/portinari-ui
89
92
```
90
93
91
-
> Ao executar o comando acima, será perguntado se deseja incluir uma estrutura incial em seu projeto, utilizando componentes do PO, caso desejar, apenas informe: `Y`.
94
+
> 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`**.
92
95
93
96
### Passo 3 - Rode o seu projeto
94
97
95
-
Agora basta rodar mais um comando para ver seu projeto no ar.
98
+
Agora basta executar mais um comando para subir a aplicação e ver o seu projeto rodando no *browser* ;).
96
99
97
100
```
98
101
ng serve
99
102
```
100
103
101
-
Pronto, agora abra seu browser e acesse a url http://localhost:4200 para ver o resultado.
104
+
Abra o *browser* e acesse a url http://localhost:4200. Pronto!
102
105
103
106
----
104
107
105
108
### E agora?
106
109
107
110
Agora é só abrir seu **editor / IDE** favorito e começar a trabalhar no seu projeto.
108
111
109
-
O `@portinari/portinari-ui` por padrão irá configurar uma aplicação com menu lateral, isso já vai ajudar bastante se você está começando a se aventurar no PO e/ou em aplicações Angular.
112
+
Caso você queira utilizar nossos componentes de templates, como o **[po-page-login](http://portinari.io/documentation/po-page-login)**, **[po-modal-password-recovery](http://portinari.io/documentation/po-modal-password-recovery)**, **[po-page-blocked-user](http://portinari.io/documentation/po-page-blocked-user)**, **[po-page-dynamic-table](http://portinari.io/documentation/po-page-dynamic-table)** entre outros, basta instalar o pacote `@portinari/portinari-templates` e incluí-lo nas dependências do seu projeto rodando o comando abaixo:
113
+
114
+
Instalando com npm:
115
+
```
116
+
npm i --save @portinari/portinari-templates
117
+
```
118
+
119
+
Caso prefira instalar com o yarn:
120
+
```
121
+
yarn add @portinari/portinari-templates
122
+
```
123
+
124
+
E depois adicionar o `PoTemplatesModule` no módulo principal da sua aplicação :).
110
125
111
-
A partir daqui você está apto a adicionar outros componentes do **Portinari**.
126
+
A partir dai o seu projeto está preparado para receber outros componentes do **[Po](http://portinari.io/documentation)**! \o/
0 commit comments