Inspinia Template For Angular 4+
Description
This NPM module wraps the Inspinia Bootstrap template from https://wrapbootstrap.com/theme/inspinia-responsive-admin-theme-WB0R5L90S
The module is currently hosted on BitBucket, at https://bitbucket.org/richf_princeton/inpinia-template, but will eventually be moved to our internal Nexus Repository
Note: This template uses jQuery extensively, which is generally not recommended for Angular applications, and under certain circumstances, may cause problems such as slow and/or incorrect page rendering.
Use this template only if you need to match the look and feel of another existing application that is using this template. For other applications, consider using the CoreUI template , which has a similar look and feel, but does not use jQuery.
Installation
To install the template into your project, use either 'npm install' or 'yarn add' from the command line at the root of your Angular project:
npm install --save git+https://richf_princeton@bitbucket.org/richf_princeton/inspinia-template.git
or
yarn add git+https://richf_princeton@bitbucket.org/richf_princeton/inspinia-template.git
Either of these commands will update your package.json
file with a reference to the new module, and then download the module to your project's node_modules
folder, making it available for use by your project.
Usage
To use the template, you must import the inspinia Angular module into your project, use the template's root tag in the location where you want the template to appear, and then provide content to the template.
1. Import the template module
Edit your application's src/app/app.module.ts
file, add an import
for the inspinia-template
module, and add the InspiniaTemplateModule to the AppMdoule's imports section, e.g.:
import {NgModule} from '@angular/core';
import {HashLocationStrategy, LocationStrategy} from '@angular/common';
import {BrowserModule} from '@angular/platform-browser';
import {AppRoutingModule} from './app.routing';
import {AppComponent} from './app.component';
// add this import statement
import {InspinaTemplateModule} from 'inspinia-template';
@NgModule({
imports: [
BrowserModule,
AppRoutingModule,
// import the InspiniaTemplateModule into the AppModule
InspiniaTemplateModule</b>
],
declarations: [
AppComponent
],
providers: [
{provide: LocationStrategy, useClass: HashLocationStrategy}
],
bootstrap: [AppComponent]
})
export class AppModule {
}
2. Use the template's root tag
The template could be applied to any component in your application, but in most, if not all cases, will be applied to your AppComponent. By default, in a new project, your AppComonent's template will be in app.component.ts
Remove all of the existing content from app.component.html
and replace it with:
<inspinia-template>
</inspinia-template>
This will insert the output of the inspinia template into the root of the application's HTML Document. At this stage, if you compile and run the application, you should see a header, a left-side navigation bar, and a footer.
However, since we have not provided any content yet, each of these areas will be blank.
3. Provide Content to the Template
The inspinia template defines 'slots' where you can insert your application's content.
Each slot has an associated custom HTML attribute. To provide content to the slot, surround your content with an ng-container
tag that has the slot's attribute. All of the ng-container tags shown in the following examples should be included in the same <inspinia-template>
tag. The order of the ng-container tags is not significant.
Top Bar (Left)
The template's slot for content for the left side of the top bar is marked by the inspinia-template-topbar-nav attribute,
so add an <ng-container>
tag inside the <app-inspinia-template>
tag, add the attribute to the ng-container tag,
and place your content within it.
For example:
<ng-container inspinia-template-topbar-nav>
<h1>Authorization Requests For Faculty Search</h1>
</ng-container>
Top Bar (Right)
The template's slot for content for the left side of the top bar is marked by the inspinia-template-topbar-nav-right attribute, but is otherwise identical to the top-bar's left-justified content, as explained above.
Left Navigation Bar
The template's slot for content for the left navigation bar is marked by the inspinia-template-sidebar-nav attribute,
so add an <ng-container>
tag inside the <inspinia-template>
tag, add the attribute to the ng-container tag,
and place your content within it.
Each item here is expected to be a list item. For example:
<ng-container inspinia-template-sidebar-nav>
<li><a [routerLink]="['/pageOne']">Page One</a></li>
<li><a [routerLink]="['/pageTwo']">Page Two</a></li>
</ng-container>
Main Content
The template's slot for the application's main content is marked by the inspinia-template-content attribute.
An Angular application's main content is typically produced inside a <router-outlet>
tag.
So, to insert the application's main content into the template's main content slot, you will typically use:
<ng-container inspinia-template-content>
<router-outlet></router-outlet>
</ng-container>
Footer
The template's slot for the footer is marked by the inspinia-template-footer attribute. Content within the footer is free-form. Example:
<ng-container inspinia-template-footer>
<div class="pull-right">
<p>
<a href="mailto:dofjobs@princeton.edu">
<span class="fa fa-question-circle"></span> dofjobs@princeton.edu
</a>
<a href="http://www.princeton.edu/"><span id="footer-www-link">www.princeton.edu</span></a>
</p>
</div>
<div style="margin-top: 5px;">
© 2016 The Trustees of Princeton University
</div>
</ng-container>