BT

InfoQ Homepage News Angular CLI Helps Spin Up Angular 2 Projects and Components

Angular CLI Helps Spin Up Angular 2 Projects and Components

Bookmarks

In a session at ng-conf 2016, Mike Brocchi gave developers a better look at the Angular CLI (Command Line Interface) tool and it's capabilities. He said that, among developers he's talked to, 26% of them said that the Angular 2 environment setup was a barrier to entry while 22% said it was too complicated. The CLI was made to ease this pain.

To reduce the time it takes to get a project started, Angular CLI has a number of features to "Get started fast":

  • ng new project-name - Create a new project, sets default configuration
  • ng build - Build/compile the app
  • ng test - Run unit tests.
  • ng e2e - Run end-to-end tests
  • ng serve - Spin up a small web server and host the app
  • ng deploy - Out of the box, deploy to GitHub pages or Firebase

All of the configuration needed by these steps is done by the tool.

Beyond setting up a new app, the tool also lets developers run commands to build up pieces of an app such as Components and Routes.

  • ng generate component my-comp - Generates a new Component, along with its test spec and its HTML/CSS
  • ng generate directive my-directive - Generates a new Directive
  • ng generate pipe my-pipe - Generates a new Pipe
  • ng generate service my-service - Generates a new Service
  • ng generate route my-route - Generates a new Route
  • ng generate class my-class - Creates a simple model class

For each of these generation commands, the files are placed in the right location based on the official Angular style guide.

Unfortunately, the tool is made for Angular 2, not for 1.X. Now in Beta, the team behind Angular CLI hopes to add offline template compilation, lazy loading routes, and extensibility.

The idea is not novel. In the Angular world, the Platypi framework used a CLI tool called PlatypusCLI to create app fragments such as models and services. The non-Angular project Ember has its own Ember CLI that assists developers with tasks such as running tests and compiling assets.

The full video of Brocchi's session is available on YouTube.

Rate this Article

Adoption
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Community comments

  • We are looking forward to when it will appear in Angular for Dart.

    by Andrew Mezoni /

    Your message is awaiting moderation. Thank you for participating in the discussion.

    Great news!
    We are looking forward to when it will appear in Angular for Dart.
    Dart community will be very happy about this.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

BT

Is your profile up-to-date? Please take a moment to review and update.

Note: If updating/changing your email, a validation request will be sent

Company name:
Company role:
Company size:
Country/Zone:
State/Province/Region:
You will be sent an email to validate the new email address. This pop-up will close itself in a few moments.