inspinia-template

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://[e-mail]/richf_princeton/inspinia-template.git

or

yarn add git+https://[e-mail]/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:[e-mail]">
        	<span class="fa fa-question-circle"></span> [e-mail]
        </a>
        <a href="http://www.princeton.edu/"><span id="footer-www-link">www.princeton.edu</span></a>
      </p>
    </div>
    <div style="margin-top: 5px;">
      &#169; 2016 The Trustees of Princeton University
    </div>
  </ng-container>