59. Angular CLI
프로젝트 생성
작성일
4/22/2025작성
붓다핸섬수정일
4/22/2025Install the Angular CLI
npm install -g @angular/cli
ng new buddha-co-kr
cd buddha-co-kr
ng build
ng s -o
ng serve --open
# tailwindcss install
npm install tailwindcss @tailwindcss/postcss postcss --forceCreate .postcssrc.json, project root
{
"plugins": {
"@tailwindcss/postcss": {}
}
}Add an @import to ./src/styles.css
@import "tailwindcss";tailwindcss test
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>코드
// Route
import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { BuddhaComponent } from './buddha/buddha.component';
import { SutraListComponent } from './buddha/sutra-list/sutra-list.component';
import { SutraCreateComponent } from './buddha/sutra-create/sutra-create.component';
import { SutraReadComponent } from './buddha/sutra-read/sutra-read.component';
import { SutraUpdateComponent } from './buddha/sutra-update/sutra-update.component';
import { SutraDeleteComponent } from './buddha/sutra-delete/sutra-delete.component';
export const routes: Routes = [
{ path: '', redirectTo: 'Home', pathMatch: 'full' },
{ path: 'Home', component: HomeComponent },
{
path: 'Buddha', component: BuddhaComponent, children: [
{ path: '', redirectTo: 'SutraList', pathMatch: 'full' },
{ path: 'SutraList', component: SutraListComponent },
{ path: 'SutraCreate', component: SutraCreateComponent },
{ path: 'SutraRead', component: SutraReadComponent },
{ path: 'SutraRead/:id', component: SutraReadComponent },
{ path: 'SutraUpdate', component: SutraUpdateComponent },
{ path: 'SutraUpdate/:id', component: SutraUpdateComponent },
{ path: 'SutraDelete', component: SutraDeleteComponent },
{ path: 'SutraDelete/:id', component: SutraDeleteComponent },
{ path: '**', redirectTo: 'SutraList' },
]
},
{ path: '**', redirectTo: 'Home' }
];
연관코드
# index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>BUDDHA</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body class="mat-typography">
<app-root></app-root>
</body>
</html>
CONCLUSION
Angular
├── app
│ ├── app.component.css
│ ├── app.component.html
│ ├── app.component.spec.ts
│ ├── app.component.ts
│ ├── app.config.ts
│ ├── app.routes.ts
│ ├── buddha
│ │ ├── buddha.component.css
│ │ ├── buddha.component.html
│ │ ├── buddha.component.spec.ts
│ │ ├── buddha.component.ts
│ │ ├── sutra-create
│ │ │ ├── sutra-create.component.css
│ │ │ ├── sutra-create.component.html
│ │ │ ├── sutra-create.component.spec.ts
│ │ │ └── sutra-create.component.ts
│ │ ├── sutra-delete
│ │ │ ├── sutra-delete.component.css
│ │ │ ├── sutra-delete.component.html
│ │ │ ├── sutra-delete.component.spec.ts
│ │ │ └── sutra-delete.component.ts
│ │ ├── sutra-list
│ │ │ ├── sutra-list.component.css
│ │ │ ├── sutra-list.component.html
│ │ │ ├── sutra-list.component.spec.ts
│ │ │ └── sutra-list.component.ts
│ │ ├── sutra-read
│ │ │ ├── sutra-read.component.css
│ │ │ ├── sutra-read.component.html
│ │ │ ├── sutra-read.component.spec.ts
│ │ │ └── sutra-read.component.ts
│ │ └── sutra-update
│ │ ├── sutra-update.component.css
│ │ ├── sutra-update.component.html
│ │ ├── sutra-update.component.spec.ts
│ │ └── sutra-update.component.ts
│ ├── footer-bar
│ │ ├── footer-bar.component.css
│ │ ├── footer-bar.component.html
│ │ ├── footer-bar.component.spec.ts
│ │ └── footer-bar.component.ts
│ ├── home
│ │ ├── home.component.css
│ │ ├── home.component.html
│ │ ├── home.component.spec.ts
│ │ └── home.component.ts
│ ├── interceptor
│ │ ├── token.interceptor.spec.ts
│ │ └── token.interceptor.ts
│ ├── membership
│ │ ├── membership.component.css
│ │ ├── membership.component.html
│ │ ├── membership.component.spec.ts
│ │ └── membership.component.ts
│ ├── nav-menu-bar
│ │ ├── nav-menu-bar.component.css
│ │ ├── nav-menu-bar.component.html
│ │ ├── nav-menu-bar.component.spec.ts
│ │ └── nav-menu-bar.component.ts
│ └── services
│ ├── auth.service.spec.ts
│ └── auth.service.ts
├── index.html
├── main.ts
└── styles.css
삭제권한 확인 중...
수정 권한 확인 중...