├── .gitignore
├── README.md
├── app
    ├── app.component.html
    ├── app.component.scss
    ├── app.component.ts
    ├── app.module.ts
    ├── bootstrap-prod.ts
    └── bootstrap.ts
├── assets
    ├── images
    │   └── ring1.png
    └── styles
    │   ├── main.css
    │   └── main.scss
├── index-prod.html
├── index.html
├── package.json
├── tsconfig-prod.json
├── tsconfig.json
├── webpack-dev.js
├── webpack-prod.js
└── webpack.common.config.js


/.gitignore:
--------------------------------------------------------------------------------
1 | # Created by .ignore support plugin (hsz.mobi)
2 | node_modules
3 | dist
4 | aot
5 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Angular Aframe 2 Starter
 2 | 
 3 | Read more at https://www.hackster.io/RONDAGDAG/virtual-reality-angular-aframe-2-starter-6264a5
 4 | 
 5 | Checkout all my AR/VR with IoT Experiments at https://www.hackster.io/RONDAGDAG/projects
 6 | 
 7 | 
 8 | ## Introduction
 9 | Welcome to Angular 2 Starter!
10 | based from Raúl Jiménez <elecash@gmail.com>  https://github.com/videogular/angular-connect-demo
11 | 
12 | ## Prerequisites
13 | You need to have [Node.js and npm](https://nodejs.org/en/)
14 | - Support Node v4 - latest
15 | - Support npm v3 - latest
16 | 
17 | ## Installation
18 | 
19 | Install:
20 | ```bash
21 | npm install
22 | ```
23 | 
24 | ## NPM commands
25 | Start development server:
26 | ```bash
27 | npm start
28 | ```
29 | Build app for development:
30 | ```bash
31 | npm run build
32 | ```
33 | Start production server:
34 | ```bash
35 | npm run start:prod
36 | ```
37 | Build app for production:
38 | ```bash
39 | npm run build:prod
40 | ```
41 | 
42 | ## License
43 | MIT
44 | 


--------------------------------------------------------------------------------
/app/app.component.html:
--------------------------------------------------------------------------------
1 |     <a-scene>
2 | 
3 |       <a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere>
4 |       <a-box position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1"  color="#4CC3D9"></a-box>
5 |       <a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
6 |       <a-plane rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
7 | 
8 |       <a-sky color="#ECECEC"></a-sky>
9 |     </a-scene>


--------------------------------------------------------------------------------
/app/app.component.scss:
--------------------------------------------------------------------------------
 1 | .title {
 2 |     position: absolute;
 3 |     color: white;
 4 |     z-index: 500;
 5 |     font-size: 60px;
 6 |     background: black;
 7 |     padding: 10px;
 8 |     margin: 10px;
 9 |     opacity: 0.5;
10 |     font-family: Helvetica, Arial, sans-serif;
11 |     transition: all 0.5s ease;
12 | 
13 |     &.hide {
14 |         opacity: 0;
15 |     }
16 | }
17 | 


--------------------------------------------------------------------------------
/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ElementRef } from '@angular/core';
 2 | 
 3 | 
 4 | @Component({
 5 |     selector: 'vr-player',
 6 |     templateUrl: 'app.component.html',
 7 |     styleUrls: ['app.component.scss']
 8 | })
 9 | 
10 | export class VRPlayer implements OnInit {
11 |     elem: any;
12 |     aframe: any;
13 |     timeout: any;
14 |    
15 | 
16 |     constructor(ref: ElementRef) {
17 |         this.elem = ref.nativeElement;
18 |     }
19 | 
20 |     ngOnInit() {
21 |         this.aframe = this.elem.querySelector('a-scene');
22 |     }
23 | }
24 | 


--------------------------------------------------------------------------------
/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | 
 4 | import {VRPlayer}  from './app.component';
 5 | 
 6 | @NgModule({
 7 |     imports: [BrowserModule],
 8 |     declarations: [VRPlayer],
 9 |     bootstrap: [VRPlayer],
10 |     schemas: [CUSTOM_ELEMENTS_SCHEMA]
11 | })
12 | export class AppModule {
13 | }
14 | 


--------------------------------------------------------------------------------
/app/bootstrap-prod.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowser} from '@angular/platform-browser';
2 | 
3 | import {AppModuleNgFactory} from '../aot/app/app.module.ngfactory';
4 | 
5 | platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
6 | 


--------------------------------------------------------------------------------
/app/bootstrap.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | 
3 | import {AppModule} from './app.module';
4 | 
5 | platformBrowserDynamic().bootstrapModule(AppModule);
6 | 


--------------------------------------------------------------------------------
/assets/images/ring1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rondagdag/angular2-aframe-starter/1e5860dd752913c3ac8c729b3a2534a06d576275/assets/images/ring1.png


--------------------------------------------------------------------------------
/assets/styles/main.css:
--------------------------------------------------------------------------------
 1 | html {
 2 |   width: 100%;
 3 |   height: 100%; }
 4 | 
 5 | body {
 6 |   width: 100%;
 7 |   height: 100%;
 8 |   margin: 0;
 9 |   padding: 0; }
10 | 


--------------------------------------------------------------------------------
/assets/styles/main.scss:
--------------------------------------------------------------------------------
 1 | html {
 2 |   width: 100%;
 3 |   height: 100%;
 4 | }
 5 | 
 6 | body {
 7 |   width: 100%;
 8 |   height: 100%;
 9 |   margin: 0;
10 |   padding: 0;
11 | }
12 | 


--------------------------------------------------------------------------------
/index-prod.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Angular 2 VR Demo</title>
 6 |     <base href="">
 7 |     <link rel="icon" type="image/x-icon" href="favicon.ico"/>
 8 |     <script src="polyfills.bundle.js"></script>
 9 |     <link rel="stylesheet" type="text/css" href="assets/styles/main.css">
10 | </head>
11 | <body>
12 |     <vr-player>Loading...</vr-player>
13 | 
14 |     <script src="prod.bundle.js"></script>
15 |     <script src="libs.bundle.js"></script>
16 | </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Angular 2 VR Demo</title>
 6 |     <base href="">
 7 |     <link rel="icon" type="image/x-icon" href="favicon.ico"/>
 8 |     <script src="polyfills.bundle.js"></script>
 9 |     <link rel="stylesheet" type="text/css" href="assets/styles/main.css">
10 | </head>
11 | <body>
12 |     <vr-player>Loading...</vr-player>
13 | 
14 |     <script src="dev.bundle.js"></script>
15 |     <script src="libs.bundle.js"></script>
16 | </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular2-aframe-starter",
 3 |   "version": "1.0.0",
 4 |   "description": "angular2 aframe Starter",
 5 |   "scripts": {
 6 |     "ngc": "ngc",
 7 |     "ngc:dev": "ngc -p ./tsconfig.json",
 8 |     "webpack": "webpack --progress --config webpack-dev.js --optimize-minimize",
 9 |     "start": "npm run ngc:dev && npm run webpack && webpack-dev-server --config webpack-dev.js --port 4202",
10 |     "build": "npm run ngc:dev && npm run webpack",
11 |     "ngc:prod": "ngc -p ./tsconfig-prod.json",
12 |     "webpack:prod": "webpack --progress --config webpack-prod.js --optimize-minimize",
13 |     "start:prod": "npm run ngc:prod && npm run webpack:prod && webpack-dev-server --config webpack-prod.js --port 4202",
14 |     "build:prod": "npm run ngc:prod && npm run webpack:prod"
15 |   },
16 |   "keywords": [
17 |     "angular2",
18 |     "typescript",
19 |     "webpack"
20 |   ],
21 |   "authors": [
22 |     "Ron Dagdag <ron@dagdag.net>"
23 |   ],
24 |   "license": "MIT",
25 |   "dependencies": {
26 |     "@angular/common": "2.0.0",
27 |     "@angular/compiler": "2.0.0",
28 |     "@angular/compiler-cli": "0.6.2",
29 |     "@angular/core": "2.0.0",
30 |     "@angular/platform-browser": "2.0.0",
31 |     "@angular/platform-browser-dynamic": "2.0.0",
32 |     "@angular/platform-server": "2.0.0",
33 |     "aframe": "0.3.2",
34 |     "aframe-animation-component": "^3.0.1",
35 |     "aframe-bmfont-text-component": "^0.1.4",
36 |     "es6-promise": "3.3.0",
37 |     "es6-shim": "0.35.1",
38 |     "rxjs": "5.0.0-beta.12",
39 |     "zone.js": "0.6.21"
40 |   },
41 |   "devDependencies": {
42 |     "@types/es6-shim": "0.0.31",
43 |     "@types/node": "6.0.38",
44 |     "@types/requirejs": "2.1.26",
45 |     "angular2-template-loader": "0.5.0",
46 |     "awesome-typescript-loader": "2.2.4",
47 |     "compression-webpack-plugin": "0.3.1",
48 |     "copy-webpack-plugin": "3.0.1",
49 |     "html-webpack-plugin": "2.22.0",
50 |     "http-server": "0.9.0",
51 |     "node-sass": "3.10.0",
52 |     "raw-loader": "0.5.1",
53 |     "reflect-metadata": "0.1.8",
54 |     "rimraf": "2.5.4",
55 |     "sass-loader": "4.0.2",
56 |     "ts-loader": "0.8.2",
57 |     "typescript": "2.0.2",
58 |     "typings": "1.3.3",
59 |     "webpack": "2.1.0-beta.21",
60 |     "webpack-dashboard": "0.1.8",
61 |     "webpack-dev-server": "1.15.1",
62 |     "webpack-merge": "0.14.1"
63 |   }
64 | }
65 | 


