Skip to content

Commit

Permalink
initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@lazabogdan
lazabogdan committed May 17, 2016
0 parents commit 9e5d199
Show file tree
Hide file tree
Showing 22 changed files with 680 additions and 0 deletions.
5 changes: 5 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
node_modules/
typings/
assets/css
assets/js
assets/vendor
9 changes: 9 additions & 0 deletions .surgeignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
node_modules/
app/
typings/
bs-config.json
package.json
tsconfig.json
typings.json
gulpfile.js
*.md
40 changes: 40 additions & 0 deletions 200.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>adminplus-boilerplate-angular2 demo</title>

<!-- Enable pushState routing -->
<base href="/">

<!-- Prevent the demo from appearing in search engines (REMOVE THIS) -->
<meta name="robots" content="noindex">

<!-- Material Design Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-- Simplebar.js CSS -->
<link type="text/css" href="assets/vendor/simplebar.css" rel="stylesheet">

<!-- App CSS (includes vendor) -->
<link type="text/css" href="assets/css/app.css" rel="stylesheet">

<!-- SystemJS -->
<script src="assets/vendor/system.src.js"></script>

<!-- SystemJS Builder Production Bundle -->
<script src="assets/js/app.bundle.js"></script>

<!-- SystemJS Config -->
<script src="systemjs.config.js"></script>

</head>
<body>
<app>Loading ...</app>

