Follow the angular styleguide for the directories structure

pull/10/head
Chocobozzz 2016-05-27 16:23:10 +02:00
parent 157cb9c971
commit 41a2aee38c
59 changed files with 177 additions and 137 deletions

8
client/.gitignore vendored
View File

@ -1,6 +1,8 @@
typings
angular/**/*.js
angular/**/*.map
angular/**/*.css
app/**/*.js
app/**/*.map
app/**/*.css
stylesheets/index.css
bundles
main.js
main.js.map

View File

@ -1,17 +1,20 @@
import { Component } from '@angular/core';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, Router } from '@angular/router-deprecated';
import { HTTP_PROVIDERS } from '@angular/http';
import { RouteConfig, Router, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';
import { VideosAddComponent } from '../videos/components/add/videos-add.component';
import { VideosListComponent } from '../videos/components/list/videos-list.component';
import { VideosWatchComponent } from '../videos/components/watch/videos-watch.component';
import { VideosService } from '../videos/videos.service';
import { FriendsService } from '../friends/services/friends.service';
import { UserLoginComponent } from '../users/components/login/login.component';
import { AuthService } from '../users/services/auth.service';
import { AuthStatus } from '../users/models/authStatus';
import { SearchComponent } from './search.component';
import { Search } from './search';
import { FriendService } from './friends/index';
import { Search, SearchComponent } from './shared/index';
import {
UserLoginComponent,
AuthService,
AuthStatus
} from './users/index';
import {
VideoAddComponent,
VideoListComponent,
VideoWatchComponent,
VideoService
} from './videos/index';
@RouteConfig([
{
@ -22,35 +25,35 @@ import { Search } from './search';
{
path: '/videos/list',
name: 'VideosList',
component: VideosListComponent,
component: VideoListComponent,
useAsDefault: true
},
{
path: '/videos/watch/:id',
name: 'VideosWatch',
component: VideosWatchComponent
component: VideoWatchComponent
},
{
path: '/videos/add',
name: 'VideosAdd',
component: VideosAddComponent
component: VideoAddComponent
}
])
@Component({
selector: 'my-app',
templateUrl: 'app/angular/app/app.component.html',
styleUrls: [ 'app/angular/app/app.component.css' ],
templateUrl: 'client/app/app.component.html',
styleUrls: [ 'client/app/app.component.css' ],
directives: [ ROUTER_DIRECTIVES, SearchComponent ],
providers: [ ROUTER_PROVIDERS, HTTP_PROVIDERS, VideosService, FriendsService, AuthService ]
providers: [ ROUTER_PROVIDERS, HTTP_PROVIDERS, VideoService, FriendService, AuthService ]
})
export class AppComponent {
isLoggedIn: boolean;
search_field: string = name;
choices = [ ];
choices = [ ];
constructor(private _friendsService: FriendsService,
constructor(private _friendService: FriendService,
private _authService: AuthService,
private _router: Router
@ -83,7 +86,7 @@ export class AppComponent {
}
makeFriends() {
this._friendsService.makeFriends().subscribe(
this._friendService.makeFriends().subscribe(
status => {
if (status === 409) {
alert('Already made friends!');
@ -96,7 +99,7 @@ export class AppComponent {
}
quitFriends() {
this._friendsService.quitFriends().subscribe(
this._friendService.quitFriends().subscribe(
status => {
alert('Quit friends!');
},

View File

@ -3,7 +3,7 @@ import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Rx';
@Injectable()
export class FriendsService {
export class FriendService {
private _baseFriendsUrl = '/api/v1/pods/';
constructor (private http: Http) {}

View File

@ -0,0 +1 @@
export * from './friend.service';

View File

@ -0,0 +1,3 @@
export * from './search-field.type';
export * from './search.component';
export * from './search.model';

View File

@ -1,6 +1 @@
export type SearchField = "name" | "author" | "podUrl" | "magnetUri";
export interface Search {
field: SearchField;
value: string;
}

View File

@ -2,11 +2,12 @@ import { Component, EventEmitter, Output } from '@angular/core';
import { DROPDOWN_DIRECTIVES} from 'ng2-bootstrap/components/dropdown';
import { Search, SearchField } from './search';
import { Search } from './search.model';
import { SearchField } from './search-field.type';
@Component({
selector: 'my-search',
templateUrl: 'app/angular/app/search.component.html',
templateUrl: 'client/app/shared/search.component.html',
directives: [ DROPDOWN_DIRECTIVES ]
})

View File

@ -0,0 +1,6 @@
import { SearchField } from './search-field.type';
export interface Search {
field: SearchField;
value: string;
}

View File

@ -0,0 +1,2 @@
export * from './login/index';
export * from './shared/index';

View File

@ -0,0 +1 @@
export * from './login.component';

View File

@ -1,14 +1,12 @@
import { Component } from '@angular/core';
import { Router } from '@angular/router-deprecated';
import { AuthService } from '../../services/auth.service';
import { AuthStatus } from '../../models/authStatus';
import { User } from '../../models/user';
import { AuthService, AuthStatus, User } from '../shared/index';
@Component({
selector: 'my-user-login',
styleUrls: [ 'app/angular/users/components/login/login.component.css' ],
templateUrl: 'app/angular/users/components/login/login.component.html'
styleUrls: [ 'client/app/users/login/login.component.css' ],
templateUrl: 'client/app/users/login/login.component.html'
})
export class UserLoginComponent {

View File

@ -1,9 +1,9 @@
import { Injectable } from '@angular/core';
import { Http, Response, Headers, URLSearchParams, RequestOptions } from '@angular/http';
import { Headers, Http, RequestOptions, Response, URLSearchParams } from '@angular/http';
import { Observable, Subject } from 'rxjs/Rx';
import { AuthStatus } from '../models/authStatus';
import { User } from '../models/user';
import { AuthStatus } from './auth-status.model';
import { User } from './user.model';
@Injectable()
export class AuthService {

View File

@ -0,0 +1,4 @@
export * from './auth-status.model';
export * from './auth.service';
export * from './token.model';
export * from './user.model';

View File

@ -1,4 +1,4 @@
import { Token } from './token';
import { Token } from './token.model';
export class User {
username: string;

View File

@ -0,0 +1,4 @@
export * from './shared/index';
export * from './video-add/index';
export * from './video-list/index';
export * from './video-watch/index';

View File

@ -0,0 +1,5 @@
export * from './loader/index';
export * from './pagination.model';
export * from './sort-field.type';
export * from './video.model';
export * from './video.service';

View File

@ -0,0 +1 @@
export * from './loader.component';

View File

@ -2,8 +2,8 @@ import { Component, Input } from '@angular/core';
@Component({
selector: 'my-loader',
styleUrls: [ 'app/angular/videos/loader.component.css' ],
templateUrl: 'app/angular/videos/loader.component.html'
styleUrls: [ 'client/app/videos/shared/loader/loader.component.css' ],
templateUrl: 'client/app/videos/shared/loader/loader.component.html'
})
export class LoaderComponent {

View File

@ -2,14 +2,14 @@ import { Injectable } from '@angular/core';
import { Http, Response, URLSearchParams } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import { Pagination } from './pagination';
import { Video } from './video';
import { AuthService } from '../users/services/auth.service';
import { Search } from '../app/search';
import { SortField } from './components/list/sort';
import { Pagination } from './pagination.model';
import { Search } from '../../shared/index';
import { SortField } from './sort-field.type';
import { AuthService } from '../../users/index';
import { Video } from './video.model';
@Injectable()
export class VideosService {
export class VideoService {
private _baseVideoUrl = '/api/v1/videos/';
constructor (private http: Http, private _authService: AuthService) {}

View File

@ -0,0 +1 @@
export * from './video-add.component';

View File

@ -1,24 +1,23 @@
import { Component, ElementRef, OnInit } from '@angular/core';
import { Router } from '@angular/router-deprecated';
import { PROGRESSBAR_DIRECTIVES } from 'ng2-bootstrap/components/progressbar';
import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe';
import { PROGRESSBAR_DIRECTIVES } from 'ng2-bootstrap/components/progressbar';
import { AuthService } from '../../../users/services/auth.service';
import { User } from '../../../users/models/user';
import { AuthService, User } from '../../users/index';
// TODO: import it with systemjs
declare var jQuery:any;
@Component({
selector: 'my-videos-add',
styleUrls: [ 'app/angular/videos/components/add/videos-add.component.css' ],
templateUrl: 'app/angular/videos/components/add/videos-add.component.html',
styleUrls: [ 'client/app/videos/video-add/video-add.component.css' ],
templateUrl: 'client/app/videos/video-add/video-add.component.html',
directives: [ PROGRESSBAR_DIRECTIVES ],
pipes: [ BytesPipe ]
})
export class VideosAddComponent implements OnInit {
export class VideoAddComponent implements OnInit {
user: User;
fileToUpload: any;
progressBar: { value: number; max: number; } = { value: 0, max: 0 };

View File

@ -0,0 +1,3 @@
export * from './video-list.component';
export * from './video-miniature.component';
export * from './video-sort.component';

View File

@ -1,27 +1,28 @@
import { Component, OnInit } from '@angular/core';
import { ROUTER_DIRECTIVES, RouteParams, Router } from '@angular/router-deprecated';
import { Router, ROUTER_DIRECTIVES, RouteParams } from '@angular/router-deprecated';
import { PAGINATION_DIRECTIVES } from 'ng2-bootstrap/components/pagination';
import { AuthService } from '../../../users/services/auth.service';
import { Pagination } from '../../pagination';
import { User } from '../../../users/models/user';
import { VideosService } from '../../videos.service';
import { Video } from '../../video';
import {
LoaderComponent,
Pagination,
SortField,
Video,
VideoService
} from '../shared/index';
import { Search, SearchField } from '../../shared/index';
import { AuthService, User } from '../../users/index';
import { VideoMiniatureComponent } from './video-miniature.component';
import { Search, SearchField } from '../../../app/search';
import { VideoSortComponent } from './video-sort.component';
import { SortField } from './sort';
import { LoaderComponent } from '../../loader.component';
@Component({
selector: 'my-videos-list',
styleUrls: [ 'app/angular/videos/components/list/videos-list.component.css' ],
templateUrl: 'app/angular/videos/components/list/videos-list.component.html',
styleUrls: [ 'client/app/videos/video-list/video-list.component.css' ],
templateUrl: 'client/app/videos/video-list/video-list.component.html',
directives: [ ROUTER_DIRECTIVES, PAGINATION_DIRECTIVES, VideoMiniatureComponent, VideoSortComponent, LoaderComponent ]
})
export class VideosListComponent implements OnInit {
export class VideoListComponent implements OnInit {
user: User = null;
videos: Video[] = [];
pagination: Pagination = {
@ -36,7 +37,7 @@ export class VideosListComponent implements OnInit {
constructor(
private _authService: AuthService,
private _videosService: VideosService,
private _videoService: VideoService,
private _routeParams: RouteParams,
private _router: Router
) {
@ -63,9 +64,9 @@ export class VideosListComponent implements OnInit {
let observable = null;
if (this.search.value !== null) {
observable = this._videosService.searchVideos(this.search, this.pagination, this.sort);
observable = this._videoService.searchVideos(this.search, this.pagination, this.sort);
} else {
observable = this._videosService.getVideos(this.pagination, this.sort);
observable = this._videoService.getVideos(this.pagination, this.sort);
}
observable.subscribe(

View File

@ -1,15 +1,14 @@
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { DatePipe } from '@angular/common';
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router-deprecated';
import { Video } from '../../video';
import { VideosService } from '../../videos.service';
import { User } from '../../../users/models/user';
import { Video, VideoService } from '../shared/index';
import { User } from '../../users/index';
@Component({
selector: 'my-video-miniature',
styleUrls: [ 'app/angular/videos/components/list/video-miniature.component.css' ],
templateUrl: 'app/angular/videos/components/list/video-miniature.component.html',
styleUrls: [ 'client/app/videos/video-list/video-miniature.component.css' ],
templateUrl: 'client/app/videos/video-list/video-miniature.component.html',
directives: [ ROUTER_DIRECTIVES ],
pipes: [ DatePipe ]
})
@ -22,7 +21,7 @@ export class VideoMiniatureComponent {
hovering: boolean = false;
constructor(private _videosService: VideosService) {}
constructor(private _videoService: VideoService) {}
onHover() {
this.hovering = true;
@ -38,7 +37,7 @@ export class VideoMiniatureComponent {
removeVideo(id: string) {
if (confirm('Do you really want to remove this video?')) {
this._videosService.removeVideo(id).subscribe(
this._videoService.removeVideo(id).subscribe(
status => this.removed.emit(true),
error => alert(error)
);

View File

@ -1,11 +1,11 @@
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { SortField } from './sort';
import { SortField } from '../shared/index';
@Component({
selector: 'my-video-sort',
// styleUrls: [ 'app/angular/videos/components/list/video-sort.component.css' ],
templateUrl: 'app/angular/videos/components/list/video-sort.component.html'
templateUrl: 'client/app/videos/video-list/video-sort.component.html'
})
export class VideoSortComponent {

View File

@ -0,0 +1 @@
export * from './video-watch.component';

View File

@ -1,25 +1,22 @@
import { Component, OnInit, ElementRef } from '@angular/core';
import { RouteParams, CanDeactivate, ComponentInstruction } from '@angular/router-deprecated';
import { Component, ElementRef, OnInit } from '@angular/core';
import { CanDeactivate, ComponentInstruction, RouteParams } from '@angular/router-deprecated';
import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe';
import { LoaderComponent } from '../../loader.component';
import { LoaderComponent, Video, VideoService } from '../shared/index';
// TODO import it with systemjs
declare var WebTorrent: any;
import { Video } from '../../video';
import { VideosService } from '../../videos.service';
@Component({
selector: 'my-video-watch',
templateUrl: 'app/angular/videos/components/watch/videos-watch.component.html',
styleUrls: [ 'app/angular/videos/components/watch/videos-watch.component.css' ],
templateUrl: 'client/app/videos/video-watch/video-watch.component.html',
styleUrls: [ 'client/app/videos/video-watch/video-watch.component.css' ],
directives: [ LoaderComponent ],
pipes: [ BytesPipe ]
})
export class VideosWatchComponent implements OnInit, CanDeactivate {
export class VideoWatchComponent implements OnInit, CanDeactivate {
video: Video;
downloadSpeed: number;
uploadSpeed: number;
@ -30,7 +27,7 @@ export class VideosWatchComponent implements OnInit, CanDeactivate {
private client: any;
constructor(
private _videosService: VideosService,
private _videoService: VideoService,
private _routeParams: RouteParams,
private _elementRef: ElementRef
) {
@ -40,7 +37,7 @@ export class VideosWatchComponent implements OnInit, CanDeactivate {
ngOnInit() {
let id = this._routeParams.get('id');
this._videosService.getVideo(id).subscribe(
this._videoService.getVideo(id).subscribe(
video => this.loadVideo(video),
error => alert(error)
);

View File

@ -7,27 +7,27 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/app/stylesheets/index.css">
<link rel="stylesheet" href="client/stylesheets/index.css">
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="/app/node_modules/es6-shim/es6-shim.min.js"></script>
<script src="/app/node_modules/zone.js/dist/zone.js"></script>
<script src="/app/node_modules/reflect-metadata/Reflect.js"></script>
<script src="/app/node_modules/systemjs/dist/system.src.js"></script>
<script src="client/node_modules/es6-shim/es6-shim.min.js"></script>
<script src="client/node_modules/zone.js/dist/zone.js"></script>
<script src="client/node_modules/reflect-metadata/Reflect.js"></script>
<script src="client/node_modules/systemjs/dist/system.src.js"></script>
<script src="/app/node_modules/jquery/dist/jquery.js"></script>
<script src="/app/node_modules/jquery.ui.widget/jquery.ui.widget.js"></script>
<script src="/app/node_modules/blueimp-file-upload/js/jquery.fileupload.js"></script>
<script src="client/node_modules/jquery/dist/jquery.js"></script>
<script src="client/node_modules/jquery.ui.widget/jquery.ui.widget.js"></script>
<script src="client/node_modules/blueimp-file-upload/js/jquery.fileupload.js"></script>
<script src="/app/node_modules/webtorrent/webtorrent.min.js"></script>
<script src="client/node_modules/webtorrent/webtorrent.min.js"></script>
<script src="/app/node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js"></script>
<script src="client/node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js"></script>
<!-- 2. Configure SystemJS -->
<script src="/app/systemjs.config.js"></script>
<script src="client/systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
System.import('client').catch(function(err){ console.error(err); });
</script>
</head>

View File

@ -1,4 +1,5 @@
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app/app.component';
bootstrap(AppComponent);

View File

@ -1,4 +1,4 @@
$icon-font-path: "/app/node_modules/bootstrap-sass/assets/fonts/bootstrap/";
$icon-font-path: "/client/node_modules/bootstrap-sass/assets/fonts/bootstrap/";
@import "bootstrap-variables";
@import "_bootstrap";

View File

@ -1,13 +1,12 @@
;(function (global) {
var map = {
'app': 'app/angular',
'angular-pipes': 'app/node_modules/angular-pipes',
'ng2-bootstrap': 'app/node_modules/ng2-bootstrap',
'angular-rxjs.bundle': 'app/bundles/angular-rxjs.bundle.js'
'angular-pipes': 'client/node_modules/angular-pipes',
'ng2-bootstrap': 'client/node_modules/ng2-bootstrap',
'angular-rxjs.bundle': 'client/bundles/angular-rxjs.bundle.js'
}
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'client': { main: 'main.js', defaultExtension: 'js' },
'ng2-bootstrap': { defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' }
}

View File

@ -20,26 +20,38 @@
],
"compileOnSave": false,
"files": [
"angular/app/app.component.ts",
"angular/app/search.component.ts",
"angular/app/search.ts",
"angular/friends/services/friends.service.ts",
"angular/main.ts",
"angular/users/components/login/login.component.ts",
"angular/users/models/authStatus.ts",
"angular/users/models/token.ts",
"angular/users/models/user.ts",
"angular/users/services/auth.service.ts",
"angular/videos/components/add/videos-add.component.ts",
"angular/videos/components/list/sort.ts",
"angular/videos/components/list/video-miniature.component.ts",
"angular/videos/components/list/video-sort.component.ts",
"angular/videos/components/list/videos-list.component.ts",
"angular/videos/components/watch/videos-watch.component.ts",
"angular/videos/loader.component.ts",
"angular/videos/pagination.ts",
"angular/videos/video.ts",
"angular/videos/videos.service.ts",
"app/app.component.ts",
"app/friends/friend.service.ts",
"app/friends/index.ts",
"app/shared/index.ts",
"app/shared/search-field.type.ts",
"app/shared/search.component.ts",
"app/shared/search.model.ts",
"app/users/index.ts",
"app/users/login/index.ts",
"app/users/login/login.component.ts",
"app/users/shared/auth-status.model.ts",
"app/users/shared/auth.service.ts",
"app/users/shared/index.ts",
"app/users/shared/token.model.ts",
"app/users/shared/user.model.ts",
"app/videos/index.ts",
"app/videos/shared/index.ts",
"app/videos/shared/loader/index.ts",
"app/videos/shared/loader/loader.component.ts",
"app/videos/shared/pagination.model.ts",
"app/videos/shared/sort-field.type.ts",
"app/videos/shared/video.model.ts",
"app/videos/shared/video.service.ts",
"app/videos/video-add/index.ts",
"app/videos/video-add/video-add.component.ts",
"app/videos/video-list/index.ts",
"app/videos/video-list/video-list.component.ts",
"app/videos/video-list/video-miniature.component.ts",
"app/videos/video-list/video-sort.component.ts",
"app/videos/video-watch/index.ts",
"app/videos/video-watch/video-watch.component.ts",
"main.ts",
"typings/globals/es6-shim/index.d.ts",
"typings/globals/jasmine/index.d.ts",
"typings/globals/node/index.d.ts",

View File

@ -6,4 +6,4 @@ cd client || exit -1
# Compile index and angular files
concurrently \
"node-sass --include-path node_modules/bootstrap-sass/assets/stylesheets/ stylesheets/application.scss stylesheets/index.css" \
"node-sass angular/ --output angular/"
"node-sass app/ --output app/"

View File

@ -2,4 +2,4 @@
cd client || exit -1
rm -f stylesheets/index.css
find angular -regextype posix-egrep -regex ".*\.(css)$" -exec rm -f {} \;
find app -regextype posix-egrep -regex ".*\.(css)$" -exec rm -f {} \;

View File

@ -1,5 +1,6 @@
#!/usr/bin/env sh
cd client || exit -1
find angular -regextype posix-egrep -regex ".*\.(js|map)$" -exec rm -f {} \;
find app -regextype posix-egrep -regex ".*\.(js|map)$" -exec rm -f {} \;
rm -rf ./bundles
rm -f main.js main.js.map

View File

@ -1,3 +1,3 @@
#!/usr/bin/env sh
livereload client/angular -e scss
livereload client/app -e scss

View File

@ -4,4 +4,4 @@ cd client || exit -1
concurrently \
"node-sass -w --include-path node_modules/bootstrap-sass/assets/stylesheets/ stylesheets/application.scss stylesheets/index.css" \
"node-sass -w angular/ --output angular/"
"node-sass -w app/ --output app/"

View File

@ -64,9 +64,9 @@ const apiRoute = '/api/' + constants.API_VERSION
app.use(apiRoute, routes.api)
// Static files
app.use('/app', express.static(path.join(__dirname, '/client'), { maxAge: 0 }))
app.use('/client', express.static(path.join(__dirname, '/client'), { maxAge: 0 }))
// 404 for static files not found
app.use('/app/*', function (req, res, next) {
app.use('/client/*', function (req, res, next) {
res.sendStatus(404)
})