ng2-admin-lte

Bootstraping of Angular2 with AdminLTE dashboard template

Installation

npm install
npm start

Developpement

Ajouter un composant

cd src/app/widgets/
ng g component my-new-widget

Ajouter une page

cd src/app/pages/
ng g component my-new-page

Ajouter un service

cd src/app/services/
ng g service my-new-service

Changelog 13/10/2016

Updated to Angular 2.1
Updated to Angular-cli webpack beta 17
Fix: Build issues, rigth nav issue
Add: Second page for routing example

Components from Ng2-bootstrap

For standard boostrap widget we are using ng2-bootstrap

You can find all widget and the doc here: http://valor-software.com/ng2-bootstrap/#/alerts

Specific Components

App Header

This widget handle the header bar, it includes other 'box' widgets for the top navigation:

Messages Box
Notification Box
Tasks Box
User box

Messages Box

This widget is registred to the messages service

Notification Box

WIP This widget is registred to the notification service

Tasks Box

WIP This widget is registred to the task service

User box

This widget is registred to the user service (for the current user display)

Menu Aside

This widget handle the left navigation Menu

It is registred to the user service (for the current user display)

Models

User

firstname: string, First Name of the user
lastname : string, Last Name of the user
email : string, Email address of the user
avatar_url : string, URL for the user avatar, could be absolute or relative
creation_date : string, timestamp of the creation of the user

Message

title : string, title of the message
content : string, content of the mesage
author : User, source user of the message
destination : User, destination user of the message
date : string, date of sending

Services

User service

This service is used to send/get the current user informations accross the app

For example you can set the current user :

import {User} from "../../models/user";
import {UserService} from "../../services/user.service";
...
constructor(
  private _user_serv: UserService
){
...
ngOnInit(){
  let user = new User({
    firstname: "WEBER",
    lastname: "Antoine",
    email: "why-not-yop@yopmail.com",
    avatar_url: "assets/img/user2-160x160.jpg"
  });
  this._user_serv.setCurrentUser( user );

and you can get the user in a widget:

import {User} from "../../models/user";
import {UserService} from "../../services/user.service";
...
private current_user: User;
constructor(
  private _user_serv : UserService,
){
  //se connecter au modification du user courant
  this._user_serv.current_user.subscribe((user: User) => this.current_user = user);

warning, the import path are relative to the component you're writing in ...

pmcgriff/ng2-admin-lte