Angular Material Design Admin Template

created: 31/08/2018
latest update: 23/10/2018
by: ThemeSeason
email: admin@themeseason.com

Hello everyone!

Thank you for purchasing my template. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Installation

Prerequisites

Although Annular can be run without any development experience, it would be much easier if you already have some. The following instructions allow you to run a local copy on your machine.

Install tools

If you have not yet installed nodejs, please Download and globally install nodejs : https://nodejs.org
Note: download Recommended For Most Users version

A detailed instruction on how to install NodeJS is available here.

After installing NodeJS there is just one thing left to do: Simply install Typings globally by running the command npm install -g typings and wait for npm to do the dirty work.

Note: Make sure you have Node version >= 4.0 and NPM >= 3 . Also globally installed typescript.

Installing Angular-CLI globally is as simple as running this simple command: npm install -g @angular/cli@latest

After the tools is installed, go inside of the template directory and install dependencies:

Run npm install to install node dependencies defined in package.json.

Running local copy

To run a local copy in development mode, execute ng serve and go to http://localhost:4200 in your browser.

To run the local copy in production mode and build the sources, execute ng build --prod. This will builds a production version of the application. All html,css and js code is minified and put to dist folder. The contents of this folder you can to put to your production server when publishing the application.

Project Structure

The directory structure of this template is as follows:

Annular/ 
   ├──src/                       		* source files that will be compiled to javascript
   │   ├──tslint.json	     	 		* configuration file of TSLint
   │   │
   │   ├──tsconfig.app.json 	 		* config app for typescript
   │   │
   │   ├──tsconfig.spec.json	 		* config spec for typescript
   │   │
   │   ├──test.ts                		* test
   │   │
   │   ├──styles.scss            		* globally stylesheet
   │   │
   │   ├──index.html            		* application layout
   │   │
   │   ├──main.ts                		* entry file for our browser environment
   │   │
   │   ├──polyfills.ts           		* polyfills file
   │   │
   │   ├──favicon.ico            		* favicon 
   │   │
   │   ├──app/                   		* application code - our working directory
   │   │   │
   │   │   ├──app.component.ts   		* main application component
   │   │   │
   │   │   ├──app.component.html 	  	* main application html file
   │   │   │
   │   │   ├──app.component.scss 		* main application styles
   │   │   │
   │   │   ├──app.module.ts      		* main application module
   │   │   │
   │   │   ├──app.routing.ts     		* application routes
   │   │   │  
   │   │   ├──app.settings.model.ts		* application settings model
   │   │   │  
   │   │   ├──app.settings.ts    		* application settings data
   │   │   │
   │   │   ├──pages/             		* application pages components, place where you can create pages and fill them with components
   │   │   │
   |   │   ├──shared/             		* shared modules folder
   │   │   │
   │   │   └──theme/             		* template global components/directives/pipes/styles and utils
   │   │
   │   ├──environments/         		* environments
   │   └──assets/                		* static assets are served here
   │ 
   ├──e2e/                       		* will be used for end-to-end tests to ensure functionality for users before deploying
   ├──angular.json                              * used for configuration of project specific settings
   ├──README.md                  		* read me file
   ├──tsconfig.json              		* config for typescript
   ├──package.json               		* contains all dependencies used for production and development
   └──tslint.json                		* Angular-CLI includes an automatic Typescript-Linter, which can be configured with this file

In our template we tried to separate the theme layer and presentation layer. We believe most of other templates have them combined. That’s why when you start developing using them, it gets very hard for you to remove things you don’t need.

Changing Skin Color

We tried to make the process of skin color customization as easy as possible.

By default Annular has 8 built-in skin color: indigo-light (default), teal-light, red-light, gray-light, blue-dark, green-dark, pink-dark and gray-dark.

For change the skin color of theme do the following:

Open src\app\app.settings.ts file.
On this file you find skin 'indigo-light'
Change this line with another skin color name, for example: 'blue-dark'

If you want to create your own skin color, please do the following:

Create new skin color scss file in src\app\theme\styles\skins folder, for example: _purple.scss .
Copy content of src\app\theme\styles\skins\_indigo.scss to src\app\theme\styles\skins\_purple.scss .

After this you must change values of variables in _purple.scss, (you can choose colors from material colors):

    $purple-primary: mat-palette($mat-purple, 800, 300, 900);
    $purple-accent: mat-palette($mat-light-blue, 600, 300, 900);
    $purple-warn: mat-palette($mat-red, A200);
    $purple-theme: mat-light-theme($purple-primary, $purple-accent, $purple-warn);

Open src\app\theme\styles\_theme.scss file and add new line to .app class :

    .app{
        ...
        &.purple{
            @import "skins/purple";        
            @include angular-material-theme($purple-theme);
            @include theme-reset($purple-theme);
        }
        ...
    }

Finally change the skin color of theme (how to change the skin color of theme? this was explained to little over the top).

Create New Page

Annular uses Angular Component Router for navigation.

To generate our first component we simply open up a terminal and navigate in our app. Now we simply run ng g component client and we get a new component in /src/app/client with the following files:

client.component.ts
client.component.html
client.component.css
client.component.spec.ts

The files client.component.ts and client.component.spec.ts contain the most code, the other files only contain placeholders.

By executing this short command, we just saved ourselves a lot of time creating all these Component files and boilerplate code. Syntax for all commands are available here.

To create a new page without angular-cli, do the following:

Create a new folder for our new page inside of src/app/pages. We can call the folder new.
Then let’s create a blank angular component for our page called new.component.ts inside of src/app/pages/new:
```
import {Component} from '@angular/core';

@Component({
  selector: 'new',
  template: `My page content here`
})
export class NewComponent {
  constructor() {}
}
```
This will create a simple Angular component. For more detail please check out official Angular documentation.

Then open src/app/app.module.ts file and import new.component.ts in it

import { NewComponent } from './pages/new/new.component';

and declare it:

@NgModule({
  imports: [
    ......
  ],
  declarations: [
    ......,
    NewComponent,
    ......
  ]
})

After that open src/app/app.routing.ts file and import new.component.ts in it

import { NewComponent } from './pages/new/new.component';

and create routing for this page:

export const routes: Routes = [ 
    {
        path: '', 
        component: PagesComponent,
        children:[
            .....
            { path: 'new', component: NewComponent, data: { breadcrumb: 'New page' } }
            .....
        ]
    }
];

The final thing we need to do is to declare a route in src/app/theme/components/menu/menu.ts.
```
export const verticalMenuItems = [ 
	......
	new Menu (250, 'New Page', '/new', null, 'create_new_folder', null, false, 0),
	......
];
```
Note : for menu icon you must use material icons
And that’s it! Now your page is available by the following this url http://localhost:4200/pages/new. Plus, your page is registered inside the sidebar menu. If you don’t want to have a link in the menu, just remove the menu declaration from the src/app/theme/components/menu/menu.ts file.

To allow for the URL to automatically route to the appropriate component on an Apache server like the internal ng serve server, you need to create a .htaccess file that routes all requests to the index.html file. Here is an example how we did it on our demo-page:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
</IfModule>

Support and Feedback

All questions you can send via the contact form HERE.

I answer all questions every day from Monday to Friday from 8:00 to 18:00 (GMT+4) within 24-48h in the order they were received.

Please do not panic if I do not answer too long – I love my buyers and I’ll answer for all questions ;)

Support for my items includes:

Answering questions about how to use the item.
Answering technical questions about the item (and included third party assets).
Help with defects in the item or included third party assets.
Item updates to ensure ongoing compatibility and to resolve security vulnerabilities.

Item support does not include:

Installation of the item.
Hosting, server environment, or software.
Support for third party plug-ins.
Plugins integration.
Support for issues caused by user modifications in the theme’s code, styling and general functionality.

More information about the terms of support you can see here: https://themeforest.net/page/item_support_policy

Conclusion

Thank you for your purchase!

Thanks for reading the Instruction, hope it’s been really helpful and resolved most of your concerns.

Annular