Setup Initial Angular18

Higor Zica Programação
Setup Initial Angular18

Setup Frontend Produtividade Angular 18 PrimeNg

🇧🇷

1º Passo: Criar Projeto Angular / Entrar na pasta do Projeto

🇫🇷

Étape 1 : Créer un projet Angular / Entrer dans le dossier du projet

ng new <nameproject>
cd <nameproject>

🇧🇷

2º Passo: Instalar as dependências do projeto. (Utilizaremos o pacote completo da prime para desenvolvimento)

🇫🇷

Étape 2 : Installer les dépendances du projet (nous utiliserons le paquetage prime complet pour le développement)

npm install primeng primeicons primeflex

🇧🇷

3º Passo: Altere as variaveis de ambiente arquivo angular.json para ativar as dependências instaladas anteriormente

🇫🇷

Étape 3 : Modifier les variables d’environnement du fichier angular.json pour activer les dépendances précédemment installées

"styles": [
              "src/styles.css",
              "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
              "node_modules/primeng/resources/primeng.min.css",
              "node_modules/primeicons/primeicons.css",
              "node_modules/primeflex/primeflex.css"
 ],

🇧🇷

4º Passo: Criar as Pastas para organização da estrutura do projeto.

🇫🇷

Étape 4 : Créer des dossiers pour organiser la structure du projet.

src
├── app
│   ├── app.component.css
│   ├── app.component.html
│   ├── app.component.spec.ts
│   ├── app.component.ts
│   ├── app.config.server.ts
│   ├── app.config.ts
│   ├── app.routes.ts
│   ├── components
│   │   ├── dashboard
│   │   │   ├── footer
│   │   │   │   ├── footer.component.css
│   │   │   │   ├── footer.component.html
│   │   │   │   └── footer.component.ts
│   │   │   └── header
│   │   │       ├── header.component.css
│   │   │       ├── header.component.html
│   │   │       └── header.component.ts
│   │   └── site
│   │       ├── footer
│   │       │   ├── footer.component.css
│   │       │   ├── footer.component.html
│   │       │   └── footer.component.ts
│   │       └── header
│   │           ├── header.component.css
│   │           ├── header.component.html
│   │           └── header.component.ts
│   ├── layouts
│   │   ├── dashboard-layout
│   │   │   ├── dashboard-layout.component.css
│   │   │   ├── dashboard-layout.component.html
│   │   │   └── dashboard-layout.component.ts
│   │   └── site-layout
│   │       ├── site-layout.component.css
│   │       ├── site-layout.component.html
│   │       └── site-layout.component.ts
│   └── pages
│       ├── dashboard
│       │   ├── dashboard.component.css
│       │   ├── dashboard.component.html
│       │   └── dashboard.component.ts
│       └── login
│           ├── login.component.css
│           ├── login.component.html
│           └── login.component.ts
├── index.html
├── main.server.ts
├── main.ts
└── styles.css

🇧🇷 (Explicação sobre a estrutura de projeto acima) Em um caso de projeto onde você possui um site de exposição ao cliente e uma área privada com um dashboard administrativo eu utilizo essa estrutura pois posso separar o código dentro do meu arquivo app.routes.ts ao efetuar e evitar incompatibilidades caso o site e dashboard possuam components diferentes como : Navbar, Header, Footer.

🇫🇷 (Explication de la structure du projet ci-dessus) Dans le cas d’un projet où vous avez un site orienté client et un espace privé avec un tableau de bord administratif, j’utilise cette structure car je peux séparer le code dans mon fichier app.routes.ts lorsque je le crée et éviter les incompatibilités si le site et le tableau de bord ont des composants différents tels que : Navbar, Header, Footer.

🇧🇷

5º Passo: Código de Exemplo dos arquivos app.routes.ts

🇫🇷

Étape 5 : Exemple de code pour les fichiers app.routes.ts

import { Routes } from '@angular/router';
import { DashboardLayoutComponent } from './layouts/dashboard-layout/dashboard-layout.component';
import { SiteLayoutComponent } from './layouts/site-layout/site-layout.component';
import { LoginComponent } from './pages/login/login.component';
import { DashboardComponent } from './pages/dashboard/dashboard.component';

export const routes: Routes = [
    {
        path: '',
        component: SiteLayoutComponent,
        children: [
            {
                path: '', component: LoginComponent
            }
        ]
    },
    {
        path: 'dashboard',
        component: DashboardLayoutComponent,
        children: [
            {
                path: '', component: DashboardComponent
            }
        ]

    }
];

🇧🇷

6º Passo: Código de Exemplo dos arquivos app.component.html (Raiz do projeto)

🇫🇷

Étape 6 : Exemple de code pour les fichiers app.component.html (racine du projet)

<router-outlet></router-outlet>

🇧🇷

7º Passo: Código de Exemplo dos arquivos layouts/dashboard-layout.component.html e layouts/site-layout.component.html

🇫🇷

Étape 7 : Exemple de code pour les fichiers layouts/dashboard-layout.component.html et layouts/site-layout.component.html

<app-header></app-header>
  <router-outlet></router-outlet>
<app-footer></app-footer>

🇧🇷

Por último para rodar o projeto execute o comando:

🇫🇷

Enfin, pour exécuter le projet, lancez la commande :

ng serve --open