Prepare client app
This commit is contained in:
parent
3d446a26ad
commit
bd324a6692
15 changed files with 105 additions and 44 deletions
6
client/.gitignore
vendored
6
client/.gitignore
vendored
|
@ -1,5 +1,5 @@
|
|||
typings
|
||||
app/**/*.js
|
||||
app/**/*.map
|
||||
components/**/*.js
|
||||
components/**/*.map
|
||||
stylesheets/index.css
|
||||
app/*.css
|
||||
components/**/*.css
|
||||
|
|
|
@ -1 +0,0 @@
|
|||
<h1>{{ title }}</h1>
|
|
@ -1,3 +0,0 @@
|
|||
h1 {
|
||||
font-size: 100px;
|
||||
}
|
|
@ -1,10 +0,0 @@
|
|||
import {Component} from 'angular2/core';
|
||||
|
||||
@Component({
|
||||
selector: 'my-app',
|
||||
templateUrl: 'app/app.component.html',
|
||||
styleUrls: [ 'app/app.component.css' ]
|
||||
})
|
||||
export class AppComponent {
|
||||
title = "coucou";
|
||||
}
|
|
@ -1,4 +0,0 @@
|
|||
import {bootstrap} from 'angular2/platform/browser'
|
||||
import {AppComponent} from './app.component'
|
||||
|
||||
bootstrap(AppComponent);
|
23
client/components/app/app.component.html
Normal file
23
client/components/app/app.component.html
Normal file
|
@ -0,0 +1,23 @@
|
|||
<div class="container">
|
||||
<div class="row">
|
||||
<menu class="col-md-2">
|
||||
<div id="panel_get_videos" class="panel_button">
|
||||
<a [routerLink]="['VideosList']" class="glyphicon glyphicon-list">Get videos</a>
|
||||
</div>
|
||||
|
||||
<div id="panel_upload_video" class="panel_button">
|
||||
<a [routerLink]="['VideosAdd']" class="glyphicon glyphicon-cloud-upload">Upload a video</a>
|
||||
</div>
|
||||
|
||||
<div id="panel_make_friends" class="panel_button">
|
||||
<a (click)='makeFriends()' class="glyphicon glyphicon-user">Make friends</a>
|
||||
</div>
|
||||
|
||||
<div id="panel_quit_friends" class="panel_button">
|
||||
<a (click)='quitFriends()' class="glyphicon glyphicon-plane">Quit friends</a>
|
||||
</div>
|
||||
</menu>
|
||||
|
||||
<router-outlet class="col-md-9"></router-outlet>
|
||||
</div>
|
||||
</div>
|
0
client/components/app/app.component.scss
Normal file
0
client/components/app/app.component.scss
Normal file
43
client/components/app/app.component.ts
Normal file
43
client/components/app/app.component.ts
Normal file
|
@ -0,0 +1,43 @@
|
|||
import {Component} from 'angular2/core';
|
||||
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
|
||||
|
||||
import { VideosAddComponent } from '../videos/add/videos-add.component';
|
||||
import { VideosListComponent } from '../videos/list/videos-list.component';
|
||||
import { VideosWatchComponent } from '../videos/watch/videos-watch.component';
|
||||
|
||||
@RouteConfig([
|
||||
{
|
||||
path: '/videos/list',
|
||||
name: 'VideosList',
|
||||
component: VideosListComponent,
|
||||
useAsDefault: true
|
||||
},
|
||||
{
|
||||
path: '/videos/watch/:id',
|
||||
name: 'VideosWatch',
|
||||
component: VideosWatchComponent
|
||||
},
|
||||
{
|
||||
path: '/videos/add',
|
||||
name: 'VideosAdd',
|
||||
component: VideosAddComponent
|
||||
}
|
||||
])
|
||||
|
||||
@Component({
|
||||
selector: 'my-app',
|
||||
templateUrl: 'app/components/app/app.component.html',
|
||||
styleUrls: [ 'app/components/app/app.component.css' ],
|
||||
directives: [ ROUTER_DIRECTIVES ],
|
||||
providers: [ ROUTER_PROVIDERS ]
|
||||
})
|
||||
|
||||
export class AppComponent {
|
||||
makeFriends() {
|
||||
alert('make Friends');
|
||||
}
|
||||
|
||||
quitFriends() {
|
||||
alert('quit Friends');
|
||||
}
|
||||
}
|
4
client/components/bootstrap.ts
Normal file
4
client/components/bootstrap.ts
Normal file
|
@ -0,0 +1,4 @@
|
|||
import { bootstrap } from 'angular2/platform/browser';
|
||||
import { AppComponent } from './app/app.component';
|
||||
|
||||
bootstrap(AppComponent);
|
1
client/components/videos/add/videos-add.component.ts
Normal file
1
client/components/videos/add/videos-add.component.ts
Normal file
|
@ -0,0 +1 @@
|
|||
export class VideosAddComponent {}
|
1
client/components/videos/list/videos-list.component.ts
Normal file
1
client/components/videos/list/videos-list.component.ts
Normal file
|
@ -0,0 +1 @@
|
|||
export class VideosListComponent {}
|
1
client/components/videos/watch/videos-watch.component.ts
Normal file
1
client/components/videos/watch/videos-watch.component.ts
Normal file
|
@ -0,0 +1 @@
|
|||
export class VideosWatchComponent {}
|
|
@ -6,27 +6,29 @@
|
|||
|
||||
<!-- 1. Load libraries -->
|
||||
<!-- IE required polyfills, in this exact order -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
|
||||
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
|
||||
<script src="app/node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="app/node_modules/systemjs/dist/system-polyfills.js"></script>
|
||||
<script src="app/node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
|
||||
|
||||
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system.src.js"></script>
|
||||
<script src="node_modules/rxjs/bundles/Rx.js"></script>
|
||||
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
|
||||
<script src="node_modules/angular2/bundles/router.dev.js"></script>
|
||||
<script src="app/node_modules/angular2/bundles/angular2-polyfills.js"></script>
|
||||
<script src="app/node_modules/systemjs/dist/system.src.js"></script>
|
||||
<script src="app/node_modules/rxjs/bundles/Rx.js"></script>
|
||||
<script src="app/node_modules/angular2/bundles/angular2.dev.js"></script>
|
||||
<script src="app/node_modules/angular2/bundles/router.dev.js"></script>
|
||||
|
||||
<!-- 2. Configure SystemJS -->
|
||||
<script>
|
||||
System.config({
|
||||
packages: {
|
||||
app: {
|
||||
format: 'register',
|
||||
defaultExtension: 'js'
|
||||
components: {
|
||||
format: 'register',
|
||||
defaultExtension: 'js'
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
System.import('app/main')
|
||||
System.import('app/components/bootstrap')
|
||||
.then(null, console.error.bind(console));
|
||||
</script>
|
||||
|
||||
|
|
18
package.json
18
package.json
|
@ -20,18 +20,18 @@
|
|||
"build": "concurrently \"npm run client:sass\" \"npm run client:tsc\"",
|
||||
"client:clean": "concurrently \"npm run client:tsc:clean\" \"npm run client:sass:clean\"",
|
||||
"client:sass:index": "npm run client:sass:index:clean && cd client && node-sass --include-path node_modules/bootstrap-sass/assets/stylesheets/ stylesheets/application.scss stylesheets/index.css",
|
||||
"client:sass:index:watch": "npm run client:sass:index:clean && cd client && node-sass -w --include-path node_modules/bootstrap-sass/assets/stylesheets/ stylesheets/application.scss stylesheets/index.css",
|
||||
"client:sass:index:watch": "cd client && node-sass -w --include-path node_modules/bootstrap-sass/assets/stylesheets/ stylesheets/application.scss stylesheets/index.css",
|
||||
"client:sass:index:clean": "cd client && rm -f stylesheets/index.css",
|
||||
"client:sass:app": "cd client && node-sass app/ --output app/",
|
||||
"client:sass:app:watch": "cd client && node-sass -w app/ --output app/",
|
||||
"client:sass:app:clean": "cd client && rm -f app/*.css",
|
||||
"client:sass": "concurrently \"npm run client:sass:index\" \"npm run client:sass:app\"",
|
||||
"client:sass:watch": "concurrently \"npm run client:sass:index:watch\" \"npm run client:sass:app:watch\"",
|
||||
"client:sass:clean": "concurrently \"npm run client:sass:index:clean\" \"npm run client:sass:app:clean\"",
|
||||
"client:sass:components": "cd client && node-sass components/ --output components/",
|
||||
"client:sass:components:watch": "cd client && node-sass -w components/ --output components/",
|
||||
"client:sass:components:clean": "cd client && rm -f components/**/*.css",
|
||||
"client:sass": "concurrently \"npm run client:sass:index\" \"npm run client:sass:components\"",
|
||||
"client:sass:watch": "concurrently \"npm run client:sass:index:watch\" \"npm run client:sass:components:watch\"",
|
||||
"client:sass:clean": "concurrently \"npm run client:sass:index:clean\" \"npm run client:sass:components:clean\"",
|
||||
"client:tsc": "cd client && npm run tsc",
|
||||
"client:tsc:watch": "cd client && npm run tsc:w",
|
||||
"client:tsc:clean": "cd client && rm -f app/*.js app/*.js.map",
|
||||
"dev": "concurrently \"npm run livereload\" \"npm run client:tsc:watch\" \"npm run client:sass:watch\" \"npm start\"",
|
||||
"client:tsc:clean": "cd client && rm -f components/**/*.js components/**/*.js.map",
|
||||
"dev": "npm run build && concurrently \"npm run livereload\" \"npm run client:tsc:watch\" \"npm run client:sass:watch\" \"npm start\"",
|
||||
"livereload": "livereload ./client",
|
||||
"start": "node server",
|
||||
"test": "standard && mocha server/tests"
|
||||
|
|
10
server.js
10
server.js
|
@ -66,13 +66,17 @@ app.use(require('connect-livereload')({
|
|||
// Catch sefaults
|
||||
require('segfault-handler').registerHandler()
|
||||
|
||||
// Static files
|
||||
app.use(express.static(path.join(__dirname, '/client'), { maxAge: 0 }))
|
||||
|
||||
// API routes
|
||||
var api_route = '/api/' + constants.API_VERSION
|
||||
app.use(api_route, routes.api)
|
||||
|
||||
// Static files
|
||||
app.use('/app', express.static(path.join(__dirname, '/client'), { maxAge: 0 }))
|
||||
// 404 for static files not found
|
||||
app.use('/app/*', function (req, res, next) {
|
||||
res.sendStatus(404)
|
||||
})
|
||||
|
||||
// Client application
|
||||
app.use('/*', function (req, res, next) {
|
||||
res.sendFile(path.join(__dirname, 'client/index.html'))
|
||||
|
|
Loading…
Reference in a new issue