--------------------------------------------------------------------------------
/tsconfig-prod.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es2015",
 4 |     "module": "es2015",
 5 |     "moduleResolution": "node",
 6 |     "declaration": false,
 7 |     "removeComments": true,
 8 |     "emitDecoratorMetadata": true,
 9 |     "experimentalDecorators": true,
10 |     "sourceMap": true,
11 |     "allowUnusedLabels": false,
12 |     "noImplicitAny": true,
13 |     "suppressImplicitAnyIndexErrors": true,
14 |     "outDir": "./dist/unbundled",
15 |     "types": [
16 |       "node"
17 |     ]
18 |   },
19 |   "angularCompilerOptions": {
20 |     "genDir": "aot",
21 |     "skipMetadataEmit" : true
22 |   },
23 |   "compileOnSave": false,
24 |   "files": [
25 |     "app/app.module.ts"
26 |   ],
27 |   "exclude": [
28 |     "node_modules",
29 |     "dist"
30 |   ]
31 | }
32 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compileOnSave": false,
 3 |   "buildOnSave": false,
 4 |   "compilerOptions": {
 5 |     "target": "es5",
 6 |     "module": "commonjs",
 7 |     "removeComments": true,
 8 |     "emitDecoratorMetadata": true,
 9 |     "experimentalDecorators": true,
10 |     "sourceMap": true,
11 |     "types": [
12 |       "es6-shim",
13 |       "node"
14 |     ]
15 |   },
16 |   "files": [],
17 |   "exclude": [
18 |     "node_modules",
19 |     "dist"
20 |   ],
21 |   "awesomeTypescriptLoaderOptions": {
22 |     "useWebpackText": true
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/webpack-dev.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const commonConfig = require('./webpack.common.config.js');
 4 | const webpackMerge = require('webpack-merge');
 5 | const HtmlWebpackPlugin = require('html-webpack-plugin');
 6 | 
 7 | module.exports = function (env) {
 8 |     return webpackMerge(commonConfig(), {
 9 |         devtool: 'source-map',
10 |         entry: {
11 |             'dev': './app/bootstrap.ts'
12 |         },
13 |         output: {
14 |             path: './dist/dev'
15 |         },
16 |         plugins: [
17 |             new HtmlWebpackPlugin({
18 |                 template: 'index.html',
19 |                 inject: false
20 |             })
21 |         ],
22 |         devServer: {
23 |             contentBase: 'dist/dev'
24 |         }
25 |     });
26 | };
27 | 


--------------------------------------------------------------------------------
/webpack-prod.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const commonConfig = require('./webpack.common.config.js');
 4 | const webpackMerge = require('webpack-merge');
 5 | const HtmlWebpackPlugin = require('html-webpack-plugin');
 6 | const CompressionPlugin = require("compression-webpack-plugin");
 7 | const webpack = require('webpack');
 8 | 
 9 | module.exports = function (env) {
10 |     return webpackMerge(commonConfig(), {
11 |         entry: {
12 |             'prod': './app/bootstrap-prod.ts'
13 |         },
14 |         output: {
15 |             path: './dist/prod'
16 |         },
17 |         plugins: [
18 |             new HtmlWebpackPlugin({
19 |                 template: 'index-prod.html',
20 |                 inject: false
21 |             }),
22 |             new webpack.optimize.UglifyJsPlugin({
23 |                 compress: {
24 |                     warnings: false
25 |                 },
26 |                 output: {
27 |                     comments: false
28 |                 },
29 |                 sourceMap: false
30 |             }),
31 |             new CompressionPlugin({
32 |                 asset: "[path].gz[query]",
33 |                 algorithm: "gzip",
34 |                 test: /\.js$|\.html$/,
35 |                 threshold: 10240,
36 |                 minRatio: 0.8
37 |             })
38 |         ],
39 |         devServer: {
40 |             contentBase: 'dist/prod'
41 |         },
42 |         bail: false
43 |     });
44 | };
45 | 


--------------------------------------------------------------------------------
/webpack.common.config.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | const path = require('path');
 3 | const webpack = require('webpack');
 4 | const CopyWebpackPlugin = require('copy-webpack-plugin');
 5 | 
 6 | 
 7 | module.exports = function () {
 8 |     return {
 9 | 
10 |         debug: false,
11 |         profile: true,
12 |         bail: false,
13 | 
14 |         entry: {
15 |             polyfills: [
16 |                 path.resolve(__dirname, 'node_modules/es6-shim/es6-shim.min.js'),
17 |                 path.resolve(__dirname, 'node_modules/es6-promise/dist/es6-promise.min.js'),
18 |                 path.resolve(__dirname, 'node_modules/reflect-metadata/Reflect.js'),
19 |                 path.resolve(__dirname, 'node_modules/zone.js/dist/zone.min.js'),
20 |                 path.resolve(__dirname, 'node_modules/zone.js/dist/long-stack-trace-zone.min.js')
21 |             ],
22 |             libs: [
23 |                 path.resolve(__dirname, 'node_modules/aframe/dist/aframe-v0.3.2.min.js'),
24 |                 path.resolve(__dirname, 'node_modules/aframe-animation-component/dist/aframe-animation-component.min.js'),
25 |                 path.resolve(__dirname, 'node_modules/aframe-bmfont-text-component/dist/aframe-bmfont-text-component.min.js')
26 |             ]
27 |         },
28 | 
29 |         output: {
30 |             filename: '[name].bundle.js'
31 |         },
32 | 
33 |         module: {
34 |             loaders: [
35 |                 {
36 |                     test: /\.ts$/,
37 |                     loaders: ['angular2-template-loader', 'awesome-typescript-loader'],
38 |                     exclude: [/\.(spec|e2e)\.ts$/]
39 |                 },
40 |                 {
41 |                     test: /\.(html)$/,
42 |                     loader: 'raw-loader',
43 |                     exclude: ['app/index.html']
44 |                 },
45 |                 {
46 |                     test: /\.scss$/,
47 |                     exclude: /node_modules/,
48 |                     loaders: ['raw-loader', 'sass-loader']
49 |                 }
50 |             ]
51 |         },
52 | 
53 |         resolve: {
54 |             root: [path.resolve(__dirname, 'app')],
55 |             extensions: ['', '.ts', '.js']
56 |         },
57 | 
58 |         plugins: [
59 |             new webpack.LoaderOptionsPlugin({
60 |                 minimize: true,
61 |                 debug: false
62 |             }),
63 |             new CopyWebpackPlugin([
64 |                 { from: 'assets', to: 'assets' }
65 |             ])
66 |         ],
67 | 
68 |         devtool: false,
69 | 
70 |         devServer: {
71 |             compress: true
72 |         }
73 | 
74 |     };
75 | };
76 | 


--------------------------------------------------------------------------------