Angular 2 CLI Reply

Rick HerrmannOne of the good things about Angular 1 was that it was easy to add the AngularJS library to your application and start using it without a lot of setup ceremony.  Add a <script> tag to pull in angular.js, stick an ng-app attribute on the body or html tag, and you were ready to go.  Of course, in a more complex application you would end up using additional libraries and probably setup a build process, but the barrier to getting started was low.

With Angular 2, getting started from scratch is not nearly as simple.  While there are multiple “starter-packs” that have been created to help with generating a ready-to-go project, the thing that has most caught my attention is the Angular CLI (command-line-interface).  Although the Angular CLI has not been officially released (it is in beta as of this writing), it already has a number of features that not only get you up and running quickly, they also help with adding other pieces of your application as it is developed.

To install the Angular CLI:

npm install -g angular-cli

 

Project Setup

To setup a new project simply type “ng new project-name”.  This creates a project that is ready to run and has some initial unit and end-to-end tests setup.  It can be used as a sandbox for learning about Angular 2, or as a starting point for a real application.

Project Layout

The project structure that is created is consistent with the Angular 2 Style Guide.  To me it makes a lot of sense to have one standard project structure.  That way all of our Angular 2 applications will look the same regardless of who the developers are.  As I like to say: let’s save the creativity for solving the business problems – not inventing new project layouts.

Testing

I spent a lot of time learning how to test Angular 1 applications, and while I will say Angular 1 was certainly “testable”, it was not necessarily easy to get a testing environment configured properly.  However, with the Angular CLI, part of the new project setup includes an already configured jasmine/karma test setup.  There are even a couple of smoke-tests setup so you can verify the testing setup works.  I have just begun to learn how to test an Angular 2 application, but I have had to spend zero time getting the tooling wired up correctly.

Adding Elements

Setting up a serve-able and testable project is nice, but what happens when you are ready to build out the application and start adding more components, services, directives etc?  The CLI has your back here as well.  The “ng generate” command can be used to create components, directives, pipes, services, classes, interfaces, enums, and modules.  In addition to creating the file itself, some project wiring will also be done.  For example, if you add a component the necessary “import” and declaration code will be added to either the sub-module or application module depending on where the component is in the project structure.  Little things like this can save a lot of time over the course of a project.

More Information

More information can be found at the Angular CLI site and the github page.  New beta versions are being released at least weekly so I am keeping an eye on new features that are being added.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s