Angular2 Generator is a command line code generator for Angular 2 applications. It supports initialising a starter application and creating components, directives, services and pipes through the command line.
Install globally for easiest use.
npm install -g angular2-generator
Run the following command to create an empty starter project for an angular2 application based on the 5 Min Quickstart. The created application uses SystemJs as the module loader.
ng2 init
The init command will also generate an ng2config.json file which contains all the necessary configuration for using Angular2 Generator.
At the end of the init you will be prompted to create a starting app. If you chose to create one make sure you have typings installed globaly because the script will try to run typings install after executing npm install.
ng2config.json values:
| Key | Value | Description |
|---|---|---|
| appFolder | String | Route of the angular2 aplication folder with out the leading slash. For example "foo/bar" or "app" is ok but "/app" or "app/" might cause errors. |
| bootLocation | String | Path to the file where the application is bootstraped (this is only needed if you want the option of auto injecting services). The path starts from the appFolder route. For example if bootLocation has the value "boot.ts" then angular2-generator will expect to find it at: appFolder/boot.ts |
| componentsFolder | String | Location of the folder where all generated components get placed. This route also starts with the appFolder. So for example if componentsFolder has the value "something/components" angular2-generator will generate componets at this location: appFolder/something/components |
| servicesFolder | String | Location of the folder where all the generated services get placed. Also starts with the appFolder. |
| directivesFolder | String | Location of the folder where all the generated directives get placed. Starts with the appFolder. |
| pipesFolder | String | Location of the folder where all the generated pipes get placed. Starts with the appFolder. |
| Command | Functionality | Additional Options |
|---|---|---|
| c or component [fileName] | Create a component | true |
| d or directive [fileName] | Create a directive | false |
| s or service [fileName] | Create a service | true |
| p or pipe [fileName] | Create a pipe | false |
Example command:
ng2 c testWhen this command runs the file test.component.ts gets created at the location specified in the ng2config.json file or if no location was provided then it gets created in the appFolder of the application or in the root folder if the appFolder was also not provided.
The following is also a valid [fileName] format: "something/foo/bar/test". In this case the file test.component.ts would be created at this location appFolder/something/foo/bar/.
Option: -t or -template
ng2 c test -t
Would create the file test.component.ts and the file test.html at the same location
Option: -i or -inject
To use this option you need to provide a bootLocation in the ng2config.json file and comments specifying inject locations.
boot.ts
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component';
// ng2:bootImport
bootstrap(AppComponent, [
// ng2:bootInject
]);The "// ng2:bootImport" comment sets the location of the import that should be injected. The "// ng2:bootInject" comment sets the location of the service that should be injected.
Command example
ng2 s test -i###Component
When the following command is called:
ng2 c testimport {Component} from "angular2/core"
@Component({
selector: "test",
template: "<p>We Work!</p>"
})
export class TestComponent {
constructor() {}
}###Service
When the following command is called:
ng2 s testimport {Injectable} from "angular2/core";
@Injectable()
export class TestService {
constructor() {}
}###Directive
When the following command is called:
ng2 d testimport {Directive, Input, ElementRef, TemplateRef, ViewContainerRef} from "angular2/core";
/*
* Description:
*
* Usage:
*
* Example:
*
*/
@Directive({ selector: "[test]" })
export class TestDirective {
constructor(
private _templateRef: TemplateRef,
private _viewContainer: ViewContainerRef,
private _elementRef: ElementRef
) {}
}###Pipe
When the following command is called:
ng2 p testimport {Pipe, PipeTransform} from "angular2/core";
/*
* Description:
*
* Usage:
*
* Example:
*
*/
@Pipe({name: "test"})
export class TestPipe implements PipeTransform {
transform(value: any, args: string[]): any {
}
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent