Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/hedzr/adminlte-app

angular cli app (angular 10+ and AmidnLTE 3.1.0)
https://github.com/hedzr/adminlte-app

admin-dashboard adminlte adminlte3 angular angular-cli angular-cli10

Last synced: 26 days ago
JSON representation

angular cli app (angular 10+ and AmidnLTE 3.1.0)

Awesome Lists containing this project

README 

        
# AdminLTEApp



`AdminLTE-app` is a simple [Angular CLI](https://github.com/angular/angular-cli) v10.2.0

web application integrating with [AdminLTE 3.1.0](https://github.com/ColorlibHQ/AdminLTE/releases) .



## How to Integrate AdminLTE Latest Release with Angular 10+



The following guide is rewritten based the original [this](https://www.prishusoft.com/blog/Integrate-AdminLTE-theme-to-Angular-Project.html).



### Steps



#### Step 1: Install the Angular CLI



```bash

yarn global ass @angular/cli

# or: npm install -g @angular/cli

```



#### Step 2: Create a workspace and initial application



```bash

ng new adminLTE-app



? Would you like to add Angular routing? Yes

? Which stylesheet format would you like to use? SCSS   [ http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax ]

CREATE adminLTE-app/angular.json (3958 bytes)

CREATE adminLTE-app/package.json (1313 bytes)



```



#### Step 3: Serve the application



```bash

cd adminLTE-app

npm start

# or: ng serve --open

```



And open the main page at: http://localhost:4200/



#### Step 4: Download the Latest Release of Amin LTE



Visit the releases section on Github and download the latest release.



[**Download latest release**](https://github.com/ColorlibHQ/AdminLTE/releases)



From the latest release need to download the SourceCode.zip file and extract that file.



#### Step 5: Add AdminLTE required file to Asset Folder



From the Admin LTE Code copy the “dist” and “plugins” folder to assets folder (`/src/assets/`).



#### Step 6: Import the Admin LTE javascript and css



Import the javascript and Css file from the asset folder to Index.html file as mention below.



And `/src/index.html` should be like this:



```html



  

  AdminLTEApp

  

  

  



  

  

  

  

  

  

  

  



  



  



  

  

  

  

  

  



  

  

  

  

  

  



```



#### Step 7: Add Components for Header



Run the following command in terminal / command line



```bash

ng g c appheader

```



Which Create the appheader component as below.



[![img](https://user-images.githubusercontent.com/12786150/117232958-cde8bd00-ae54-11eb-86db-ff3a2a2ef95e.png)



Now open the `appheader.component.html` and copy `Navbar` chapter from `index3.html` with AdminLTE source code folder.



Copy all the HTML Content between `` Including `nav` tag into appheader.component.html.



The `appheader.component.html` looks like:



```html



  

  



  

  



```



Now add `appheader.component` to `app.component.html` as mention below



```ts



```



Run the Application again and you can see the header is set as per below screen shot



~~skip~~



#### Step 8: Add Components for Left Menu



Run the following command in terminal / command line



```bash

ng g c appsidebar



CREATE src/app/appsidebar/appsidebar.component.html (26 bytes)

CREATE src/app/appsidebar/appsidebar.component.spec.ts (635 bytes)

CREATE src/app/appsidebar/appsidebar.component.ts (274 bytes)

CREATE src/app/appsidebar/appsidebar.component.scss (0 bytes)

UPDATE src/app/app.module.ts (763 bytes)

```



Copy all the HTML Content between  Including aside tag into `appsidebar.component.html`



Now add `appsidebar.component` to `app.component.html` as mention below



```ts



```



After run the application you can see the output as below:



~~skip~~



#### Step 9: Add Components for Footer



Run the following command in terminal / Command line



```ts

ng g c appfooter



CREATE src/app/appfooter/appfooter.component.html (28 bytes)

CREATE src/app/appfooter/appfooter.component.spec.ts (649 bytes)

CREATE src/app/appfooter/appfooter.component.ts (282 bytes)

CREATE src/app/appfooter/appfooter.component.scss (0 bytes)

UPDATE src/app/app.module.ts (857 bytes)

```



Copy all the HTML Content between `` Including aside tag into `appfooter.component.html`, and it looks like:



```html



  Copyright © 2014-2021 AdminLTE.io.

  All rights reserved.

  


    Version 3.1.0

  



```



Now add `appfooter.component` to `app.component.html` as mention below



```ts



```



Note: As we have not added any content part so footer is display on top.



~~skip~~



#### Step 10: Add Components for Settings



Run the following command in terminal / Command line



```ts

ng g c appsetting



CREATE src/app/appsetting/appsetting.component.html (29 bytes)

CREATE src/app/appsetting/appsetting.component.spec.ts (656 bytes)

CREATE src/app/appsetting/appsetting.component.ts (286 bytes)

CREATE src/app/appsetting/appsetting.component.scss (0 bytes)

UPDATE src/app/app.module.ts (955 bytes)

```



Copy all the HTML Content between `` Including aside tag into `appsetting.component.html`. This html content you can find after footer html in admin LTE theme. And after added ,the `appsetting.component.html` looks like:



```html



  



```



Now add appsetting.component to app.component.html as mention below



```ts



  

  



  



  

  





```



After you run the application you can see the setting menu is display



~~skip~~



#### Step 11: Add Dashboard component



As now we have setup the Header, Footer, Menu, setting component now we can create dashboard component and add middle content from the theme.



Run the following command in terminal / Command line



```ts

ng g c dashboard



CREATE src/app/dashboard/dashboard.component.html (28 bytes)

CREATE src/app/dashboard/dashboard.component.spec.ts (649 bytes)

CREATE src/app/dashboard/dashboard.component.ts (282 bytes)

CREATE src/app/dashboard/dashboard.component.scss (0 bytes)

UPDATE src/app/app.module.ts (1049 bytes)

```



Copy all the HTML Content of Content Wrapper (`<>`). Contains page content into `ashboard.component.html`. Its partial contents should be like this:



```





...




```



Now we add the new route path for it:



Open `app-routing.module.ts`, and insert string into `routes` array:



```ts

const routes: Routes = [



  { path: 'dashboard', component: DashboardComponent },

  // { path: 'second-component', component: SecondComponent },

];

```



Before `routes`, we import the dashboard component:



```ts

import { DashboardComponent } from './dashboard/dashboard.component';

```



So the final `app-routing.module.ts`looks like:



```ts

import { NgModule } from '@angular/core';

import { Routes, RouterModule } from '@angular/router';



import { DashboardComponent } from './dashboard/dashboard.component';



const routes: Routes = [



  { path: 'dashboard', component: DashboardComponent },

  // { path: 'second-component', component: SecondComponent },

];



@NgModule({

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule]

})

export class AppRoutingModule { }

```



All folks!



Here is all we set now Admin LTE Theme See below screen shot



image-20210506095211202



## Short For Angular Dev



This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.2.0.



### Development server



Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.



### Code scaffolding



Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.



### Build



Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.



### Running unit tests



Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).



### Running end-to-end tests



Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).



### Further help



To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.



## LICENSE



MIT