<!-- Start App -->
<script>System.import('app').then(null, console.error.bind(console));</script>
</body>
</html>
1 change: 1 addition & 0 deletions CNAME
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
adminplus-boilerplate-angular2.themekit.io
57 changes: 57 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
# adminplus-boilerplate-angular2
> Angular2 boilerplate using [AdminPlus Lite](https://github.com/themekit/adminplus), [Bootstrap Layout](https://github.com/themekit/bootstrap-layout) and [ng2-bootstrap-layout](https://github.com/themekit/ng2-bootstrap-layout).
### Demo
> You can [see a working live demo](http://adminplus-boilerplate-angular2.themekit.io) of this boilerplate.
## Usage

### Clone the boilerplate repository
```bash
git clone https://github.com/themekit/adminplus-boilerplate-angular2.git my-project
```
```bash
cd my-project
```

### Install dependencies
> Install `gulp`:
```bash
npm install -g gulp
```

> Install application dependencies:
```bash
npm install
```

### Development server
> The following will make an initial build and then serve the application on `http://localhost:3000`.
> It will also watch `./app/**/*.ts` and recompile the TypeScript to `./assets/js`, watch `./assets/sass/**/*` and recompile the Sass to `./assets/css` and watch `index.html`, `systemjs.config.js`, `./assets/**/*.js` and `./assets/**/*.css` files and inject any changes into your browser automatically.
```bash
npm start
```

### Development build

```bash
gulp build
```

### Production build

```bash
NODE_ENV=production gulp release
```

#### Load production bundle
> To use the production bundle, uncomment the following in `./index.html`, before the call to `System.import('app')`:
```html
<!-- Production Bundle -->
<script src="assets/js/app.bundle.js"></script>
```
24 changes: 24 additions & 0 deletions app/app.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { Component, OnInit } from '@angular/core';
import { Router, Routes, ROUTER_DIRECTIVES } from '@angular/router';
import { HomePage } from './home/index';
import { SidebarPage } from './sidebar/index';

@Component({
selector: 'app',
template: `<router-outlet></router-outlet>`,
directives: [
ROUTER_DIRECTIVES
]
})

@Routes([
{ path: '/home', component: HomePage },
{ path: '/sidebar', component: SidebarPage }
])

export class AppComponent implements OnInit {
constructor(private router: Router) {}
ngOnInit() {
this.router.navigate(['/home']);
}
}
53 changes: 53 additions & 0 deletions app/home/home.page.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
import { LayoutComponent, NavbarComponent } from 'ng2-bootstrap-layout';
import { HelloWorldComponent } from '../shared/index';
import { RouterActiveDirective } from 'ng2-router-active';

@Component({
selector: 'home-page',
template: `
<ng2-bl-layout layout-type="fixed">
<ng2-bl-navbar>
<div class="container">
<!-- Navbar toggle -->
<button class="navbar-toggler hidden-md-up pull-xs-right last-child-xs" type="button" data-toggle="collapse" data-target="#navbar"><span class="material-icons">menu</span></button>
<!-- Brand -->
<a class="navbar-brand" [routerLink]="['/home']">Brand</a>
<!-- Collapse -->
<div class="collapse navbar-toggleable-xs" id="navbar">
<ul class="nav navbar-nav">
<li class="nav-item" ng2-router-active><a class="nav-link" [routerLink]="['/home']">Fixed</a></li>
<li class="nav-item" ng2-router-active><a class="nav-link" [routerLink]="['/sidebar']">Sidebar</a></li>
</ul>
</div>
<!-- // END Collapse -->
</div>
</ng2-bl-navbar>
<!-- Breadcrumb -->
<ol class="breadcrumb">
<li><a [routerLink]="['/home']">AdminPlus</a></li>
<li class="active">Fixed layout</li>
</ol>
<!-- // END Breadcrumb -->
<hello-world></hello-world>
</ng2-bl-layout>
`,
directives: [
ROUTER_DIRECTIVES,
LayoutComponent,
NavbarComponent,
HelloWorldComponent,
RouterActiveDirective
]
})

export class HomePage {}
1 change: 1 addition & 0 deletions app/home/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './home.page';
22 changes: 22 additions & 0 deletions app/main.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
// Angular dependencies
import 'es6-shim';
import 'zone.js';
import 'reflect-metadata';

// App dependencies
import 'jquery';
import 'simplebar';
import 'tether';
import 'bootstrap';

// Bootstrap application
import { bootstrap } from '@angular/platform-browser-dynamic';
import { ROUTER_PROVIDERS } from '@angular/router';
import { AppComponent } from './app.component';

// @if NODE_ENV='production'
import { enableProdMode } from '@angular/core';
enableProdMode();
// @endif

bootstrap(AppComponent, [ROUTER_PROVIDERS]);
16 changes: 16 additions & 0 deletions app/shared/hello-world.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { Component } from '@angular/core';

@Component({
selector: 'hello-world',
template: `
<h1>Hello World</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae ea ullam iusto asperiores repellat perspiciatis error. Quo praesentium, expedita neque natus quisquam iure consequuntur unde hic doloribus ab voluptas pariatur!</p>
<div class="card card-block">
This is a demo for the <a target="_blank" href="https://github.com/themekit/adminplus-boilerplate-angular2">adminplus-boilerplate-angular2</a> repository, using <a target="_blank" href="https://github.com/themekit/adminplus">AdminPlus Lite</a> and <a target="_blank" href="https://github.com/themekit/bootstrap-layout">Bootstrap Layout</a> with Angular 2.
</div>
`
})

export class HelloWorldComponent {}
1 change: 1 addition & 0 deletions app/shared/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './hello-world.component';
1 change: 1 addition & 0 deletions app/sidebar/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './sidebar.page';
79 changes: 79 additions & 0 deletions app/sidebar/sidebar.page.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
import { LayoutComponent, NavbarComponent, SidebarComponent, SidebarToggleDirective } from 'ng2-bootstrap-layout';
import { Sidebar, SidebarToggle } from 'bootstrap-layout';
import { HelloWorldComponent } from '../shared/hello-world.component';
import { RouterActiveDirective } from 'ng2-router-active';

@Component({
selector: 'sidebar-page',
template: `
<ng2-bl-layout layout-type="fluid">
<ng2-bl-navbar navbar-class="navbar-light bg-white">
<!-- Navbar toggle -->
<button class="navbar-toggler hidden-md-up pull-xs-right last-child-xs" type="button" data-toggle="collapse" data-target="#navbar"><span class="material-icons">menu</span></button>
<!-- Sidebar toggle -->
<button class="navbar-toggler pull-xs-left" type="button" ng2-bl-sidebar-toggle data-target="#sidebar"><span class="material-icons">menu</span></button>
<!-- Brand -->
<span class="navbar-brand">Dashboard</span>
<!-- Collapse -->
<div class="collapse navbar-toggleable-xs" id="navbar">
<ul class="nav navbar-nav">
<li class="nav-item" ng2-router-active><a class="nav-link" [routerLink]="['/home']">Fixed</a></li>
<li class="nav-item" ng2-router-active><a class="nav-link" [routerLink]="['/sidebar']">Sidebar</a></li>
</ul>
</div>
<!-- // END Collapse -->
</ng2-bl-navbar>
<ng2-bl-sidebar sidebar-id="sidebar">
<!-- Brand -->
<a [routerLink]="['/home']" class="sidebar-brand m-b-0 sidebar-brand-bg sidebar-brand-border">Brand</a>
<!-- Menu -->
<ul class="sidebar-menu sm-active-button-bg">
<li class="sidebar-menu-item" ng2-router-active>
<a class="sidebar-menu-button" [routerLink]="['/home']"><i class="sidebar-menu-icon material-icons">home</i> Fixed layout</a>
</li>
<li class="sidebar-menu-item" ng2-router-active>
<a class="sidebar-menu-button" [routerLink]="['/sidebar']"><i class="sidebar-menu-icon material-icons">menu</i> Sidebar layout</a>
</li>
</ul>
<!-- // END Menu -->
</ng2-bl-sidebar>
<!-- Breadcrumb -->
<ol class="breadcrumb">
<li><a [routerLink]="['/home']">AdminPlus</a></li>
<li class="active">Sidebar layout</li>
</ol>
<!-- // END Breadcrumb -->
<hello-world></hello-world>
</ng2-bl-layout>
`,
directives: [
ROUTER_DIRECTIVES,
LayoutComponent,
NavbarComponent,
SidebarToggleDirective,
SidebarComponent,
HelloWorldComponent,
RouterActiveDirective
],
providers: [
Sidebar,
SidebarToggle
]
})

export class SidebarPage {}
14 changes: 14 additions & 0 deletions assets/sass/_variables.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
// MATERIAL DESIGN COLORS
@import 'sass-md-colors/colors/variables';

// CUSTOMIZE VARIABLES
$brand-primary: $blue-500;

// ADMINPLUS LITE
@import 'adminplus/sass/variables';

// BOOTSTRAP LAYOUT
@import 'bootstrap-layout/src/sass/variables';

// BOOTSTRAP LAYOUT SCROLLABLE
@import 'bootstrap-layout-scrollable/src/sass/variables';
11 changes: 11 additions & 0 deletions assets/sass/app.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
// VARIABLES
@import './variables';

// BOOTSTRAP
@import 'adminplus/sass/style';

// BOOTSTRAP LAYOUT
@import 'bootstrap-layout/src/sass/style';

// BOOTSTRAP LAYOUT SCROLLABLE
@import 'bootstrap-layout-scrollable/src/sass/style';
9 changes: 9 additions & 0 deletions bs-config.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"port": 3000,
"files": [
"index.html",
"systemjs.config.js",
"./assets/**/*.{css,js}"
],
"server": { "baseDir": "./" }
}
Loading

0 comments on commit 9e5d199

Please sign in to comment.