Skip to content

Commit

Permalink
Updated dependencies (2.2) and seed app.
Browse files Browse the repository at this point in the history
Seperated root and example into their own modules.

To-do:
* Give JiT or AoT bootstrap option.
* Production environment.
* Setup tests.
  • Loading branch information
RyanMetin committed Nov 24, 2016
1 parent 8f7cc90 commit 67cef36
Show file tree
Hide file tree
Showing 23 changed files with 223 additions and 201 deletions.
9 changes: 5 additions & 4 deletions README.md
Expand Up @@ -29,14 +29,15 @@ To bundle application and serve:
## Structure
>* index.html <-- Entry point for application.
>* gulpfile.js <--
>* gulpfile.js <-- Gulp build tasks.
>* tsconfig.json <-- Configuration for TypeScript compiler.
>* tslint.json <-- Configuration for TypeScript linter.
>* res/ <-- Shared resources.
>* src/ <-- TypeScript goes in here.
>>* boot.ts <-- Strapping boots.
>>* app/ <-- Main application with route configuration.
>>* shared/ <-- Common directs, pipes, and services.
>>* examples/ <-- Example components.
>>* config.ts <-- SystemJS configuration.
>>* app/ <-- App module, component, and routing.
>>* example/ <-- Example module with components, directive, pipe, and service.
>* dist/ <-- JavaScript comes out here.
## Contribute
Expand Down
2 changes: 1 addition & 1 deletion package.json
@@ -1,5 +1,5 @@
{
"version": "1.0.0",
"version": "1.0.9",
"name": "slush-angular2",
"description": "Slush Generator For Angular2",
"author": {
Expand Down
2 changes: 1 addition & 1 deletion slushfile.js
Expand Up @@ -26,7 +26,7 @@ gulp.task('default', function (cb) {
answers.slug = slugify(answers.project);
answers.camel = camelize(answers.project);
gulp.src(path.join(__dirname, 'templates/app/**'))
.pipe(aside('!**/*.{ico,png}', template(answers)))
.pipe(aside('!**/*.{ico,png}', template(answers, { interpolate: /<%=([\s\S]+?)%>/g })))
.pipe(conflict(path.join(process.cwd(), answers.slug)))
.pipe(gulp.dest(path.join(process.cwd(), answers.slug)))
.pipe(install())
Expand Down
69 changes: 34 additions & 35 deletions templates/app/gulpfile.js
Expand Up @@ -6,63 +6,62 @@ const gulp = require('gulp'),
tslint = require('gulp-tslint'),
tsc = require('gulp-typescript'),
uglify = require('gulp-uglify'),
path = require('path'),
Builder = require('systemjs-builder'),
cfg = {
lib: {
polyfill: [
require.resolve('core-js/client/shim.js'),
require.resolve('zone.js/dist/zone.js'),
require.resolve('reflect-metadata/Reflect.js'),
require.resolve('systemjs/dist/system.src.js')
]
},
config: 'system.config.js',
build: 'dist/build.js',
config: 'dist/config.js',
index: 'index.html',
lib: [
require.resolve('core-js/client/shim.js'),
require.resolve('zone.js/dist/zone.js'),
require.resolve('reflect-metadata/Reflect.js'),
require.resolve('systemjs/dist/system.src.js')
],
ts: 'src/**/*.ts',
tsProject: tsc.createProject('tsconfig.json', { typescript: require('typescript') })
};


gulp.task('default', ['polyfill']);

gulp.task('build:prod', ['compile'], () => {
gulp.task('build', ['compile'], () => {
builder = new Builder('.', cfg.config);
return builder.buildStatic('app', './dist/build.js', { mangle: false, minify: true, sourceMaps: true });
return builder.buildStatic('app', cfg.build, { mangle: false, minify: true, sourceMaps: true });
});

gulp.task('compile', ['lint'], () => {
gulp.src(['src/**/*.ts', 'typings/browser.d.ts'])
gulp.task('compile', ['lint'], (cb) => {
gulp.src(cfg.ts)
.pipe(cfg.tsProject())
.pipe(gulp.dest('dist'))
.pipe(connect.reload());
.pipe(connect.reload())
.on('end', cb);
});

gulp.task('inject:dev', () => {
gulp.src('./index.html')
gulp.task('inject:dev', ['compile'], () => {
gulp.src(cfg.index)
.pipe(inject(gulp.src([cfg.config]), {
starttag: '<!-- inject:app -->',
transform: function (filePath, file) {
return '\n\t<script src=".' + filePath + '"></script>\n\t<script>System.import(\'app\').catch(console.error.bind(console));</script>\n\t';
}}))
addRootSlash: false, starttag: '<!-- inject:app -->',
transform: (filePath, file) => `\b\n\t<script src="${filePath}"></script>\n\t<script>SystemJS.import(\'app\').catch(console.error.bind(console));</script>\n\t`
}))
.pipe(gulp.dest('.'));
});

gulp.task('inject:prod', ['build:prod'], () => {
gulp.src('./index.html')
.pipe(inject(gulp.src(['dist/build.js']), {
starttag: '<!-- inject:app -->',
transform: function (filePath, file) {
return '<script src="' + filePath + '"></script>';
}}))
gulp.task('inject:prod', ['build'], () => {
gulp.src(cfg.index)
.pipe(inject(gulp.src([cfg.build]), {
addRootSlash: false, starttag: '<!-- inject:app -->',
transform: (filePath, file) => `\b\n\t<script src="${filePath}"></script>\n\t`
}))
.pipe(gulp.dest('.'));
});

gulp.task('lint', () => {
gulp.src('src/**/*.ts')
.pipe(tslint({ formatter: 'prose', tslint: require('tslint') }));
gulp.src(cfg.ts)
.pipe(tslint({ tslint: require('tslint') }))
.pipe(tslint.report({ emitError: false }));
});

gulp.task('polyfill', () => {
gulp.src(cfg.lib.polyfill, { base: './node_modules' })
gulp.src(cfg.lib)
.pipe(sourcemap.init())
.pipe(uglify({ mangle: false }))
.pipe(concat('polyfill.js'))
Expand All @@ -76,16 +75,16 @@ gulp.task('start:prod', ['serve:prod']);
gulp.task('serve:dev', ['inject:dev'], () => {
connect.server({
livereload: true,
fallback: 'index.html'
fallback: cfg.index
});
});

gulp.task('serve:prod', ['inject:prod'], () => {
connect.server({
fallback: 'index.html'
fallback: cfg.index
});
});

gulp.task('watch', ['compile'], () => {
gulp.watch('src/**/*.ts', ['compile']);
gulp.watch(cfg.ts, ['compile']);
});
4 changes: 1 addition & 3 deletions templates/app/index.html
@@ -1,9 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<base href="."/>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta charset="utf-8"/>
<meta name="viewport" id="viewport" content="width=device-width,initial-scale=1"/>
<title></title>
<link href="res/favicon.ico" rel="shortcut icon"/>
Expand Down
5 changes: 0 additions & 5 deletions templates/app/jsconfig.json

This file was deleted.

60 changes: 30 additions & 30 deletions templates/app/package.json
Expand Up @@ -2,53 +2,53 @@
"version": "0.0.1",
"name": "<%= slug %>",
"description": "Angular2 Flavored Slushy",
"scripts": {
"postinstall": "gulp",
"prod": "gulp start:prod",
"start": "gulp start:dev"
},
"dependencies": {
"@angular/common": "2.1.2",
"@angular/compiler": "2.1.2",
"@angular/core": "2.1.2",
"@angular/forms": "2.1.2",
"@angular/http": "2.1.2",
"@angular/platform-browser": "2.1.2",
"@angular/platform-browser-dynamic": "2.1.2",
"@angular/router": "3.1.2",
"@angular/service-worker": "0.6.2",
"angular-in-memory-web-api": "0.1.14",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.8",
"rxjs": "^5.0.0-beta.12",
"systemjs": "^0.19.40",
"zone.js": "^0.6.26"
"@angular/common": "~2.2.2",
"@angular/compiler": "~2.2.2",
"@angular/core": "~2.2.2",
"@angular/forms": "~2.2.2",
"@angular/http": "~2.2.2",
"@angular/platform-browser": "~2.2.2",
"@angular/platform-browser-dynamic": "~2.2.2",
"@angular/router": "~3.2.2",
"@angular/service-worker": "~0.7.1",
"angular-in-memory-web-api": "~0.1.16",
"core-js": "2.4.1",
"reflect-metadata": "0.1.8",
"rxjs": "5.0.0-beta.12",
"systemjs": "^0.19.41",
"zone.js": "^0.6.21"
},
"devDependencies": {
"@types/core-js": "^0.9.34",
"@types/jasmine": "^2.5.37",
"@types/node": "^6.0.46",
"@types/jasmine": "^2.5.38",
"@types/node": "^6.0.50",
"@types/protractor": "^4.0.0",
"@types/systemjs": "^0.19.31",
"@types/zone.js": "^0.0.27",
"codelyzer": "^1.0.0-beta.3",
"codelyzer": "^1.0.0-beta.4",
"gulp": "^3.9.1",
"gulp-concat": "^2.6.0",
"gulp-concat": "^2.6.1",
"gulp-connect": "^5.0.0",
"gulp-inject": "^4.1.0",
"gulp-sourcemaps": "^2.2.0",
"gulp-tslint": "^6.1.3",
"gulp-typescript": "^3.1.2",
"gulp-typescript": "^3.1.3",
"gulp-uglify": "^2.0.0",
"jasmine-core": "^2.5.2",
"jasmine-spec-reporter": "^2.7.0",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-jasmine": "^1.0.2",
"protractor": "^4.0.10",
"systemjs-builder": "^0.15.33",
"ts-helpers": "^1.1.2",
"protractor": "^4.0.11",
"systemjs-builder": "^0.15.34",
"ts-node": "^1.7.0",
"tslint": "^3.15.1",
"typescript": "^2.0.7"
},
"scripts": {
"postinstall": "gulp",
"prod": "gulp start:prod",
"start": "gulp start:dev"
"tslint": "^3.9.0",
"typescript": "^2.0.10"
}
}
File renamed without changes.
42 changes: 3 additions & 39 deletions templates/app/src/app/app.component.ts
@@ -1,46 +1,10 @@
import { Component } from '@angular/core';

@Component({
selector: '<%= slug %>',
styles: [`
header {
align-items: center;
background: grey;
color: white;
display: flex;
justify-content: space-between;
padding: 0.8rem 1.2rem;
}
h1 {
flex: auto;
font-size: 1.6rem;
}
nav {
margin-left: auto;
}
a {
color: inherit;
font-size: 1.4rem;
text-decoration: none;
}
a.router-link-active { color: #E1BEE7; }
a:hover { color: #BA68C8; }
a:not(:first-of-type):before {
color: white;
content: " · ";
}
`],
selector: '<%= camel %>-root',
template: `
<header bs-directive>
<h1>{{appTitle | capitalize}}</h1>
<nav>
<a [routerLink]="['/home']">Home</a>
<a [routerLink]="['/links']">Links</a>
</nav>
</header>
<nav-component></nav-component>
<router-outlet></router-outlet>
`
})
export class AppComponent {
appTitle: string = '<%= project %>';
}
export class AppComponent { }
37 changes: 9 additions & 28 deletions templates/app/src/app/app.module.ts
@@ -1,40 +1,21 @@
import { NgModule } from '@angular/core';
import { BrowserModule, Title } from '@angular/platform-browser';
import { HashLocationStrategy, LocationStrategy } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { APP_BASE_HREF } from '@angular/common';

import { AppComponent } from './app.component';
import { HomeComponent } from '../examples/home.component';
import { LinksComponent } from '../examples/links.component';
import { BoxShadowDirective } from '../shared/directive/example.directive';
import { CapitalizePipe } from '../shared/pipe/example.pipe';
import { LinkService } from '../shared/service/example.service';
import { AppRouting } from './app.routing';
import { ExampleModule } from '../example/example.module';

@NgModule({
bootstrap: [ AppComponent ],
declarations: [
AppComponent,
HomeComponent,
LinksComponent,
BoxShadowDirective,
CapitalizePipe
],
declarations: [ AppComponent ],
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule.forRoot([
{ path: '', pathMatch: 'full', redirectTo: 'home' },
{ path: 'home', component: HomeComponent },
{ path: 'links', component: LinksComponent }
])
ExampleModule,
AppRouting
],
providers: [
{ provide: LocationStrategy, useClass: HashLocationStrategy },
LinkService,
Title
{ provide: APP_BASE_HREF, useValue: '/' }
]
})
export class AppModule {}
export class AppModule { }
10 changes: 10 additions & 0 deletions templates/app/src/app/app.routing.ts
@@ -0,0 +1,10 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const moduleRoutes: Routes = [ ];

@NgModule({
exports: [ RouterModule ],
imports: [ RouterModule.forRoot(moduleRoutes) ]
})
export class AppRouting { }
1 change: 1 addition & 0 deletions templates/app/src/boot.ts
@@ -1,4 +1,5 @@
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule).catch(e => console.error(e));
10 changes: 5 additions & 5 deletions templates/app/system.config.js → templates/app/src/config.ts
@@ -1,5 +1,6 @@
(function (global) {
System.config({
((global) => {
SystemJS.config({
defaultJSExtensions: true,
paths: {
'npm:': 'node_modules/'
},
Expand All @@ -17,9 +18,8 @@
'rxjs': 'npm:rxjs'
},
packages: {
'app': { defaultExtension: 'js', main: 'boot.js' },
'angular-in-memory-web-api': { defaultExtension: 'js', main: 'index.js' },
'rxjs': { defaultExtension: 'js' }
'app': { main: 'boot.js' },
'angular-in-memory-web-api': { main: 'index.js' }
}
});
})(this);

0 comments on commit 67cef36

Please sign in to comment.