--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | #CHANGELOG
2 |
3 | ##Angular2gen v1.0
4 |
5 | - Update the generator to angular2-rc
6 | - Update the generator structure
7 | - Delete SASS choice while project generation. SASS is now automatically installed.
8 | - Add several Angular 2 guidelines:
9 | - Barrels for components
10 | - Convention: Prefixes "+" for lazy loaded folders
11 | - Add core folder into components folder. Core contains all components developed by Angular2gen community. It's a component library.
12 | - Adding a test environment
13 | - Updating gulp tasks in order to improve the compilation and the livereloading. We implemented live reloading for your test in order to allow you to develop in tdd (test driven development).
14 |
--------------------------------------------------------------------------------
/app/templates/gulp/tasks/prod/bundles.libs.prod.js:
--------------------------------------------------------------------------------
1 | import gulp from 'gulp';
2 | import {
3 | JS_NPM_DEPENDENCIES,
4 | JS_PROD_LIBS_BUNDLE,
5 | JS_PROD_DIR
6 | } from '../../gulp.conf';
7 | import gulpLoadPlugins from 'gulp-load-plugins';
8 |
9 | const plugins = gulpLoadPlugins();
10 |
11 | /**
12 | * Returns the npm dependencies to be injected
13 | */
14 | function getNpmDependencies () {
15 | return JS_NPM_DEPENDENCIES.map(dep => dep.src);
16 | }
17 |
18 | gulp.task('bundles.libs.prod', () => {
19 | return gulp.src(getNpmDependencies())
20 | .pipe(plugins.uglify({
21 | mangle: false
22 | }))
23 | .pipe(plugins.concat(JS_PROD_LIBS_BUNDLE))
24 | .pipe(gulp.dest(JS_PROD_DIR));
25 | });
--------------------------------------------------------------------------------
/app/templates/gulp/tasks/dev/build.index.dev.js:
--------------------------------------------------------------------------------
1 | import gulp from 'gulp';
2 | import path from 'path';
3 | import gulpLoadPlugins from 'gulp-load-plugins';
4 | import {
5 | SRC_DIR,
6 | INDEX,
7 | DEV_DIR
8 | } from '../../gulp.conf';
9 | import {inject} from '../../utils/inject';
10 | import {getBrowserSync} from '../../utils/browsersync';
11 |
12 | let bs = getBrowserSync();
13 |
14 | const plugins = gulpLoadPlugins();
15 |
16 | gulp.task('build:index:dev', function () {
17 | return gulp.src(path.join(SRC_DIR, INDEX))
18 | .pipe(inject(DEV_DIR, 'shims'))
19 | .pipe(inject(DEV_DIR, 'libs'))
20 | .pipe(inject(DEV_DIR, 'project'))
21 | .pipe(plugins.template({ENV: 'dev'}))
22 | .pipe(gulp.dest(DEV_DIR))
23 | .pipe(bs.stream());
24 | });
--------------------------------------------------------------------------------
/app/templates/src/app/shared/pipes/src/README.md:
--------------------------------------------------------------------------------
1 | ###Folder pipes
2 |
3 | This folder contains all pipes for your angular 2 project.
4 |
5 | You can generate through your command prompt a pipe with the following commands:
6 |
7 | ```
8 | yo angular2gen:pipe Name
9 | ```
10 |
11 | ##### The pipe name will be NamePipe.
12 | ##### For instance, you run yo angular2gen:pipe TransformUpperCase, the name of the class will be TransformUpperCasePipe
13 |
14 | As you have seen in the folder architecture of the generator, the folder pipes has two folders: one for the sources *src* and another for the tests *test*.
15 | When you run the previous command, it will create two files as follow:
16 | ```
17 | - src
18 | │_ name.pipe.ts : The main file of your pipe
19 | - test
20 | │_ name.pipe.spec.ts: The test file of your pipe
21 | ```
22 |
--------------------------------------------------------------------------------
/app/templates/src/app/components/header/_header-foundation.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
<%= projectTitle %>
4 |
5 |
6 |
7 |
15 |
19 |
--------------------------------------------------------------------------------
/app/templates/src/app/shared/services/README.md:
--------------------------------------------------------------------------------
1 | ###Folder services
2 |
3 | This folder contains all services for your angular 2 project.
4 |
5 | You can generate through your command prompt a service with the following commands:
6 |
7 | ```
8 | yo angular2gen:service MyService
9 | ```
10 |
11 | ##### The service name will be MyServiceService.
12 | ##### For instance, you run yo angular2gen:service CallDataBase, the name of the class will be CallDataBaseService
13 |
14 | As you have seen in the folder architecture of the generator, the folder services has two folders: one for the sources *src* and another for the tests *test*.
15 | When you run the previous command, it will create two files as follow:
16 | ```
17 | - src
18 | │_ my-service.service.ts : The main file of your service
19 | - test
20 | │_ my-service.service.spec.ts: The test file of your service
21 | ```
22 |
--------------------------------------------------------------------------------
/app/templates/src/app/shared/directives/README.md:
--------------------------------------------------------------------------------
1 | ###Folder directives
2 |
3 | This folder contains all directives for your angular 2 project.
4 |
5 | You can generate through your command prompt a directive with the following commands:
6 |
7 | ```
8 | yo angular2gen:directive MyDirective
9 | ```
10 |
11 | ##### The directive name will be MyDirectiveDirective.
12 | ##### For instance, you run yo angular2gen:directive Draggable, the name of the class will be DraggableDirective
13 |
14 | As you have seen in the folder architecture of the generator, the folder directives has two folders: one for the sources *src* and another for the tests *test*.
15 | When you run the previous command, it will create two files as follow:
16 | ```
17 | - src
18 | │_ my-directive.directive.ts : The main file of your directive
19 | - test
20 | │_ my-directive.directive.spec.ts: The test file of your directive
21 | ```
22 |
--------------------------------------------------------------------------------
/app/components/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Created by rpourtier on 09/03/2016.
3 | */
4 | 'use strict';
5 | var util = require('util');
6 | var ScriptBase = require('../script-base.js');
7 |
8 |
9 | var Generator = module.exports = function Generator() {
10 | ScriptBase.apply(this, arguments);
11 |
12 | // if the controller name is suffixed with ctrl, remove the suffix
13 | // if the controller name is just "ctrl," don't append/remove "ctrl"
14 | if (this.name && this.name.toLowerCase() !== 'ctrl' && this.name.substr(-4).toLowerCase() === 'ctrl') {
15 | this.name = this.name.slice(0, -4);
16 | }
17 | };
18 |
19 | util.inherits(Generator, ScriptBase);
20 |
21 | Generator.prototype.createControllerFiles = function createControllerFiles() {
22 | this.generateSourceAndTest(
23 | 'controller',
24 | 'spec/controller',
25 | 'controllers',
26 | this.options['skip-add'] || false
27 | );
28 | };
--------------------------------------------------------------------------------
/app/templates/gulp/utils/browsersync.js:
--------------------------------------------------------------------------------
1 | import browserSync from 'browser-sync';
2 | import historyApiFallback from 'connect-history-api-fallback';
3 |
4 | let bs = null;
5 |
6 | /**
7 | * This function creates a singleton of a browser sync server, and returns it.
8 | */
9 | export function getBrowserSync () {
10 | if (bs === null) {
11 | return bs = browserSync.create('Server');
12 | }
13 | return browserSync.get('Server');
14 | }
15 |
16 | /**
17 | * This function initiates the server.
18 | *
19 | * @param {String} destinationDirectory - The destination directory.
20 | */
21 | export function init (destinationDirectory) {
22 | bs.init({
23 | server : {
24 | baseDir: destinationDirectory + '/',
25 | routes : {
26 | "/node_modules": "node_modules"
27 | }
28 | },
29 | injectChanges: true,
30 | middleware : [historyApiFallback()]
31 | });
32 | }
--------------------------------------------------------------------------------
/app/templates/src/styles/core/radio-buttons.scss:
--------------------------------------------------------------------------------
1 | @import '../variables';
2 |
3 | .radios {
4 | position:relative;
5 | margin-bottom:40px;
6 | text-align: center;
7 |
8 | input[type=radio] {
9 | visibility: hidden;
10 | }
11 |
12 |
13 | input[type=radio]:checked + label:before {
14 | content: "\2022";
15 | color: $colorButton;
16 | border: 5px solid $colorButton;
17 | font-size: 30px;
18 | line-height: 16px;
19 | }
20 |
21 | label{
22 | position: relative;
23 | margin-right: 15px;
24 | cursor: pointer;
25 | padding-left: 35px;
26 | color:$other-color;
27 |
28 | &:before {
29 | content: "";
30 |
31 | height: 25px;
32 | width: 25px;
33 | border-radius: 100%;
34 |
35 | border: 5px solid;
36 | left:-5px;
37 | bottom: 5px;
38 |
39 | position: absolute;
40 | transition: border .25s linear;
41 | -webkit-transition: border .25s linear;
42 | }
43 | }
44 | }
--------------------------------------------------------------------------------
/app/templates/gulp/utils/sass.js:
--------------------------------------------------------------------------------
1 | import gulp from 'gulp';
2 | import gulpLoadPlugins from 'gulp-load-plugins';
3 | import {getBrowserSync} from './browsersync';
4 | import {SRC_DIR} from '../gulp.conf';
5 |
6 | const plugins = gulpLoadPlugins();
7 |
8 | let bs = getBrowserSync();
9 |
10 | /**
11 | * This function compiles sass files into the destinationDirectory directory.
12 | *
13 | * @param {String} files - Files to match.
14 | * @param {String} destinationDirectory - The destination directory.
15 | * @param {boolean} enableProdMode - A boolean to define if we are in production or not.
16 | */
17 | export function sass (files, destinationDirectory, enableProdMode = false) {
18 | return gulp.src(files, {base: SRC_DIR})
19 | .pipe(plugins.if(!enableProdMode, plugins.sourcemaps.init()))
20 | .pipe(plugins.sass())
21 | .pipe(plugins.if(!enableProdMode, plugins.sourcemaps.write('./')))
22 | .pipe(gulp.dest(destinationDirectory))
23 | .pipe(bs.stream());
24 | }
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "generator-angular2gen",
3 | "version": "1.2.3",
4 | "description": "A simple way to learn Angular2 with angular2gen !",
5 | "license": "MIT",
6 | "main": "app/index.js",
7 | "scripts": {
8 | "postversion": "git push && git push --tags"
9 | },
10 | "repository": {
11 | "type": "git",
12 | "url": "git+https://github.com/NablaT/angular2gen.git"
13 | },
14 | "author": "Remi Pourtier & Guillaume Rahbari ",
15 | "bugs": {
16 | "url": "https://github.com/NablaT/angular2gen/issues"
17 | },
18 | "keywords": [
19 | "yeoman-generator",
20 | "angular yeoman",
21 | "angular2 yeoman",
22 | "angularjs",
23 | "angular",
24 | "angularjs2",
25 | "angular2",
26 | "angular 2"
27 | ],
28 | "homepage": "https://github.com/NablaT/angular2gen#readme",
29 | "files": [
30 | "app",
31 | "component",
32 | "service",
33 | "directive",
34 | "style",
35 | "common-function"
36 | ],
37 | "dependencies": {
38 | "lodash": "^4.6.1",
39 | "yeoman-generator": "^0.22.5"
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/app/templates/_gulpfile.babel.js:
--------------------------------------------------------------------------------
1 | import gulp from 'gulp';
2 | import gulpLoadPlugins from 'gulp-load-plugins';
3 | import runSequence from 'run-sequence';
4 | import requireDir from 'require-dir';
5 |
6 | const plugins = gulpLoadPlugins();
7 |
8 | requireDir('./gulp/tasks/dev');
9 | requireDir('./gulp/tasks/prod');
10 |
11 | gulp.task('build:dev', (callback) => {
12 | runSequence('clean:dev',
13 | ['build:assets:dev', 'build:html:dev', 'build:sass:dev', 'build:ts:dev', 'copy:systemjs:dev'],
14 | 'build:index:dev',
15 | callback);
16 | });
17 |
18 | gulp.task('serve', (callback) => {
19 | runSequence('build:dev', 'server:dev', 'watch:dev', callback);
20 | });
21 |
22 | gulp.task('build:prod', (callback) => {
23 | runSequence('clean:prod',
24 | ['build:assets:prod',
25 | 'build:styles:prod',
26 | 'template:html:prod',
27 | 'template:sass:prod',
28 | 'template:ts:prod'],
29 | 'karma:ts:prod',
30 | 'karma:prod',
31 | 'build:ts:prod',
32 | 'clean:tests:prod',
33 | ['bundles.libs.prod', 'bundles.app.prod', 'bundle:css:prod', 'bundle:libs:css:prod'],
34 | 'build:index:prod',
35 | callback);
36 | });
--------------------------------------------------------------------------------
/app/templates/src/app/components/_README.md:
--------------------------------------------------------------------------------
1 | ###Folder components
2 |
3 | This folder contains all components for your angular 2 project.
4 |
5 | You can generate through your command prompt a component with the following commands:
6 | ```
7 | yo angular2gen:component Name
8 | ```
9 |
10 | ##### The component name will be NameComponent.
11 | ##### For instance, you run yo angular2gen:component Menu, the name of the class will be MenuComponent
12 |
13 | We made this choice for two reasons:
14 | - Avoid conflict between names of your components, services and directives
15 | - Better maintanability and modifiability. A quick eye on the file and you know variables role.
16 |
17 | The command will create the folder name-of-your-component in the folder components with the following files:
18 | ```
19 | - name-of-your-component
20 | │_ name-of-your-component.component.html: The html file of the component
21 | │_ name-of-your-component.component.scss or css (depends on Sass installation): The css file of the component
22 | │_ name-of-your-component.component.spec.ts: The test file of the component
23 | │_ name-of-your-component.component.ts: The component
24 | ```
25 |
26 |
--------------------------------------------------------------------------------
/app/templates/src/_index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | <%= projectTitle %>
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | Loading...
20 |
21 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 | <%% if (ENV === 'dev') { %>
42 |
47 | <%% } %>
48 |
49 |
--------------------------------------------------------------------------------
/app/templates/src/app/components/+home/_home-foundation.component.scss:
--------------------------------------------------------------------------------
1 | @import '../../../styles/variables';
2 | @import url(//fonts.googleapis.com/css?family=Roboto:400,500,300,100,700,900);
3 |
4 | html,body { // for demo only
5 | background: #FAFAFA;
6 | }
7 |
8 | .card {
9 | font-family: 'Roboto', sans-serif;
10 | overflow: hidden;
11 | box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
12 | color: #272727;
13 | border-radius: 2px;
14 | .title {
15 | line-height: 3rem;
16 | font-size: 1.5rem;
17 | font-weight: 300;
18 | }
19 | .content {
20 | padding: 1.3rem;
21 | font-weight: 300;
22 | border-radius: 0 0 2px 2px;
23 | }
24 | p {
25 | margin: 0;
26 | }
27 | .action {
28 | border-top: 1px solid rgba(160, 160, 160, 0.2);
29 | padding: 1.3rem;
30 | }
31 | a {
32 | color: #ffab40;
33 | margin-right: 1.3rem;
34 | transition: color 0.3s ease;
35 | text-transform: uppercase;
36 | text-decoration: none;
37 | }
38 | .image {
39 | position: relative;
40 | .title {
41 | position: absolute;
42 | bottom: 0;
43 | left: 0;
44 | padding: 1.3rem;
45 | color: #000;
46 | font-weight: bold;
47 | }
48 | img {
49 | border-radius: 2px 2px 0 0;
50 | }
51 | }
52 | }
53 |
54 |
55 |
--------------------------------------------------------------------------------
/app/templates/src/app/_app.routing.ts:
--------------------------------------------------------------------------------
1 |
2 | import { Routes, RouterModule } from '@angular/router';
3 | import { ModuleWithProviders } from "@angular/core";
4 |
5 | import { AboutRoutes } from './components/+about/index';
6 | import { HomeRoutes } from './components/+home/index';
7 |
8 | /**
9 | * app.routing.ts is the file used to define application routes. Routes tell the router which views to display
10 | * when a user clicks on a link.
11 | */
12 |
13 | /**
14 | * appRoutes is a list of routes. You have two way to define routes:
15 | * v1: {
16 | * path: '',
17 | * component: HomeComponent
18 | * }
19 | * v2: import an existing route: ...HomeRoutes
20 | *
21 | * Here we would rather import route files and define the routes in each route file than define everything
22 | * here in app.routing.ts. In the future, it will be easier to maintain our routes with imported routes.
23 | */
24 | const appRoutes: Routes = [
25 | ...HomeRoutes,
26 | ...AboutRoutes
27 | ];
28 |
29 |
30 | export const appRoutingProviders: any[] = [
31 |
32 | ];
33 |
34 | /**
35 | * We pass the array of routes appRoutes in the RouterModule.forRoot method which returns a module containing
36 | * the configured Router service provider. We export the module through the variable routing.
37 | */
38 | export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
--------------------------------------------------------------------------------
/app/templates/gulp/tasks/dev/watch.dev.js:
--------------------------------------------------------------------------------
1 | import gulp from 'gulp';
2 | import path from 'path';
3 | import runSequence from 'run-sequence';
4 | import {
5 | SRC_DIR,
6 | INDEX,
7 | APP_SRC
8 | } from '../../gulp.conf';
9 |
10 | gulp.task('watch:scripts:dev', () => {
11 | gulp.watch(path.join(SRC_DIR, '**', '*.ts'), (event) => {
12 | console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
13 | runSequence('build:ts:dev');
14 | })
15 | });
16 |
17 | gulp.task('watch:sass:dev', () => {
18 | gulp.watch(path.join(SRC_DIR, '**', '*.scss'), (event) => {
19 | console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
20 | runSequence('build:sass:dev');
21 | })
22 | });
23 |
24 | gulp.task('watch:index:dev', () => {
25 | gulp.watch(path.join(SRC_DIR, INDEX), (event) => {
26 | console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
27 | runSequence('build:index:dev');
28 | })
29 | });
30 |
31 | gulp.task('watch:html:dev', () => {
32 | gulp.watch(path.join(APP_SRC, '**', '*.html'), (event) => {
33 | console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
34 | runSequence('build:html:dev');
35 | })
36 | });
37 |
38 | gulp.task('watch:dev', callback => {
39 | runSequence('watch:scripts:dev', 'watch:sass:dev', 'watch:index:dev', 'watch:html:dev', callback);
40 | });
--------------------------------------------------------------------------------
/app/templates/src/app/components/core/card/card.component.scss:
--------------------------------------------------------------------------------
1 | @import url(//fonts.googleapis.com/css?family=Roboto:400,500,300,100,700,900);
2 |
3 | html,body { // for demo only
4 | background: #FAFAFA;
5 | }
6 |
7 | .card {
8 | font-family: 'Calibri', sans-serif;
9 | overflow: hidden;
10 | box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
11 | color: #272727;
12 | border-radius: 2px;
13 | .content {
14 | padding: 1.3rem;
15 | font-weight: 300;
16 | border-radius: 0 0 2px 2px;
17 | }
18 | p {
19 | margin: 0;
20 | }
21 | .action {
22 | border-top: 1px solid rgba(160, 160, 160, 0.2);
23 | padding: 1.3rem;
24 | }
25 | a {
26 | color: #ffab40;
27 | margin-right: 1.3rem;
28 | transition: color 0.3s ease;
29 | text-transform: uppercase;
30 | text-decoration: none;
31 | }
32 | .image {
33 | position: relative;
34 | .title {
35 | position: absolute;
36 | bottom: 0;
37 | left: 0;
38 | padding: 1.3rem;
39 | color: #000;
40 | font-weight: bold;
41 | }
42 | img {
43 | border-radius: 2px 2px 0 0;
44 | }
45 | }
46 | }
47 |
48 |
49 | .card:hover{
50 | margin-top:10px;
51 | margin-bottom:10px;
52 | transition: margin 0.5s;
53 | //transition: transform 1s;
54 | box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.16), 0 2px 20px 0 rgba(0, 0, 0, 0.12);
55 |
56 | //transform: scale(1.02);
57 | //cursor:pointer;
58 | }
59 |
--------------------------------------------------------------------------------
/app/templates/src/app/_app.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed, async } from '@angular/core/testing';
2 | import { By } from '@angular/platform-browser';
3 | import { DebugElement } from '@angular/core';
4 | import { RouterTestingModule } from '@angular/router/testing';
5 | import { Route } from '@angular/router';
6 |
7 | import { AppComponent } from './app.component';
8 | import { HomeComponent } from './components/+home/home.component';
9 | import { AboutComponent } from './components/+about/about.component';
10 |
11 | let comp: AppComponent;
12 | let fixture: ComponentFixture;
13 | let el: DebugElement;
14 |
15 | describe('AppComponent', () => {
16 |
17 | let config: Route[] = [
18 | { path: '', component: HomeComponent },
19 | { path: 'about', component: AboutComponent }
20 | ];
21 |
22 | beforeEach(async(() => {
23 | TestBed.configureTestingModule({
24 | imports: [RouterTestingModule.withRoutes(config)],
25 | declarations: [ AppComponent, HomeComponent, AboutComponent ],
26 | })
27 | .compileComponents() // compile template and css
28 | .then(
29 | () => {
30 | // create component and test fixture
31 | fixture = TestBed.createComponent(AppComponent);
32 |
33 | // get test component from the fixture
34 | comp = fixture.componentInstance;
35 | }
36 | );
37 | }));
38 |
39 | it('can instantiate it', () => {
40 | expect(comp).not.toBeNull();
41 | });
42 |
43 | });
44 |
--------------------------------------------------------------------------------
/common-function.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Common function for generation
3 | */
4 | var generators = require('yeoman-generator');
5 | var lodash = require('lodash');
6 | var json = require('fs');
7 |
8 |
9 | module.exports = {
10 |
11 |
12 | getArgsInArray: function (args) {
13 | var argsArray = [];
14 | if (args.length > 0) {
15 | var argumentsInString = "" + args;
16 | argsArray = argumentsInString.split('/');
17 | }
18 | else {
19 | console.log("Please specify the name of your component in camel case. Eg: MyFirstItem");
20 | }
21 | return argsArray;
22 | },
23 |
24 | getPathAndArgs: function (argsArray, haveToCreateFolder) {
25 | var path = "";
26 | var argsInKebab = "";
27 | var pathArgs = [];
28 | var length= argsArray.length;
29 | if(!haveToCreateFolder) length--;
30 | this.componentName = argsArray[argsArray.length - 1];
31 | for (var i = 0; i < length; i++) {
32 | var addAPlus = "";
33 | if (argsArray[i].indexOf("+") > -1) {
34 | addAPlus = "+";
35 | }
36 | if (i == 0) {
37 | path = addAPlus + lodash.kebabCase(argsArray[i]);
38 | }
39 | else {
40 | path = path + '/' + addAPlus + lodash.kebabCase(argsArray[i]);
41 | }
42 | }
43 | argsInKebab = lodash.kebabCase(argsArray[argsArray.length - 1]);
44 | pathArgs.push(path);
45 | pathArgs.push(argsInKebab);
46 |
47 | return pathArgs;
48 | }
49 |
50 | };
51 |
52 |
53 |
--------------------------------------------------------------------------------
/pipe/common-function.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Common function for generation
3 | */
4 | var generators = require('yeoman-generator');
5 | var lodash = require('lodash');
6 | var json = require('fs');
7 |
8 |
9 | module.exports = {
10 |
11 |
12 | getArgsInArray: function (args) {
13 | var argsArray = [];
14 | if (args.length > 0) {
15 | var argumentsInString = "" + args;
16 | argsArray = argumentsInString.split('/');
17 | }
18 | else {
19 | console.log("Please specify the name of your component in camel case. Eg: MyFirstItem");
20 | }
21 | return argsArray;
22 | },
23 |
24 | getPathAndArgs: function (argsArray, haveToCreateFolder) {
25 | var path = "";
26 | var argsInKebab = "";
27 | var pathArgs = [];
28 | var length= argsArray.length;
29 | if(!haveToCreateFolder) length--;
30 | this.componentName = argsArray[argsArray.length - 1];
31 | for (var i = 0; i < length; i++) {
32 | var addAPlus = "";
33 | if (argsArray[i].indexOf("+") > -1) {
34 | addAPlus = "+";
35 | }
36 | if (i == 0) {
37 | path = addAPlus + lodash.kebabCase(argsArray[i]);
38 | }
39 | else {
40 | path = path + '/' + addAPlus + lodash.kebabCase(argsArray[i]);
41 | }
42 | }
43 | argsInKebab = lodash.kebabCase(argsArray[argsArray.length - 1]);
44 | pathArgs.push(path);
45 | pathArgs.push(argsInKebab);
46 |
47 | return pathArgs;
48 | }
49 |
50 | };
51 |
52 |
53 |
--------------------------------------------------------------------------------
/service/common-function.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Common function for generation
3 | */
4 | var generators = require('yeoman-generator');
5 | var lodash = require('lodash');
6 | var json = require('fs');
7 |
8 |
9 | module.exports = {
10 |
11 |
12 | getArgsInArray: function (args) {
13 | var argsArray = [];
14 | if (args.length > 0) {
15 | var argumentsInString = "" + args;
16 | argsArray = argumentsInString.split('/');
17 | }
18 | else {
19 | console.log("Please specify the name of your component in camel case. Eg: MyFirstItem");
20 | }
21 | return argsArray;
22 | },
23 |
24 | getPathAndArgs: function (argsArray, haveToCreateFolder) {
25 | var path = "";
26 | var argsInKebab = "";
27 | var pathArgs = [];
28 | var length= argsArray.length;
29 | if(!haveToCreateFolder) length--;
30 | this.componentName = argsArray[argsArray.length - 1];
31 | for (var i = 0; i < length; i++) {
32 | var addAPlus = "";
33 | if (argsArray[i].indexOf("+") > -1) {
34 | addAPlus = "+";
35 | }
36 | if (i == 0) {
37 | path = addAPlus + lodash.kebabCase(argsArray[i]);
38 | }
39 | else {
40 | path = path + '/' + addAPlus + lodash.kebabCase(argsArray[i]);
41 | }
42 | }
43 | argsInKebab = lodash.kebabCase(argsArray[argsArray.length - 1]);
44 | pathArgs.push(path);
45 | pathArgs.push(argsInKebab);
46 |
47 | return pathArgs;
48 | }
49 |
50 | };
51 |
52 |
53 |
--------------------------------------------------------------------------------
/style/common-function.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Common function for generation
3 | */
4 | var generators = require('yeoman-generator');
5 | var lodash = require('lodash');
6 | var json = require('fs');
7 |
8 |
9 | module.exports = {
10 |
11 |
12 | getArgsInArray: function (args) {
13 | var argsArray = [];
14 | if (args.length > 0) {
15 | var argumentsInString = "" + args;
16 | argsArray = argumentsInString.split('/');
17 | }
18 | else {
19 | console.log("Please specify the name of your component in camel case. Eg: MyFirstItem");
20 | }
21 | return argsArray;
22 | },
23 |
24 | getPathAndArgs: function (argsArray, haveToCreateFolder) {
25 | var path = "";
26 | var argsInKebab = "";
27 | var pathArgs = [];
28 | var length= argsArray.length;
29 | if(!haveToCreateFolder) length--;
30 | this.componentName = argsArray[argsArray.length - 1];
31 | for (var i = 0; i < length; i++) {
32 | var addAPlus = "";
33 | if (argsArray[i].indexOf("+") > -1) {
34 | addAPlus = "+";
35 | }
36 | if (i == 0) {
37 | path = addAPlus + lodash.kebabCase(argsArray[i]);
38 | }
39 | else {
40 | path = path + '/' + addAPlus + lodash.kebabCase(argsArray[i]) ;
41 | }
42 | }
43 | argsInKebab = lodash.kebabCase(argsArray[argsArray.length - 1]);
44 | pathArgs.push(path);
45 | pathArgs.push(argsInKebab);
46 |
47 | return pathArgs;
48 | }
49 |
50 | };
51 |
52 |
53 |
--------------------------------------------------------------------------------
/component/common-function.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Common function for generation
3 | */
4 | var generators = require('yeoman-generator');
5 | var lodash = require('lodash');
6 | var json = require('fs');
7 |
8 |
9 | module.exports = {
10 |
11 |
12 | getArgsInArray: function (args) {
13 | var argsArray = [];
14 | if (args.length > 0) {
15 | var argumentsInString = "" + args;
16 | argsArray = argumentsInString.split('/');
17 | }
18 | else {
19 | console.log("Please specify the name of your component in camel case. Eg: MyFirstItem");
20 | }
21 | return argsArray;
22 | },
23 |
24 | getPathAndArgs: function (argsArray, haveToCreateFolder) {
25 | var path = "";
26 | var argsInKebab = "";
27 | var pathArgs = [];
28 | var length= argsArray.length;
29 | if(!haveToCreateFolder) length--;
30 | this.componentName = argsArray[argsArray.length - 1];
31 | for (var i = 0; i < length; i++) {
32 | var addAPlus = "";
33 | if (argsArray[i].indexOf("+") > -1) {
34 | addAPlus = "+";
35 | }
36 | if (i == 0) {
37 | path = addAPlus + lodash.kebabCase(argsArray[i]);
38 | }
39 | else {
40 | path = path + '/' + addAPlus + lodash.kebabCase(argsArray[i]);
41 | }
42 | }
43 | argsInKebab = lodash.kebabCase(argsArray[argsArray.length - 1]);
44 | pathArgs.push(path);
45 | pathArgs.push(argsInKebab);
46 |
47 | return pathArgs;
48 | }
49 |
50 | };
51 |
52 |
53 |
--------------------------------------------------------------------------------
/directive/common-function.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Common function for generation
3 | */
4 | var generators = require('yeoman-generator');
5 | var lodash = require('lodash');
6 | var json = require('fs');
7 |
8 |
9 | module.exports = {
10 |
11 |
12 | getArgsInArray: function (args) {
13 | var argsArray = [];
14 | if (args.length > 0) {
15 | var argumentsInString = "" + args;
16 | argsArray = argumentsInString.split('/');
17 | }
18 | else {
19 | console.log("Please specify the name of your component in camel case. Eg: MyFirstItem");
20 | }
21 | return argsArray;
22 | },
23 |
24 | getPathAndArgs: function (argsArray, haveToCreateFolder) {
25 | var path = "";
26 | var argsInKebab = "";
27 | var pathArgs = [];
28 | var length= argsArray.length;
29 | if(!haveToCreateFolder) length--;
30 | this.componentName = argsArray[argsArray.length - 1];
31 | for (var i = 0; i < length; i++) {
32 | var addAPlus = "";
33 | if (argsArray[i].indexOf("+") > -1) {
34 | addAPlus = "+";
35 | }
36 | if (i == 0) {
37 | path = addAPlus + lodash.kebabCase(argsArray[i]);
38 | }
39 | else {
40 | path = path + '/' + addAPlus + lodash.kebabCase(argsArray[i]);
41 | }
42 | }
43 | argsInKebab = lodash.kebabCase(argsArray[argsArray.length - 1]);
44 | pathArgs.push(path);
45 | pathArgs.push(argsInKebab);
46 |
47 | return pathArgs;
48 | }
49 |
50 | };
51 |
52 |
53 |
--------------------------------------------------------------------------------
/app/templates/src/_systemjs.config.js:
--------------------------------------------------------------------------------
1 | /**
2 | * System configuration for Angular 2 samples
3 | * Adjust as necessary for your application needs.
4 | */
5 | (function (global) {
6 | System.config({
7 | paths: {
8 | // paths serve as alias
9 | 'npm:': 'node_modules/'
10 | },
11 | // map tells the System loader where to look for things
12 | map: {
13 | // our app is within the app folder
14 | app: 'app',
15 | // angular bundles
16 | '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
17 | '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
18 | '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
19 | '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
20 | '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
21 | '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
22 | '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
23 | '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
24 | // other libraries
25 | 'rxjs': 'npm:rxjs'
26 | },
27 | // packages tells the System loader how to load when no filename and/or no extension
28 | packages: {
29 | app: {
30 | main: './main.js',
31 | defaultExtension: 'js'
32 | },
33 | rxjs: {
34 | defaultExtension: 'js'
35 | }
36 | }
37 | });
38 | })(this);
39 |
--------------------------------------------------------------------------------
/app/templates/gulp/utils/typescript.js:
--------------------------------------------------------------------------------
1 | import gulp from 'gulp';
2 | import path from 'path';
3 | import gulpLoadPlugins from 'gulp-load-plugins';
4 | import {getBrowserSync} from './browsersync';
5 | import {TEMPLATE_DIR} from '../gulp.conf';
6 |
7 | const plugins = gulpLoadPlugins();
8 |
9 | let _tsProject = plugins.typescript.createProject('tsconfig.json', {
10 | typescript: require('typescript')
11 | });
12 |
13 | let bs = getBrowserSync();
14 |
15 | const typings = ['typings/index.d.ts'];
16 |
17 | const INLINE_OPTIONS = {
18 | base : TEMPLATE_DIR,
19 | useRelativePaths: true,
20 | removeLineBreaks: true
21 | };
22 |
23 | /**
24 | * This function transpiles typescript files.
25 | *
26 | * @param {Array} filesArray - The files to be transpiled.
27 | * @param {String} destinationDirectory - The destination directory.
28 | * @param {boolean} enableProdMode - A boolean to define if we are in production or not.
29 | */
30 | export function typescript (filesArray, destinationDirectory, enableProdMode = false) {
31 | let ENV = enableProdMode ? 'prod' : 'dev';
32 |
33 | var result = gulp.src(typings.concat(filesArray))
34 | .pipe(plugins.template({ENV: ENV}, {interpolate : /<%%=([\s\S]+?)%>/g}))
35 | .pipe(plugins.if(!enableProdMode, plugins.sourcemaps.init()))
36 | .pipe(plugins.if(enableProdMode, plugins.inlineNg2Template(INLINE_OPTIONS)))
37 | .pipe(plugins.typescript(_tsProject));
38 |
39 | return result.js
40 | .pipe(plugins.if(!enableProdMode, plugins.sourcemaps.write('./')))
41 | .pipe(gulp.dest(destinationDirectory))
42 | .pipe(bs.stream({match: path.join('**', '*.js')}));
43 | }
--------------------------------------------------------------------------------
/style/index.js:
--------------------------------------------------------------------------------
1 | var generators = require('yeoman-generator');
2 | var lodash = require('lodash');
3 | var json = require('fs');
4 | var common = require('./common-function');
5 |
6 | /**
7 | * Global style generator. While user runs the command "yo angular2project NameOfTheGlobalStyle"
8 | * every function in the generator will be ran in order to generate a global style.
9 | * @type {void|*}
10 | */
11 | module.exports = generators.Base.extend({
12 |
13 | /**
14 | * Generator constructor. It reworks the arguments.
15 | */
16 | constructor: function () {
17 | generators.Base.apply(this, arguments);
18 | this.hasArgs = true;
19 |
20 | this.argsArray = common.getArgsInArray(this.arguments);
21 | if(this.argsArray.length == 0) this.hasArgs=false;
22 |
23 | this.reworkArguments = lodash.camelCase(this.arguments);
24 | this.nameOfStyle = this.reworkArguments.charAt(0).toUpperCase() + this.reworkArguments.slice(1);
25 | },
26 |
27 |
28 | /**
29 | * Function writing. This function copies the basic templates for global styles.
30 | */
31 | writing: function () {
32 |
33 | if (this.hasArgs) {
34 | if (this.argsArray.length > 1) {
35 | this.nameOfDirective=this.argsArray[this.argsArray.length-1];
36 | var pathAndArgs=common.getPathAndArgs(this.argsArray, false);
37 | this.path= pathAndArgs[0];
38 | this.argsInKebab = pathAndArgs[1];
39 |
40 | this.basicTemplate = 'src/styles/' + this.path + "/" + this.argsInKebab;
41 | }
42 | else{
43 | this.nameOfDirective=this.arguments;
44 | this.argsInKebab = lodash.kebabCase(this.arguments);
45 |
46 | this.basicTemplate = 'src/styles/' + this.argsInKebab;
47 | }
48 | this.copy('styles/_basic-template.css', this.basicTemplate + '.scss');
49 | }
50 |
51 | },
52 |
53 | });
--------------------------------------------------------------------------------
/app/templates/src/app/_app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { BrowserModule } from '@angular/platform-browser';
3 | import { HttpModule } from '@angular/http';
4 | import { RouterModule } from '@angular/router';
5 | import { AppComponent } from './app.component';
6 | import { routing, appRoutingProviders } from './app.routing';
7 |
8 | import { AboutModule } from './components/+about/about.module';
9 | import { HomeModule } from './components/+home/home.module';
10 | import { HeaderModule } from './components/header/header.module';
11 |
12 |
13 | /**
14 | * Modules are a good way to organize the application and allow you to add new capabilities to your app
15 | * thanks to external libraries.
16 | * app.module.ts is the root module class of your angular application. NgModule defines the metadata for AppModule
17 | * The main goal here is to import everything you need for your app
18 | */
19 | @NgModule({
20 | //Declaration: The list identifies the root component, here the component AppComponent. We define the top of this app's rather bare component tree.
21 | declarations: [AppComponent],
22 | //Imports: Modules to import
23 | imports:
24 | [BrowserModule, //BrowserModule: Registers critical application service providers. It also contains native directives like NgIf and NgFor.
25 | HttpModule, RouterModule, routing, //Module you need for your future HTTP services and for the routing system of your app
26 | AboutModule, HomeModule, HeaderModule], //Modules we have been developed
27 | providers: [appRoutingProviders], // Here you can provide the services you need for all your components. We add here the services for the routing
28 | bootstrap: [AppComponent], //We define the bootstrap component. When Angular launches the app, it places the HTML rendering of AppComponent in the DOM,
29 | // inside the element tags of the index.html
30 | })
31 | export class AppModule {}
--------------------------------------------------------------------------------
/app/templates/_package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "<%= projectTitle %>",
3 | "version": "0.1.0",
4 | "scripts": {
5 | "typings": "typings",
6 | "postinstall": "typings install"
7 | },
8 | "dependencies": {
9 | "@angular/common": "2.0.0",
10 | "@angular/compiler": "2.0.0",
11 | "@angular/core": "2.0.0",
12 | "@angular/forms": "2.0.0",
13 | "@angular/http": "2.0.0",
14 | "@angular/platform-browser": "2.0.0",
15 | "@angular/platform-browser-dynamic": "2.0.0",
16 | "@angular/router": "3.0.0",
17 | "core-js": "2.4.1",
18 | <% if (bootstrapValue === "y" || bootstrapValue === "yes"){ %>
19 | "jquery": "2.2.4",
20 | "tether": "^1.4.0",
21 | <% } %>
22 | "reflect-metadata": "0.1.3",
23 | "rxjs": "5.0.0-beta.12",
24 | "systemjs": "0.19.26",
25 | "zone.js": "0.6.23"
26 | },
27 | "devDependencies": {
28 | "babel-preset-es2015": "~6.6.0",
29 | "babel-register": "~6.8.0",
30 | "browser-sync": "~2.12.8",
31 | "connect-history-api-fallback": "~1.2.0",
32 | "del": "~2.2.0",
33 | "gulp": "~3.9.1",
34 | "gulp-changed": "~1.3.0",
35 | "gulp-concat": "~2.6.0",
36 | "gulp-concat-css": "~2.3.0",
37 | "gulp-if": "~2.0.1",
38 | "gulp-inject": "~4.0.0",
39 | "gulp-inline-ng2-template": "~1.1.4",
40 | "gulp-load-plugins": "~1.2.2",
41 | "gulp-sass": "~2.3.1",
42 | "gulp-shell": "~0.5.2",
43 | "gulp-sourcemaps": "~1.6.0",
44 | "gulp-template": "~4.0.0",
45 | "gulp-typescript": "~2.13.4",
46 | "gulp-uglify": "~1.5.3",
47 | "gulp-useref": "~3.1.0",
48 | "jasmine-core": "~2.4.1",
49 | "karma": "1.3.0",
50 | "karma-chrome-launcher": "^2.0.0",
51 | "karma-coverage": "~1.0.0",
52 | "karma-jasmine": "~1.0.2",
53 | "karma-mocha-reporter": "~2.0.3",
54 | "phantomjs-prebuilt": "~2.1.7",
55 | "require-dir": "~0.3.0",
56 | "run-sequence": "~1.2.1",
57 | "slash": "~1.0.0",
58 | "systemjs-builder": "0.15.14",
59 | "typescript": "2.0.2",
60 | "typings": "1.3.2"
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/service/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | *
3 | */
4 | var generators = require('yeoman-generator');
5 | var lodash = require('lodash');
6 | var common = require('./common-function');
7 |
8 |
9 | module.exports = generators.Base.extend({
10 |
11 | /**
12 | * Generator constructor. It reworks the arguments.
13 | */
14 | constructor: function () {
15 | generators.Base.apply(this, arguments);
16 | this.hasArgs = true;
17 |
18 | this.argsArray = common.getArgsInArray(this.arguments);
19 | if(this.argsArray.length == 0) this.hasArgs=false;
20 |
21 | this.reworkArguments = lodash.camelCase(this.arguments);
22 | this.nameOfService= this.reworkArguments.charAt(0).toUpperCase() + this.reworkArguments.slice(1);
23 | },
24 |
25 | /**
26 | * Function writing. This function copies the basic templates for services.
27 | */
28 | writing: function () {
29 | if (this.hasArgs) {
30 | if (this.argsArray.length > 1) {
31 | this.nameOfService=this.argsArray[this.argsArray.length-1];
32 | var pathAndArgs=common.getPathAndArgs(this.argsArray, false);
33 | this.path= pathAndArgs[0];
34 | this.argsInKebab = pathAndArgs[1];
35 |
36 | this.basicTemplateSrc = 'src/app/shared/services/src/' + this.path + "/" + this.argsInKebab;
37 | this.basicTemplateTest = 'src/app/shared/services/test/' + this.path + "/" + this.argsInKebab;
38 | this.pathForImport ='../../src/'+ this.path+"/"+this.argsInKebab;
39 | }
40 | else{
41 | this.nameOfService=this.arguments;
42 | this.argsInKebab = lodash.kebabCase(this.arguments);
43 |
44 | this.basicTemplateSrc = 'src/app/shared/services/src/' + this.argsInKebab;
45 | this.basicTemplateTest = 'src/app/shared/services/test/' + this.argsInKebab;
46 | this.pathForImport = '../src/'+this.argsInKebab;
47 | }
48 | this.copy('services/_basic-template.ts', this.basicTemplateSrc + '.service.ts');
49 | this.copy('services/_basic-template-test.ts', this.basicTemplateTest + '.service.spec.ts');
50 | }
51 |
52 | },
53 |
54 | });
--------------------------------------------------------------------------------
/pipe/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Index for pipe generation
3 | */
4 | var generators = require('yeoman-generator');
5 | var lodash = require('lodash');
6 | var common = require('./common-function');
7 |
8 | module.exports = generators.Base.extend({
9 |
10 | /**
11 | * Generator constructor. Verifies the number of arguments and reworks them.
12 | */
13 | constructor: function () {
14 | generators.Base.apply(this, arguments);
15 | this.hasArgs = true;
16 |
17 | this.argsArray = common.getArgsInArray(this.arguments);
18 | if(this.argsArray.length == 0) this.hasArgs=false;
19 |
20 | this.reworkArguments = lodash.camelCase(this.arguments);
21 | this.nameOfPipe= this.reworkArguments.charAt(0).toUpperCase() + this.reworkArguments.slice(1);
22 | },
23 |
24 | /**
25 | * Function writing. This function copies the basic templates for pipes.
26 | */
27 | writing: function () {
28 | if (this.hasArgs) {
29 | if (this.argsArray.length > 1) {
30 | this.nameOfPipe=this.argsArray[this.argsArray.length-1];
31 | var pathAndArgs=common.getPathAndArgs(this.argsArray, false);
32 | this.path= pathAndArgs[0];
33 | this.argsInKebab = pathAndArgs[1];
34 |
35 | this.basicTemplateSrc = 'src/app/shared/pipes/src/' + this.path + "/" + this.argsInKebab;
36 | this.basicTemplateTest = 'src/app/shared/pipes/test/' + this.path + "/" + this.argsInKebab;
37 | this.pathForImport ='../../src/'+ this.path+"/"+this.argsInKebab;
38 | }
39 | else{
40 | this.nameOfPipe=this.arguments;
41 | this.argsInKebab = lodash.kebabCase(this.arguments);
42 |
43 | this.basicTemplateSrc = 'src/app/shared/pipes/src/' + this.argsInKebab;
44 | this.basicTemplateTest = 'src/app/shared/pipes/test/' + this.argsInKebab;
45 | this.pathForImport = '../src/'+this.argsInKebab;
46 | }
47 | this.copy('pipes/_basic-template.ts', this.basicTemplateSrc + '.pipe.ts');
48 | this.copy('pipes/_basic-template-test.ts', this.basicTemplateTest + '.pipe.spec.ts');
49 | }
50 |
51 | },
52 |
53 | });
--------------------------------------------------------------------------------
/directive/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Index for directive generation
3 | */
4 | var generators = require('yeoman-generator');
5 | var lodash = require('lodash');
6 | var common = require('./common-function');
7 |
8 | module.exports = generators.Base.extend({
9 |
10 | /**
11 | * Generator constructor. Verifies the number of arguments and reworks them.
12 | */
13 | constructor: function () {
14 | generators.Base.apply(this, arguments);
15 | this.hasArgs = true;
16 |
17 | this.argsArray = common.getArgsInArray(this.arguments);
18 | if(this.argsArray.length == 0) this.hasArgs=false;
19 |
20 | this.reworkArguments = lodash.camelCase(this.arguments);
21 | this.nameOfDirective= this.reworkArguments.charAt(0).toUpperCase() + this.reworkArguments.slice(1);
22 | },
23 |
24 | /**
25 | * Function writing. This function copies the basic templates for directives.
26 | */
27 | writing: function () {
28 | if (this.hasArgs) {
29 | if (this.argsArray.length > 1) {
30 | this.nameOfDirective=this.argsArray[this.argsArray.length-1];
31 | var pathAndArgs=common.getPathAndArgs(this.argsArray, false);
32 | this.path= pathAndArgs[0];
33 | this.argsInKebab = pathAndArgs[1];
34 |
35 | this.basicTemplateSrc = 'src/app/shared/directives/src/' + this.path + "/" + this.argsInKebab;
36 | this.basicTemplateTest = 'src/app/shared/directives/test/' + this.path + "/" + this.argsInKebab;
37 | this.pathForImport ='../../src/'+ this.path+"/"+this.argsInKebab;
38 | }
39 | else{
40 | this.nameOfDirective=this.arguments;
41 | this.argsInKebab = lodash.kebabCase(this.arguments);
42 |
43 | this.basicTemplateSrc = 'src/app/shared/directives/src/' + this.argsInKebab;
44 | this.basicTemplateTest = 'src/app/shared/directives/test/' + this.argsInKebab;
45 | this.pathForImport = '../src/'+this.argsInKebab;
46 | }
47 | this.copy('directives/_basic-template.ts', this.basicTemplateSrc + '.directive.ts');
48 | this.copy('directives/_basic-template-test.ts', this.basicTemplateTest + '.directive.spec.ts');
49 | }
50 |
51 | },
52 |
53 | });
--------------------------------------------------------------------------------
/app/templates/gulp/gulp.conf.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This is the configuration file.
3 | *
4 | * This file is used by gulp tasks.
5 | */
6 |
7 | import path from 'path';
8 |
9 | export const INDEX = 'index.html';
10 | export const DIST_DIR = 'dist';
11 | export const SRC_DIR = 'src';
12 | export const APP_SRC = path.join(SRC_DIR, 'app');
13 | export const STYLES_SRC = path.join(SRC_DIR, 'styles');
14 | export const ASSETS_SRC = path.join(SRC_DIR, 'assets');
15 | export const DEV_DIR = path.join(DIST_DIR, 'dev');
16 | export const PROD_DIR = path.join(DIST_DIR, 'prod');
17 | export const TMP_DIR = path.join(DIST_DIR, 'tmp');
18 | export const TEMPLATE_DIR = path.join(DIST_DIR, 'template');
19 | export const JS_PROD_LIBS_BUNDLE = 'libs.js';
20 | export const CSS_PROD_LIBS_BUNDLE = 'libs.css';
21 | export const JS_PROD_APP_BUNDLE = 'app.js';
22 | export const CSS_PROD_BUNDLE = 'all.css';
23 | export const JS_PROD_DIR = path.join(PROD_DIR, 'js');
24 | export const CSS_PROD_DIR = path.join(PROD_DIR, 'css');
25 |
26 | export const JS_NPM_DEPENDENCIES = [
27 | // Angular dependencies needed.
28 | {src: 'node_modules/core-js/client/shim.min.js', inject: 'shims'},
29 | {src: 'node_modules/zone.js/dist/zone.js', inject: 'libs'},
30 | {src: 'node_modules/reflect-metadata/Reflect.js', inject: 'libs'},
31 | {src: 'node_modules/systemjs/dist/system.src.js', inject: 'libs'},
32 | <% if (bootstrapValue === "y" || bootstrapValue === "yes") { %>
33 | // Non Angular dependencies
34 | {src: 'node_modules/tether/dist/js/tether.js', inject: 'libs'},
35 | {src: 'node_modules/jquery/dist/jquery.js', inject: 'libs'},
36 | {src: 'node_modules/bootstrap/dist/js/bootstrap.js', inject: 'libs'}
37 | <% } %>
38 | ];
39 |
40 | export const CSS_NPM_DEPENDENCIES = [
41 | <% if (fontAwesomeValue === 'y' || fontAwesomeValue === 'yes') { %>
42 | {src: 'node_modules/font-awesome/css/font-awesome.min.css', inject: 'libs'}
43 | <% } %>
44 | ];
45 |
46 | const NPM_DEPENDENCIES = JS_NPM_DEPENDENCIES.concat(CSS_NPM_DEPENDENCIES);
47 |
48 | const PROJECT_DEPENDENCIES = [
49 | {src: path.join(STYLES_SRC, 'main.css'), inject: 'project'},
50 | {src: path.join(SRC_DIR, 'systemjs.config.js'), inject: 'project'}
51 |
52 | ];
53 |
54 | export const DEPENDENCIES = NPM_DEPENDENCIES.concat(PROJECT_DEPENDENCIES);
--------------------------------------------------------------------------------
/component/index.js:
--------------------------------------------------------------------------------
1 | var generators = require('yeoman-generator');
2 | var lodash = require('lodash');
3 | var json = require('fs');
4 | var common = require('./common-function');
5 |
6 | /**
7 | * Component generator. While user runs the command "yo angular2project:component ComponentName",
8 | * every function in the generator will be ran in order to generate a component with the following strucutre:
9 | * component-name.component.ts : The heart the component
10 | * component-name.component.spec.ts: The test of the previous ts file
11 | * component-name.component.css or .scss: The component style
12 | * component-name.componenent.html: The html file of the component.
13 | * @type {void|*}
14 | */
15 | module.exports = generators.Base.extend({
16 |
17 | /**
18 | * Generator constructor. It reworks the arguments.
19 | */
20 | constructor: function () {
21 | generators.Base.apply(this, arguments);
22 | this.hasArgs = true;
23 | this.argsArray = common.getArgsInArray(this.arguments);
24 | if(this.argsArray.length == 0) this.hasArgs=false;
25 |
26 | this.reworkArguments = lodash.camelCase(this.arguments);
27 | this.nameOfComponent = this.reworkArguments.charAt(0).toUpperCase() + this.reworkArguments.slice(1);
28 | },
29 |
30 | /**
31 | * Function writing. This function copies the basic templates for components.
32 | */
33 | writing: function () {
34 | if (this.hasArgs) {
35 | if (this.argsArray.length > 1) {
36 | this.componentName=this.argsArray[this.argsArray.length-1];
37 |
38 | var pathAndArgs=common.getPathAndArgs(this.argsArray,true);
39 | this.path= pathAndArgs[0];
40 | this.argsInKebab = pathAndArgs[1];
41 | this.basicTemplate = 'src/app/components/' +this.path + '/' + this.argsInKebab;
42 | }
43 | else {
44 | this.componentName=this.arguments;
45 | this.argsInKebab = lodash.kebabCase(this.arguments);
46 | this.path= lodash.kebabCase(this.arguments);
47 | this.basicTemplate = 'src/app/components/' + this.path + '/' + this.argsInKebab;
48 | }
49 | this.copy('components/_basic-template.html', this.basicTemplate + '.component.html');
50 | this.copy('components/_basic-template.ts', this.basicTemplate + '.component.ts');
51 | this.copy('components/_basic-template.css', this.basicTemplate + '.component.scss');
52 | this.copy('components/_basic-template-test.ts', this.basicTemplate + '.component.spec.ts');
53 | this.copy('components/_index.ts', 'src/app/components/' +this.path + '/index.ts');
54 | }
55 | },
56 |
57 | });
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | ### Specific
2 |
3 | typings/
4 | dist/
5 |
6 |
7 | ### Linux template
8 | *~
9 |
10 | # KDE directory preferences
11 | .directory
12 |
13 | # Linux trash folder which might appear on any partition or disk
14 | .Trash-*
15 |
16 | ### OSX template
17 | .DS_Store
18 | .AppleDouble
19 | .LSOverride
20 |
21 | # Icon must end with two \r
22 | Icon
23 |
24 | # Thumbnails
25 | ._*
26 |
27 | # Files that might appear in the root of a volume
28 | .DocumentRevisions-V100
29 | .fseventsd
30 | .Spotlight-V100
31 | .TemporaryItems
32 | .Trashes
33 | .VolumeIcon.icns
34 |
35 | # Directories potentially created on remote AFP share
36 | .AppleDB
37 | .AppleDesktop
38 | Network Trash Folder
39 | Temporary Items
40 | .apdisk
41 |
42 | ### JetBrains template
43 | # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio
44 |
45 | *.iml
46 |
47 | ## Directory-based project format:
48 | .idea/
49 | # if you remove the above rule, at least ignore the following:
50 |
51 | # User-specific stuff:
52 | # .idea/workspace.xml
53 | # .idea/tasks.xml
54 | # .idea/dictionaries
55 |
56 | # Sensitive or high-churn files:
57 | # .idea/dataSources.ids
58 | # .idea/dataSources.xml
59 | # .idea/sqlDataSources.xml
60 | # .idea/dynamic.xml
61 | # .idea/uiDesigner.xml
62 |
63 | # Gradle:
64 | # .idea/gradle.xml
65 | # .idea/libraries
66 |
67 | # Mongo Explorer plugin:
68 | # .idea/mongoSettings.xml
69 |
70 | ## File-based project format:
71 | *.ipr
72 | *.iws
73 |
74 | ## Plugin-specific files:
75 |
76 | # IntelliJ
77 | /out/
78 |
79 | # mpeltonen/sbt-idea plugin
80 | .idea_modules/
81 |
82 | # JIRA plugin
83 | atlassian-ide-plugin.xml
84 |
85 | # Crashlytics plugin (for Android Studio and IntelliJ)
86 | com_crashlytics_export_strings.xml
87 | crashlytics.properties
88 | crashlytics-build.properties
89 |
90 | ### Windows template
91 | # Windows image file caches
92 | Thumbs.db
93 | ehthumbs.db
94 |
95 | # Folder config file
96 | Desktop.ini
97 |
98 | # Recycle Bin used on file shares
99 | $RECYCLE.BIN/
100 |
101 | # Windows Installer files
102 | *.cab
103 | *.msi
104 | *.msm
105 | *.msp
106 |
107 | # Windows shortcuts
108 | *.lnk
109 |
110 | ### Node template
111 | # Logs
112 | logs
113 | *.log
114 | npm-debug.log*
115 |
116 | # Runtime data
117 | pids
118 | *.pid
119 | *.seed
120 |
121 | # Directory for instrumented libs generated by jscoverage/JSCover
122 | lib-cov
123 |
124 | # Coverage directory used by tools like istanbul
125 | coverage
126 |
127 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
128 | .grunt
129 |
130 | # node-waf configuration
131 | .lock-wscript
132 |
133 | # Compiled binary addons (http://nodejs.org/api/addons.html)
134 | build/Release
135 |
136 | # Dependency directory
137 | # https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
138 | node_modules
139 |
--------------------------------------------------------------------------------
/app/templates/_.gitignore:
--------------------------------------------------------------------------------
1 | ### Specific
2 |
3 | typings/
4 | dist/
5 |
6 |
7 | ### Linux template
8 | *~
9 |
10 | # KDE directory preferences
11 | .directory
12 |
13 | # Linux trash folder which might appear on any partition or disk
14 | .Trash-*
15 |
16 | ### OSX template
17 | .DS_Store
18 | .AppleDouble
19 | .LSOverride
20 |
21 | # Icon must end with two \r
22 | Icon
23 |
24 | # Thumbnails
25 | ._*
26 |
27 | # Files that might appear in the root of a volume
28 | .DocumentRevisions-V100
29 | .fseventsd
30 | .Spotlight-V100
31 | .TemporaryItems
32 | .Trashes
33 | .VolumeIcon.icns
34 |
35 | # Directories potentially created on remote AFP share
36 | .AppleDB
37 | .AppleDesktop
38 | Network Trash Folder
39 | Temporary Items
40 | .apdisk
41 |
42 | ### JetBrains template
43 | # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio
44 |
45 | *.iml
46 |
47 | ## Directory-based project format:
48 | .idea/
49 | # if you remove the above rule, at least ignore the following:
50 |
51 | # User-specific stuff:
52 | # .idea/workspace.xml
53 | # .idea/tasks.xml
54 | # .idea/dictionaries
55 |
56 | # Sensitive or high-churn files:
57 | # .idea/dataSources.ids
58 | # .idea/dataSources.xml
59 | # .idea/sqlDataSources.xml
60 | # .idea/dynamic.xml
61 | # .idea/uiDesigner.xml
62 |
63 | # Gradle:
64 | # .idea/gradle.xml
65 | # .idea/libraries
66 |
67 | # Mongo Explorer plugin:
68 | # .idea/mongoSettings.xml
69 |
70 | ## File-based project format:
71 | *.ipr
72 | *.iws
73 |
74 | ## Plugin-specific files:
75 |
76 | # IntelliJ
77 | /out/
78 |
79 | # mpeltonen/sbt-idea plugin
80 | .idea_modules/
81 |
82 | # JIRA plugin
83 | atlassian-ide-plugin.xml
84 |
85 | # Crashlytics plugin (for Android Studio and IntelliJ)
86 | com_crashlytics_export_strings.xml
87 | crashlytics.properties
88 | crashlytics-build.properties
89 |
90 | ### Windows template
91 | # Windows image file caches
92 | Thumbs.db
93 | ehthumbs.db
94 |
95 | # Folder config file
96 | Desktop.ini
97 |
98 | # Recycle Bin used on file shares
99 | $RECYCLE.BIN/
100 |
101 | # Windows Installer files
102 | *.cab
103 | *.msi
104 | *.msm
105 | *.msp
106 |
107 | # Windows shortcuts
108 | *.lnk
109 |
110 | ### Node template
111 | # Logs
112 | logs
113 | *.log
114 | npm-debug.log*
115 |
116 | # Runtime data
117 | pids
118 | *.pid
119 | *.seed
120 |
121 | # Directory for instrumented libs generated by jscoverage/JSCover
122 | lib-cov
123 |
124 | # Coverage directory used by tools like istanbul
125 | coverage
126 |
127 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
128 | .grunt
129 |
130 | # node-waf configuration
131 | .lock-wscript
132 |
133 | # Compiled binary addons (http://nodejs.org/api/addons.html)
134 | build/Release
135 |
136 | # Dependency directory
137 | # https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
138 | node_modules
139 |
140 |
--------------------------------------------------------------------------------
/app/templates/_karma-test-shim.js:
--------------------------------------------------------------------------------
1 | // #docregion
2 | // /*global jasmine, __karma__, window*/
3 | Error.stackTraceLimit = 0; // "No stacktrace"" is usually best for app testing.
4 |
5 | // Uncomment to get full stacktrace output. Sometimes helpful, usually not.
6 | // Error.stackTraceLimit = Infinity; //
7 |
8 | jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;
9 |
10 | var builtPath = '/base/';
11 |
12 | __karma__.loaded = function () { };
13 |
14 | function isJsFile(path) {
15 | return path.slice(-3) == '.js';
16 | }
17 |
18 | function isSpecFile(path) {
19 | return /\.spec\.(.*\.)?js$/.test(path);
20 | }
21 |
22 | function isBuiltFile(path) {
23 | return isJsFile(path) && (path.substr(0, builtPath.length) == builtPath);
24 | }
25 |
26 | var allSpecFiles = Object.keys(window.__karma__.files)
27 | .filter(isSpecFile)
28 | .filter(isBuiltFile);
29 |
30 | System.config({
31 | baseURL: '/base',
32 | // Extend usual application package list with test folder
33 | packages: { dist: { defaultExtension: 'js' } },
34 |
35 | // Assume npm: is set in `paths` in systemjs.config
36 | // Map the angular testing umd bundles
37 | map: {
38 | '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
39 | '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
40 | '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
41 | '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
42 | '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
43 | '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
44 | '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
45 | '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js'
46 | },
47 | });
48 |
49 | System.import('src/systemjs.config.js')
50 | .then(initTestBed)
51 | .then(initTesting);
52 |
53 | function initTestBed(){
54 | return Promise.all([
55 | System.import('@angular/core/testing'),
56 | System.import('@angular/platform-browser-dynamic/testing')
57 | ])
58 |
59 | .then(function (providers) {
60 | var coreTesting = providers[0];
61 | var browserTesting = providers[1];
62 |
63 | coreTesting.TestBed.initTestEnvironment(
64 | browserTesting.BrowserDynamicTestingModule,
65 | browserTesting.platformBrowserDynamicTesting());
66 | })
67 | }
68 |
69 | // Import all spec files and start karma
70 | function initTesting () {
71 | return Promise.all(
72 | allSpecFiles.map(function (moduleName) {
73 | return System.import(moduleName);
74 | })
75 | )
76 | .then(__karma__.start, __karma__.error);
77 | }
--------------------------------------------------------------------------------
/app/templates/gulp/utils/inject.js:
--------------------------------------------------------------------------------
1 | import gulp from 'gulp';
2 | import path from 'path';
3 | import slash from 'slash';
4 | import gulpLoadPlugins from 'gulp-load-plugins';
5 | import {
6 | DEPENDENCIES,
7 | SRC_DIR,
8 | DEV_DIR,
9 | JS_PROD_DIR,
10 | JS_PROD_LIBS_BUNDLE,
11 | JS_PROD_APP_BUNDLE,
12 | CSS_PROD_DIR,
13 | CSS_PROD_BUNDLE,
14 | CSS_PROD_LIBS_BUNDLE
15 | } from '../gulp.conf';
16 |
17 | const plugins = gulpLoadPlugins();
18 |
19 | /**
20 | * This function inject dependencies in the index.html.
21 | *
22 | * @param {String} destinationDirectory - The destination directory.
23 | * @param {String} name - Optional tag name.
24 | */
25 | export function inject (destinationDirectory, name = null) {
26 | return plugins.if(destinationDirectory === DEV_DIR,
27 | injectDev(destinationDirectory, name),
28 | injectProd(destinationDirectory, getProdDependencies()));
29 | }
30 |
31 | /**
32 | * This function inject files in dev mode.
33 | *
34 | * @param {String} destinationDirectory - The destination directory.
35 | * @param {String} name - Optional tag name.
36 | */
37 | function injectDev (destinationDirectory, name) {
38 | return plugins.inject(gulp.src(getInjectablesDependenciesRef(name, destinationDirectory), {read: false}), {
39 | name,
40 | transform: transformPath(destinationDirectory)
41 | });
42 | }
43 |
44 | /**
45 | * This function inject files in prod mode.
46 | *
47 | * @param {String} destinationDirectory - The destination directory.
48 | * @param {Array} files - Files to inject.
49 | * @returns {*}
50 | */
51 | function injectProd (destinationDirectory, files) {
52 | return plugins.inject(gulp.src(files, {read: false}), {
53 | files,
54 | transform: transformPath(destinationDirectory)
55 | });
56 | }
57 |
58 | /**
59 | * Returns the prod injectable dependencies.
60 | */
61 | function getProdDependencies () {
62 | return [path.join(JS_PROD_DIR, JS_PROD_LIBS_BUNDLE),
63 | path.join(JS_PROD_DIR, JS_PROD_APP_BUNDLE),
64 | path.join(CSS_PROD_DIR, CSS_PROD_BUNDLE),
65 | path.join(CSS_PROD_DIR, CSS_PROD_LIBS_BUNDLE)]
66 | }
67 |
68 | /**
69 | * Returns the dev injectable dependencies, mapping its filename to its path.
70 | *
71 | * @param {String} name - The dependency to be mapped.
72 | * @param {String} destinationDirectory - The destination directory.
73 | */
74 | function getInjectablesDependenciesRef (name, destinationDirectory) {
75 | return DEPENDENCIES
76 | .filter(dep => dep['inject'] === name)
77 | .map(mapPath(destinationDirectory));
78 | }
79 |
80 | /**
81 | * Maps the path of the given dependency to its path according to the applications environment.
82 | *
83 | * @param {String} destinationDirectory - The destination directory.
84 | */
85 | function mapPath (destinationDirectory) {
86 | return function (dep) {
87 | let envPath = dep.src;
88 | if (envPath.startsWith(SRC_DIR)) {
89 | envPath = path.join(destinationDirectory, dep.src.replace(SRC_DIR, ''));
90 | }
91 | return envPath;
92 | }
93 | }
94 |
95 | /**
96 | * Transform the path of a dependency to its location within the `dist` directory.
97 | *
98 | * @param {String} destinationDirectory - The destination directory.
99 | */
100 | function transformPath (destinationDirectory) {
101 | return function (filepath) {
102 | if (filepath.startsWith(slash('/' + destinationDirectory))) {
103 | filepath = filepath.replace(slash('/' + destinationDirectory) + '/', '');
104 | }
105 | arguments[0] = path.join(filepath) + `?${Date.now()}`;
106 | return slash(plugins.inject.transform.apply(plugins.inject.transform, arguments));
107 | };
108 | }
--------------------------------------------------------------------------------
/app/templates/gulp/utils/karma.js:
--------------------------------------------------------------------------------
1 | import karmaServer from 'karma';
2 |
3 | const Server = karmaServer.Server;
4 |
5 | /**
6 | * This function launches karma.
7 | *
8 | * @param {string} destinationDirectory - The destination directory.
9 | * @param {boolean} singleRun - Tests are run once or in watch mode.
10 | * @param {Function} done - Callback
11 | */
12 | export function karma (destinationDirectory, singleRun, done) {
13 |
14 | // This is to specifies files that need coverage dynamically.
15 | let filesCoverage = {};
16 | filesCoverage[destinationDirectory + '/**/!(*spec).js'] = ['coverage'];
17 |
18 | let appBase = destinationDirectory + '/app/'; // transpiled app JS and map files
19 | let appSrcBase = 'src/app/'; // app source TS files
20 | let appAssets = '/base/' + destinationDirectory + '/app/'; // component assets fetched by Angular's compiler
21 |
22 | new Server({
23 | basePath : '',
24 | frameworks: ['jasmine'],
25 | plugins : [
26 | 'karma-jasmine',
27 | 'karma-chrome-launcher',
28 | 'karma-mocha-reporter',
29 | 'karma-coverage'
30 | ],
31 | reporters : [
32 | 'mocha',
33 | 'coverage'
34 | ],
35 | files : [
36 | // System.js for module loading
37 | 'node_modules/systemjs/dist/system.src.js',
38 |
39 | // Polyfills
40 | 'node_modules/core-js/client/shim.js',
41 | 'node_modules/reflect-metadata/Reflect.js',
42 |
43 | // zone.js
44 | 'node_modules/zone.js/dist/zone.js',
45 | 'node_modules/zone.js/dist/long-stack-trace-zone.js',
46 | 'node_modules/zone.js/dist/proxy.js',
47 | 'node_modules/zone.js/dist/sync-test.js',
48 | 'node_modules/zone.js/dist/jasmine-patch.js',
49 | 'node_modules/zone.js/dist/async-test.js',
50 | 'node_modules/zone.js/dist/fake-async-test.js',
51 |
52 | // RxJs
53 | { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
54 | { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
55 |
56 | // Paths loaded via module imports:
57 | // Angular itself
58 | {pattern: 'node_modules/@angular/**/*.js', included: false, watched: false},
59 | {pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false},
60 |
61 | {pattern: 'src/systemjs.config.js', included: false, watched: false},
62 | 'karma-test-shim.js',
63 |
64 | // transpiled application & spec code paths loaded via module imports
65 | {pattern: appBase + '**/*.js', included: false, watched: true},
66 |
67 |
68 | // Asset (HTML & CSS) paths loaded via Angular's component compiler
69 | // (these paths need to be rewritten, see proxies section)
70 | {pattern: appBase + '**/*.html', included: false, watched: true},
71 | {pattern: appBase + '**/*.css', included: false, watched: true},
72 |
73 | // Paths for debugging with source maps in dev tools
74 | {pattern: appSrcBase + '**/*.ts', included: false, watched: false},
75 | {pattern: appBase + '**/*.js.map', included: false, watched: false},
76 |
77 | ],
78 | // Proxied base paths for loading assets
79 | proxies: {
80 | // required for component assets fetched by Angular's compiler
81 | "/app/": appAssets
82 | },
83 |
84 | singleRun: singleRun,
85 | autoWatch: !singleRun,
86 | browsers : ['Chrome'], //, 'IE' can be used too.
87 |
88 | preprocessors: filesCoverage,
89 |
90 | // optionally, configure the reporter
91 | coverageReporter: {
92 | dir : 'coverage/',
93 | reporters: [
94 | {type: 'text-summary'},
95 | {type: 'html'}
96 | ]
97 | }
98 | }, function () {
99 | done();
100 | }).start();
101 | }
--------------------------------------------------------------------------------
/app/index.js:
--------------------------------------------------------------------------------
1 | var generators = require('yeoman-generator');
2 | var lodash = require('lodash');
3 | const fs = require('fs');
4 |
5 | module.exports = generators.Base.extend({
6 |
7 | /**
8 | * Function askProjectName asks user the project name.
9 | * We store the answer in the attribute projectTitle.
10 | */
11 | askProjectName: function () {
12 | var done = this.async();
13 | this.prompt({
14 | type: 'input',
15 | name: 'appName',
16 | message: 'Your project name: ',
17 | store: true,
18 | default: "MyApp"
19 | }, function (answers) {
20 | this.projectTitle = answers.appName;
21 | done();
22 | }.bind(this));
23 | },
24 |
25 | /**
26 | * Function askForBootstrap. This function asks to user if he would like to use Bootstrap.
27 | * We store his answers in the variable bootstrapValue.
28 | */
29 | askForBootstrap: function () {
30 | var done = this.async();
31 | this.prompt({
32 | type: 'input',
33 | name: 'bootstrap',
34 | message: 'Would you like to use Bootstrap? (Y/N)',
35 | store: true,
36 | default: "N" // Default
37 | }, function (answers) {
38 | this.bootstrapValue = answers.bootstrap.toLowerCase();
39 | done();
40 | }.bind(this));
41 | },
42 |
43 | /**
44 | * Function askForFoundation. This function asks to user if he would like to use Foundation.
45 | * We store his answers in the variable foundationValue.
46 | */
47 | askForFoundation: function () {
48 | if (this.bootstrapValue !== "yes" && this.bootstrapValue !== "y") {
49 | var done = this.async();
50 | this.prompt({
51 | type: 'input',
52 | name: 'foundation',
53 | message: 'Would you like to use Foundation? (Y/N)',
54 | store: true,
55 | default: "N" // Default
56 | }, function (answers) {
57 | this.foundationValue = answers.foundation.toLowerCase();
58 | done();
59 | }.bind(this));
60 | }
61 | },
62 |
63 |
64 | /**
65 | * Function askForFontAwesome. This function asks to user if he would like to use Font Awesome.
66 | * We store his answers in the variable fontAwesomeValue.
67 | */
68 | askForFontAwesome: function () {
69 | var done = this.async();
70 | this.prompt({
71 | type: 'input',
72 | name: 'fontAwesome',
73 | message: 'Would you like to use Font Awesome? (Y/N)',
74 | store: true,
75 | default: "N" // Default
76 | }, function (answers) {
77 | this.fontAwesomeValue = answers.fontAwesome.toLowerCase();
78 | done();
79 | }.bind(this));
80 | },
81 |
82 | /**
83 | * Function writing. This function copies the templates according to user choices and build the first version of the application.
84 | */
85 | writing: function () {
86 |
87 | this.basicTemplate = 'src/components/' + lodash.kebabCase(this.projectTitle);
88 |
89 | this.copy('_package.json', 'package.json');
90 | this.copy('_karma-test-shim.js', 'karma-test-shim.js');
91 | this.copy('_.babelrc', '.babelrc');
92 | this.copy('_readme.md', 'readme.md');
93 | this.copy('_.gitignore', '.gitignore');
94 | this.copy('_tsconfig.json', 'tsconfig.json');
95 | this.copy('_typings.json', 'typings.json');
96 | this.copy('_gulpfile.babel.js', 'gulpfile.babel.js');
97 |
98 | this.copy('src/_index.html', 'src/index.html');
99 | this.copy('src/_systemjs.config.js', 'src/systemjs.config.js');
100 |
101 | this.directory('src/assets', 'src/assets');
102 |
103 | //Component folder creation
104 | this.copy('src/app/components/_README.md', 'src/app/components/README.md');
105 | this.copy('src/app/_app.component.ts', 'src/app/app.component.ts');
106 | this.copy('src/app/_app.component.spec.ts', 'src/app/app.component.spec.ts');
107 | this.copy('src/app/_app.component.html', 'src/app/app.component.html');
108 | this.copy('src/app/_app.component.scss', 'src/app/app.component.scss');
109 | this.copy('src/app/_main.ts', 'src/app/main.ts');
110 | this.copy('src/app/_app.module.ts', 'src/app/app.module.ts');
111 | this.copy('src/app/_app.routing.ts', 'src/app/app.routing.ts');
112 | this.copy('src/app/_main.ts', 'src/app/main.ts');
113 |
114 | var component = ["about", "header", "home"];
115 | var folderName = ["+about", "header", "+home"];
116 |
117 | for (var i = 0; i < component.length; i++) {
118 | this.copy('src/app/components/' + folderName[i] + '/_' + component[i] + '.component.html', 'src/app/components/' + folderName[i] + '/' + component[i] + '.component.html');
119 | this.copy('src/app/components/' + folderName[i] + '/_' + component[i] + '.component.scss', 'src/app/components/' + folderName[i] + '/' + component[i] + '.component.scss');
120 | this.copy('src/app/components/' + folderName[i] + '/_' + component[i] + '.component.ts', 'src/app/components/' + folderName[i] + '/' + component[i] + '.component.ts');
121 | this.copy('src/app/components/' + folderName[i] + '/_' + component[i] + '.component.spec.ts', 'src/app/components/' + folderName[i] + '/' + component[i] + '.component.spec.ts');
122 | this.copy('src/app/components/' + folderName[i] + '/_' + component[i] + '.module.ts', 'src/app/components/' + folderName[i] + '/' + component[i] + '.module.ts');
123 |
124 | try {
125 | this.copy('src/app/components/' + folderName[i] + '/_' + component[i] + '.routing.ts', 'src/app/components/' + folderName[i] + '/' + component[i] + '.routing.ts');
126 | } catch (ex) {}
127 |
128 | this.copy('src/app/components/' + folderName[i] + '/_index.ts', 'src/app/components/' + folderName[i] + '/index.ts');
129 | }
130 |
131 | this.directory('src/app/shared', 'src/app/shared');
132 | this.directory('src/app/components/core', 'src/app/components/core');
133 |
134 | //Styles folder and content creation
135 | //We initialise the message which appears in the readme of the style folder. We give two different message
136 | //if sass has been installed or not.
137 | this.messageInReadMe = "";
138 |
139 | this.messageInReadMe = "Initially, we generate two files: " +
140 | "- main.scss: File Sass which defines the common part in the design of the application" +
141 | "- variables.scss: Contains all css variables used for the design";
142 |
143 | if (this.bootstrapValue === "y" || this.bootstrapValue === "yes") {
144 | if (this.fontAwesomeValue === "y" || this.fontAwesomeValue === "yes") {
145 | this.copy('src/styles/_main-bootstrap-font.scss', 'src/styles/main.scss');
146 | }
147 | else {
148 | this.copy('src/styles/_main-bootstrap.scss', 'src/styles/main.scss');
149 | }
150 | }
151 | else if (this.foundationValue === "y" || this.foundationValue === "yes") {
152 | if (this.fontAwesomeValue === "y" || this.fontAwesomeValue === "yes") {
153 | this.copy('src/styles/_main-foundation-font.scss', 'src/styles/main.scss');
154 | }
155 | else {
156 | this.copy('src/styles/_main-foundation.scss', 'src/styles/main.scss');
157 | }
158 | this.copy('src/app/components/+about/_about-foundation.component.html', 'src/app/components/+about/about.component.html');
159 | this.copy('src/app/components/+home/_home-foundation.component.html', 'src/app/components/+home/home.component.html');
160 | this.copy('src/app/components/+home/_home-foundation.component.scss', 'src/app/components/+home/home.component.scss');
161 | this.copy('src/app/components/header/_header-foundation.component.html', 'src/app/components/header/header.component.html');
162 | }
163 | else {
164 | this.copy('src/styles/_main.scss', 'src/styles/main.scss');
165 | }
166 | this.copy('src/styles/_variables.scss', 'src/styles/_variables.scss');
167 |
168 | this.copy('src/styles/_README.md', 'src/styles/README.md');
169 |
170 | this.directory("src/styles/core", "src/styles/core");
171 |
172 | //Copy grunt tasks
173 | this.directory("gulp", "gulp");
174 | },
175 |
176 | /**
177 | * Function installBootstrapOrFoundation. This function checks if user want to install Bootstrap or Foundation.
178 | * If one of those framework has been chosen, the function install it.
179 | */
180 | installBootstrapOrFoundation: function () {
181 | if (this.bootstrapValue === "y" || this.bootstrapValue === "yes") {
182 | this.npmInstall(['bootstrap@4.0.0-alpha.2'], {'save': true}); //npm install bootstrap@4.0.0-alpha.2 --save
183 | }
184 | else if (this.foundationValue === "y" || this.foundationValue === "yes") {
185 | this.npmInstall(['foundation-sites'], {'save': true}); //npm install foundation-sites --save
186 | }
187 | },
188 |
189 | /**
190 | * Function installFontAwesome. This function checks if user want to install FontAwesome, if yes it runs the installation.
191 | */
192 | installFontAwesome: function () {
193 | if (this.fontAwesomeValue === "y" || this.fontAwesomeValue === "yes") {
194 | this.npmInstall(['font-awesome'], {'save': true}); //npm install font-awesome --save
195 | }
196 | },
197 |
198 | /**
199 | * Function install. This function installs all dependencies according to user choices.
200 | */
201 | install: function () {
202 | this.npmInstall(['gulp-cli'], {'g': true});
203 | this.npmInstall(); //npm install
204 | },
205 |
206 | });
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # angular2gen
2 |
3 | This project is no longer supported. Use angular-cli instead
4 |
5 | # Build your Angular2 app from a simple basis
6 |
7 | Do you want to learn Angular 2 ? Do you want to build an Angular 2 application from a simple basis ? Do you need an assistance in your development ? Angular2gen has been made for you!
8 |
9 | Angular 2 is a new framework totally different from AngularJS 1 and other JavaScript frameworks. Everybody starts Angular2 from 0 (almost :P). In consequence, two important axes appear as the key to succeed your first Angular2 development: simplicity and assistance.
10 |
11 | That the reason why we built angular2gen, a Yeoman generator for Angular 2, with two goals in mind:
12 | - Be able to create a simple and intuitive project structure according to the tools you would like to use.
13 | - Be able to generate everything you need for your development: components, directives, services, global styles.
14 |
15 | We developed also several Gulp task for launching the application (Sass and typescript compilation), live reload etc...
16 |
17 | ## Generate an Angular 2 project
18 |
19 | ### Installation and execution
20 |
21 | 1) Install NodeJS: Use the [NodeJS Installer](https://nodejs.org/en/download/)
22 |
23 | 2) Install Yeoman: Open shell and run:
24 |
25 | ```
26 | npm install -g yo
27 | ```
28 |
29 | 3) Install angular2gen
30 |
31 | ```
32 | npm install -g yo generator-angular2gen
33 | ```
34 |
35 | 4) Run angular2gen:
36 |
37 | ```
38 | yo angular2gen
39 | ```
40 |
41 | ### Tools installation
42 |
43 | Just after running the previous command, angular2gen will ask you the name of your project and which tools would you like to use.
44 | For tools, it can install:
45 | - Bootstrap (v4.0.0-alpha.2) or Foundation
46 | - Font Awesome.
47 |
48 | ```
49 | Your project name: NameOfYourfirstApp
50 | Would you like to use Bootstrap ? (Y/N) N
51 | Would you like to use Foundation ? (Y/N) Y
52 | Would you like to use FontAwesome ? (Y/N) Y
53 | ```
54 |
55 | If you think tools are missing, do not hesitate to contact us and tell us which tools should be interesting to use in an Angular 2 app!
56 |
57 | ###Folder architecture
58 |
59 | When your project has been generated, you will find the following structure
60 | ```
61 | - package.json
62 | - src
63 | │_ main.ts
64 | │_ routeur.ts
65 | │_ index.html
66 | - components
67 | - app
68 | - +about
69 | - +home
70 | - core
71 | │_ app.component.html
72 | │_ app.component.scss
73 | │_ app.component.spec.ts
74 | │_ app.component.ts
75 | │_ README.md
76 | - shared
77 | - services
78 | - src
79 | │_ README.md
80 | - test
81 | │_ README.md
82 | - directives
83 | - src
84 | │_ README.md
85 | - test
86 | │_ README.md
87 | - pipes
88 | - src
89 | │_ README.md
90 | - test
91 | │_ README.md
92 | - styles
93 | │_ README.md
94 | - assets
95 | - gulp
96 | - manual_typings
97 | - typings
98 | ```
99 |
100 |
101 | #### Why do certain folders have a "+" as a prefix?
102 | In order to specify these folders as lazy loaded folders. Lazy loading is widespread practice which consists in loading only the files you need in your page. The "+" annotation allows you to specify which of your component should be lazy loaded.
103 | For more information, you can check the [tutorial](http://blog.mgechev.com/2015/09/30/lazy-loading-components-routes-services-router-angular-2/) wrote by Minko Gechev on Lazy Loading. You can also check the [Angular 2 style guide](https://angular.io/styleguide) for more information on angular 2 guidelines.
104 |
105 |
106 | #### Folder core: Angular2gen library, what is it?
107 | In order to assist you in angular 2 learning and in your development, we are developing a set of common component. The folder core will contain all the common component we are developing: login, logout, headers, footers, cards etc...
108 |
109 | If you would like to participate in this library development, do not hesitate to contact us (cf. contact us part bellow) or open a pull request.
110 |
111 | Our main goal is to create a huge set of components with tones of different design, behavior etc...
112 |
113 |
114 | ## Run application
115 |
116 | When the project has been generated, you can run the application with the following command:
117 | ```
118 | gulp serve
119 | ```
120 |
121 | ### Tests
122 | To run tests and work on TDD mode, you can run the following command right just after the one above:
123 | ```
124 | gulp karma:dev
125 | ```
126 |
127 | ## Generate components
128 |
129 | To generate a component, you just have to run the following command in your shell:
130 | ```
131 | yo angular2gen:component Name
132 | ```
133 |
134 | ##### The component name will be NameComponent.
135 | ##### For instance, you run yo angular2gen:component Menu, the name of the class will be MenuComponent
136 |
137 | We made this choice for two reasons:
138 | - Avoid conflict between names of your components, services and directives
139 | - Better maintanability and modifiability. A quick eye on the file and you know variables role.
140 |
141 | The command will create the folder name-of-your-component in the folder components with the following files:
142 | ```
143 | - name-of-your-component
144 | │_ name-of-your-component.component.html: The html file of the component
145 | │_ name-of-your-component.component.scss or css (depends on Sass installation): The css file of the component
146 | │_ name-of-your-component.component.spec.ts: The test file of the component
147 | │_ name-of-your-component.component.ts: The component
148 | │_ index.ts: Barel of your component
149 | ```
150 | ####What is a barel ?
151 |
152 | A barel is a file that imports, aggregates, and re-exports items. We use them for several reasons:
153 | - A barrel aggregates many imports into a single import.
154 | - A barrel reduces the number of imports a file may need.
155 | - A barrel provides a consistent pattern to import everything exported in the barrel from a folder.
156 | - This is consistent with a pattern from Node, which imports the index.js|ts file from a folder.
157 | - A barrel shortens import statements.
158 |
159 |
160 | ####Specify a destination folder
161 | You can also specify a destination folder when you generate your component. For instance, if you would like to create a new component into the folder +about, you just have to run the following command:
162 |
163 | ```
164 | yo angular2gen:component +about/Name
165 | ```
166 |
167 | ## Generate directives
168 |
169 | To generate a directive, run the following command in your shell:
170 | ```
171 | yo angular2gen:directive Name
172 | ```
173 | ##### The directive name will be NameDirective.
174 | ##### For instance, you run yo angular2gen:directive Draggable, the name of the class will be DraggableDirective
175 |
176 | As you have seen in the folder architecture of the generator, the folder directives has two folders: one for the sources *src* and another for the tests *test*
177 | ```
178 | - src
179 | │_ draggable.directive.ts : The main file of your directive
180 | - test
181 | │_ draggable.directive.spec.ts: The test file of your directive
182 | ```
183 |
184 | As for components, you can specify the path where you would like to create the directive.
185 | ```
186 | yo angular2gen:pipe behaviour/Draggable
187 | ```
188 | The previous command will create the following structure:
189 | ```
190 | - src
191 | -behaviour
192 | │_ draggable.directive.ts: The main file of your directive
193 | - test
194 | -behaviour
195 | │_cdraggable.spec.ts: The test file of your directive
196 | ```
197 |
198 | ## Generate services
199 |
200 | To generate a service, run the following command in your shell:
201 | ```
202 | yo angular2gen:service Name
203 | ```
204 |
205 | ##### The service name will be NameService.
206 | ##### For instance, you run yo angular2gen:service CallDataBase, the name of the class will be CallDataBaseService
207 |
208 | As for directives, services follow the same architecture with two folders: one for the sources *src* and another for the tests *test*
209 | ```
210 | - src
211 | │_ call-data-base.service.ts : The main file of your service
212 | - test
213 | │_ call-data-base.service.spec.ts: The test file of your service
214 | ```
215 |
216 | As for components, you can specify the path where you would like to create the service.
217 | ```
218 | yo angular2gen:pipe userService/CallDataBase
219 | ```
220 | The previous command will create the following structure:
221 | ```
222 | - src
223 | -userService
224 | │_ call-data-base.service.ts: The main file of your service
225 | - test
226 | -userService
227 | │_call-data-base.service.spec.ts: The test file of your service
228 | ```
229 |
230 | ## Generate pipes
231 |
232 | To generate a pipe, run the following command in your shell:
233 | ```
234 | yo angular2gen:pipe Name
235 | ```
236 |
237 | ##### The pipe name will be NamePipe.
238 | ##### For instance, you run yo angular2gen:pipe TransformUpperCase, the name of the class will be TransformUpperCasePipe
239 | The previous command will generate the following files:
240 | ```
241 | - src
242 | │_ transform-upper-case.pipe.ts : The main file of your pipe
243 | - test
244 | │_ transform-upper-case.pipe.spec.ts: The test file of your pipe
245 | ```
246 |
247 | As for components, you can specify the path where you would like to create the pipe.
248 | ```
249 | yo angular2gen:pipe textTransformation/TransformUpperCase
250 | ```
251 | The previous command will create the following structure:
252 | ```
253 | - src
254 | -textTransformation
255 | │_ transform-upper-case.pipe.ts : The main file of your pipe
256 | - test
257 | -textTransformation
258 | │_ transform-upper-case.pipe.spec.ts: The test file of your pipe
259 | ```
260 |
261 |
262 | ## Adding Dependencies
263 |
264 | ### Adding NPM Dependencies
265 |
266 | If you want to add a javascript npm dependency in your index.html, you just need to:
267 | 1. open the gulp.conf.js file,
268 | 2. seek for the JS_NPM_DEPENDENCIES const
269 | 3. add a line like this one (the inject tag can be 'libs' or 'shims'):
270 | ```
271 | {src: 'node_modules/your_module/file_to_include.js', inject: 'libs'}
272 | ```
273 |
274 | If you want to add a css npm dependency in your index.html, you just need to:
275 | 1. open the gulp.conf.js file,
276 | 2. seek for the CSS_NPM_DEPENDENCIES const
277 | 3. add a line like this one (the inject tag can only be 'libs'):
278 | ```
279 | {src: 'node_modules/your_module/file_to_include.css', inject: 'libs'}
280 | ```
281 |
282 | Your NPM dependencies will be automatically included in your index.html when you start the 'gulp serve' command.
283 |
284 | ### Adding Project Dependencies
285 |
286 | If you want to add a javascript or css dependency of your project in your index.html, you just need to:
287 | 1. open the gulp.conf.js file,
288 | 2. seek for the PROJECT_DEPENDENCIES const
289 | 3. add a line like this one (the inject tag can only be 'project'):
290 | ```
291 | {src: 'path_to_the_file_to_be_included.(css|js)', inject: 'project'}
292 | ```
293 |
294 | Your project dependencies will be automatically included in your index.html when you start the 'gulp serve' command.
295 |
296 | ###Missing Functionalities
297 |
298 | We haven't finished the generator yet. We have several missing functionalities:
299 | - Update the initial application in the generator to an app with a menu and several elements to have a real home page
300 | - Give the possibility to user to choose its first application: blank project or a first application
301 | - Develop new gulp tasks for testing and application deployement.
302 |
303 | ###Contact
304 |
305 | Do not hesitate to contact us if you have questions, needs, requests ... You can do it by GitHub, directly by email or by Linkedin:
306 | - Rémi Pourtier: Mail | Linkedin
307 | - Guillaume Rahbari: Mail | Linkedin
308 |
--------------------------------------------------------------------------------
4 |
5 |