# Angular와 AdminLTE 통합하기
0. Angular Cli를 글로벌로 설치
- npm install -g @angular/cli
1. 새로운 Angular 프로젝트 생성
- ng new (프로젝트명)
> router 설정 : router 관련 구조 포함
> 스타일시트 설정 sass : angular.json 파일 내 Styles 속성에 기본으로 .sass 파일 하나를 참조
2. Angular 프로젝트 내에 AdminLTE 노드 모듈 설치
- [프로젝트 폴더 내부에서] npm install admin-lte@^3.0 --save
> adminLTE와 관련된 모든 StyleSheet와 Js 파일이 node_modules 폴더 내에 다운로드 된다.
3. package.json를 통해, AdminLTE와 Angular 버전이 제대로 설치되었는지 확인
4. AdminLTE 사이트 접속하기
- 용도 : index.html body 태그내 html 소스를 가져오기 위함
- 링크 : https://adminlte.io/themes/dev/AdminLTE/index.html
- 대시보드 유형 선택 후 소스 보기
- 해당 사이트에서, 원하는 페이지의 소스 보기를 복사해서 사용
- 다만, 참조하는 .css 파일경로와, .js 파일경로가 다르므로, angular 프로젝트 상에서, 경로를 지정해주어야 한다.
- 대시보드 유형에 따라, html 경로명이 다르고, 각 body의 class명도 다름
- body 태그에 존재하는 class명 복사 (6번에서 필요)
- body 태그 내에 필요한 html 태그 복사 (7번에서 필요)
5. Angular.json 수정
- Styles 속성과 Script 속성에 각각 node_modules/adminlte 내 css와 js파일 경로를 연결해줌
- 별도 내용 참조, 누락되어 있는 것은 node_modules/adminlte 폴더 내부에서 찾아야 함
- angular.json내 architect > build > options > styles에 설정해야함(test의 비슷한 곳에 잘못 붙여넣기 하는 경우가 있으므로 유의)
- 아래 소스 파일 참조
"styles": [
"src/styles.sass",
"node_modules/admin-lte/plugins/fontawesome-free/css/all.min.css",
"node_modules/admin-lte/docs_html/assets/css/adminlte.css"
],
"scripts": [
"node_modules/admin-lte/plugins/jquery/jquery.js",
"node_modules/admin-lte/plugins/bootstrap/js/bootstrap.bundle.js",
"node_modules/admin-lte/dist/js/adminlte.js",
"node_modules/admin-lte/plugins/chart.js/Chart.js",
"node_modules/admin-lte/dist/js/demo.js",
"node_modules/admin-lte/dist/js/pages/dashboard3.js"
]
6. Angular 프로젝트 내 Index.html에서, body 태그에 class 붙여넣기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Adminlte3withangular9</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
</head>
<body
class="hold-transition sidebar-mini layout-fixed layout-navbar-fixed layout-footer-fixed"
>
<app-root></app-root>
</body>
</html>
7. Angular 프로젝트 내 App.component.html에서, body 태그 안에 내용을 붙여넣기
- (주의사항) 맨 마지막에 있는 <router..></router...> 속성은 router 기능에 해당하므로, 지우면 안된다.
<div class="wrapper">
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#"
><i class="fas fa-bars"></i
></a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<a href="index3.html" class="nav-link">Home</a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<a href="#" class="nav-link">Contact</a>
</li>
</ul>
...
<!-- Main Footer -->
<footer class="main-footer">
<strong
>Copyright © 2014-2019
<a href="http://adminlte.io">AdminLTE.io</a>.</strong
>
All rights reserved.
<div class="float-right d-none d-sm-inline-block"><b>Version</b> 3.0.0</div>
</footer>
</div>
<router-outlet></router-outlet>
8. 소스 내에서 dist/... 형식으로 참조하는 이미지들을 Assets 폴더로 모두 복사
- node_modules/adminlte 내에 있는 dist 폴더 내에 있는 자산들을 참조하므로, 복사해서 붙여넣기해주어야 함
9. Angular 프로젝트 내 App.component.html에서, "dist/img/"를 "assets/"로 모두 변경해주어야함
10. Test
- Ctrl + C 로 현재 실행중인 Server 종료
- ng build로 100% 컴파일 완료되었는지 확인, ng serve --open(즉시실행) --port 4200(포트번호 옵션, 기본은 4100)로 서버 실행
11. Customizing & Component 쪼개기 작업 수행
- adminLTE 예제 페이지의 좌측 Navigation Part는 Angular Router로?
- adminLTE 예제 페이지의 개별 Master Page는 Angular Component로
- adminLTE 예제 페이지의 상단 Navigation Part는 Angular Router로?
- App.componet.html 상에서는 상단 Navigation Header나 또는 좌측 Navigation Header만 남겨 놓을 것이고,
- Master Page 부분에는 각 Component들이 들어가게 구성될 것이다.
# 출처
- AdminLTE 3 Install with Angular 9 tutorial with Example[https://www.youtube.com/watch?v=UNomyjz0ewA]
- https://github.com/cpvariyani/adminlte3-with-angular9
'[DEV] App Dev ∕ Web Front > Framework ∕ Angular' 카테고리의 다른 글
| Angular 일반지식 (0) | 2020.08.03 |
|---|---|
| Angular Directive (미완) (0) | 2020.08.03 |
| Angular Pipe(|) (0) | 2020.07.09 |
| Angular Component Style 처리 (0) | 2020.07.09 |
| Angular Component Communication (부모-자식 컴포넌트 간 바인딩) (0) | 2020.07.08 |
최근댓글