Skip to content
No description, website, or topics provided.
JavaScript HTML CSS Other
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode init repo Feb 26, 2016
src v1.2.0 Mar 8, 2016
typings signup module & validations on login & signup Feb 29, 2016
.gitignore init repo Feb 26, 2016
CHANGELOG.md v1.2.0 Mar 8, 2016
CONTRIBUTING.md contribution message Mar 2, 2016
LICENSE init repo Feb 26, 2016
README.md v1.2.0 Mar 8, 2016
index.html version 1.1.0 Mar 7, 2016
package.json v1.2.0 Mar 8, 2016
tsconfig.json init repo Feb 26, 2016
typings.json

README.md

angular2-dashboard-starter

Ready to use dashboard starter/seed project based on Angular 2 and AdminLTE bootstrap theme.

MIT license dependencies up to date Stack Share

##Features

  • Angular 2 version 2.0.0-beta.8 using Typescript
  • Live reload & compile
  • Login module with input validations (Utilizes src/login.json)
  • Signup module with input validations
  • Auth module to protect dashboard pages
  • Environmental Configuration settings
  • Dashboard Layout as a separate directive
  • Best open source admin dashboard & control panel bootstrap theme 'AdminLTE 2' by Abdullah Almsaeed.

Installation

  1. Checkout this repo in a folder make sure to give root permissions.
  2. Run npm install once to install app dependencies.
  3. Run npm start in a separate terminal window to start the server and launch the app.

Protect Routes

import { ComponentInstruction, CanActivate } from 'angular2/router';
import { checkAuth } from '../auth/check_auth';

// just include this code above your component class
@CanActivate((next: ComponentInstruction, previous: ComponentInstruction) => {
  return checkAuth(next, previous);
})

Easy to use Dashboard Layout in your templates

Use DashboardLayout directive in your component's template to use dashboard layout. This makes easy to comply views with or without layout like login, signup and error pages etc.

<dashboard-layout pageTitle="Home" pageSubtitle="Your personalized dashboard and control panel">
    <div class="home">
      <!--- Your template code -->
    </div>
</dashboard-layout>

Configuration

Environmental files are located in src/app/config/ folder in json format. You can create your own environments and set the one to use in env.json file. Config files are loaded after the route hits and before everything is initiated therefore, available throughout in application as a service.

import {Config} from '../../config/config';

@Injectable()
export class Foo {

    constructor(private _http: Http, private _config: Config) {
      var apiUrl = _config.get('apiUrl');   // from development.json
      var env = _config.getEnv('env');      // from env.json (also holds shared config)
    }
}

Config class also ships with methods to store and get application wide custom settings.

import {Config} from '../../config/config';

@Injectable()
export class Foo {

    constructor(private _http: Http, private _config: Config) {
      _config.setCustom('isMember', true);
    }
}

export class Bar {

    constructor(private _config: Config) {
      var isMember = _config.getCustom('isMember');
    }
}

Use jQuery

jQuery being installed as typings dependency. This mean jQuery will be available as static object in your ts.

declare var jQuery: JQueryStatic;
// now use jQuery as you normally use

Help me make it better by your contribution.

@author Hasan Hameed hasan.hameed07@gmail.com

You can’t perform that action at this time.