Hire our expert Angular developer
How to Integrate Identity Server to Angular Application
We are using Angular 7 Quick starter, so first we need to download that Angular 7 CLI and then we need to create our project. Integrate AdminLTE theme in Angular 7 application is easy to get with. So let us dive in. Go to AngularCLI website and follow the steps.
Here consider that latest Node.js has already been installed.
To install the CLI using npm, open a VS Code terminal/console window. If you are on a Mac or Linux type following command.
PS E:\>npm install -g @angular/cli
It takes some time to download the CLI and Installed the NPM packages.
1. Run the CLI command ng new and provide the name my-app, as show below. As we are integrateAdminLTE theme so I name as “adminLTE-app”
PS E:\> ng new adminLTE-app
2.The ng new command prompts you for information about features to include in the initial app project and here are the answer of each:
PS E:\> 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)
This will create required folders to Up and Running with our Application and also install all the NPM packages. This will also takes some time to complete.
Go to workplace folder (adminLTE-app) and type following command on your terminal to serve the application.
PS E:\adminLTE-app>npm start
> admin-lte-app@0.0.0 start E:\adminLTE-app
> ng serve
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2019-04-17T06:05:02.020Z
Hash: 68fd5880430134b6562c
Time: 9104ms
chunk {es2015-polyfills} es2015-polyfills.js, es2015-polyfills.js.map (es2015-polyfills) 284 kB [initial] [rendered]
chunk {main} main.js, main.js.map (main) 11.5 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 236 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.6 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.77 MB [initial] [rendered]
i｢wdm｣: Compiled successfully.
Once you run the application you can see below screen.
Visit the releases section on Github and download the latest release.
From the latest release need to download the SourceCode.zip file and extract that file.
From the Admin LTE Code copy the “bower_components”, “dist” and “plugins” folder to assets folder.
Import the javascript and Css file from the asset folder to Index.html file as mention below
<!-- Bootstrap 3.3.7 -->
<linkrel="stylesheet" href="assets/bower_components/bootstrap/dist/css/bootstrap.min.css">
<!-- Font Awesome -->
<linkrel="stylesheet" href="assets/bower_components/font-awesome/css/font-awesome.min.css">
<!-- Ionicons -->
<linkrel="stylesheet" href="assets/bower_components/Ionicons/css/ionicons.min.css">
<!-- jvectormap -->
<linkrel="stylesheet" href="assets/bower_components/jvectormap/jquery-jvectormap.css">
<!-- Theme style -->
<linkrel="stylesheet" href="assets/dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<linkrel="stylesheet" href="assets/dist/css/skins/_all-skins.min.css">
</head>
<body class="hold-transition skin-blue layout-top-nav login-page">
<app-root>
<div class="wrapper"></div>
</app-root>
<script src="assets/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="assets/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="assets/bower_components/fastclick/lib/fastclick.js"></script>
<!-- AdminLTE App -->
<scriptsrc="assets/dist/js/adminlte.min.js"></script>
<!-- Sparkline -->
<script src="assets/bower_components/jquery-sparkline/dist/jquery.sparkline.min.js"></script>
<!-- jvectormap -->
<script src="assets/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="assets/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- SlimScroll -->
<script src="assets/bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<!-- ChartJS -->
<script src="assets/bower_components/chart.js/Chart.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<scriptsrc="assets/dist/js/pages/dashboard2.js"></script>
<!-- AdminLTE for demo purposes -->
<scriptsrc="assets/dist/js/demo.js"></script>
After import run the application again and you can see the styles are apply.
Run the following command in terminal / command line
PS E:\> ng g c appheader
Which Create the appheader component as below.
Now open the appheader.component.html and open the Index.HTML file for the download ADMIN LTE theme.
Copy all the HTML Content between <header><header> Including header tag into appfooter.component.html.
Now add appheader.component to app.component.html as mention below
<app-appheader></app-appheader>
<router-outlet></router-outlet>
Run the Application again and you can see the header is set as per below screen shot
Run the following command in terminal / command line
PS E:\adminLTE-app> ng g c appmenu
CREATE src/app/appmenu/appmenu.component.html (26 bytes)
CREATE src/app/appmenu/appmenu.component.spec.ts (635 bytes)
CREATE src/app/appmenu/appmenu.component.ts (274 bytes)
CREATE src/app/appmenu/appmenu.component.scss (0 bytes)
UPDATE src/app/app.module.ts (763 bytes)
Copy all the HTML Content between <aside></aside> Including aside tag into appmenu.component.html
Now add appmenu.component to app.component.html as mention below
<app-appheader></app-appheader>
<app-appmenu></app-appmenu>
<router-outlet></router-outlet>
After run the application you can see the output as below:
Run the following command in terminal / Command line
PS E:\adminLTE-app> 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 <footer></footer> Including aside tag into appfooter.component.html
Now add appfooter.component to app.component.html as mention below
<app-appheader></app-appheader>
<app-appmenu></app-appmenu>
<router-outlet></router-outlet>
<app-appfooter></app-appfooter>
Note: As we have not added any content part so footer is display on top.
Run the following command in terminal / Command line
PS E:\adminLTE-app> 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 <aside></aside> Including aside tag into appsetting.component.html. This html content you can find after footer html in admin LTE theme.
Now add appsetting.component to app.component.html as mention below
<app-appheader></app-appheader>
<app-appmenu></app-appmenu>
<router-outlet></router-outlet>
<app-appfooter></app-appfooter>
<app-appsetting></app-appsetting>
After you run the application you can see the setting menu is display
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
PS E:\adminLTE-app> 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 dashboard.component.html.
Here is all we set now Admin LTE Theme See below screen shot
More topics:
Angular's defer feature is a game-changer for performance. Learn how it works and how to implement it to speed up your apps significantly. Download full source code.
Learn top strategies to secure Angular applications. Explore best practices for authentication, data protection, API security, and code vulnerability checks.
Explore how Zone.js powers change detection in Angular apps. This comprehensive guide covers how it works, use cases, performance tips, and advanced debugging.
Learn how to implement Azure AD authentication in your Angular app using MSAL and connect it securely with ASP.NET Core Web API. Step-by-step setup included.
Understand the core differences between Observable and Promise in Angular. Learn when to use each, how they handle async data, and which suits your app best.
Learn how to integrate IdentityServer with Angular for secure authentication and authorization. Step-by-step guide using OAuth2, OIDC, and token handling.
Get in touch with Prishusoft – your trusted partner for custom software development. Whether you need a powerful web application or a sleek mobile app, our expert team is here to turn your ideas into reality.
