Command Line Interfaces

Until a few years ago, most web development was carried out using either advanced graphical interfaces present in IDEs, or bare-bones tools like a simple text editor – whether you wanted to write code, deploy an application, or check something into your version control system.

Recently, there has been a resurgence in the development and use of command line interfaces (CLIs) to perform the above activities, and in many cases, the flexibility afforded by a CLI outstrips what a graphical interface can provide. For instance, most users using an old version control system like CVS would use a graphical interface, but with a modern VCS like Git, using the command line is ubiquitous. Similarly, modern web development relies heavily on the use of CLIs to take care of everything from scaffolding a new application and generating application components to deploying it for testing.

With Webclipse, we work in conjunction with the CLI to give you the best of both the graphical and the command line worlds. You benefit from both, the ease of an intuitive interface and the flexibility of the command line, if you need it. Let’s take a look at how we bring you Angular capabilities, leveraging the power of the command line with Angular’s CLI.

Tools Used

• ng—the Angular CLI Node package
• Node.js and npm—We need Node to run ng, and npm to manage Node package dependencies
• Bash—ng has advanced commands which must be processed in a Bash shell

Webclipse does not rely on any of these tools being present on your system, and will download them automatically as required.

Note: On Windows, the native terminal cannot process some ng commands, so Git-Bash is downloaded and installed if not already present.

Creating a New Project

When you first create an Angular project with Webclipse, we ensure that all the tools mentioned in the previous section are available on your system. You might have to wait awhile as Git Bash (on Windows), and the versions of Node, npm and Angular CLI selected in the project creation wizard are downloaded – you can monitor the download progress in the Terminal+ view.

Note: There could be about 80 megabytes of tooling that must be downloaded, so the time required can vary based on the speed of your Internet connection. Once downloaded, these are cached, so that no downloads would be required for subsequent projects created with the same versions on this system, even if you switch to a different workspace.

Project Initialization Commands

Once the tools are downloaded the following commands are executed to initialize your project:

npm install angular-cli@(selected ng version)

npm install npm@(selected npm version)

ng init --name (project name)

npm install --save-dev angular-ide

These commands will run in the Terminal+ view, where you can see the detailed output of each command as it is run, giving you a better idea of what is happening during the creation of your project.

Note: The ng init command will also download additional dependencies which your Angular application requires to run, and this too could take a few minutes, depending on the speed of your Internet connection.

Working with Terminal+

Our Terminal+ view is an intelligent local shell, with project context awareness. The combo in the view allows you to select a project, and it ensures that the right versions of node, npm and the ng (as determined by this project’s settings) are added to your PATH. So when you execute an ng, npm, or node command, the versions of these tools selected during project creation will be used. Note that you can change these versions from the project’s Terminal property page too.

This allows you to easily use multiple versions of these tools across different projects, without having to worry about incompatibilities that could be caused by the use of a different version in a project – we’ll ensure the right versions are used.

Generating Angular Elements

Use our Angular Element wizards to generate components, pipes or services. These wizards will execute corresponding ng commands to generate your element.

For example, to generate a component named MyComponent, the following command will be executed in Terminal+.

ng generate component MyComponent

As usual, the command is executed with the right context, using the version of ng that was set up for that project.

There are several additional switches which you can use to customize generation; for instance –inline-template, which would create template HTML markup inline instead of in a separate file, which is the default behavior. Beyond what is supported by our wizard, you can use the Terminal+ view to generate Angular directives , classes, interfaces, enums, modules and routes as well.

Deploying an Angular Application

To deploy your application for testing, simply bring up the context menu on the project and choose Run As>Server for Angular CLI Project. Alternatively, you can open the Servers view and find your project under the Angular CLI node, from where you can easily start and stop deployment, or even start a debugging session.

Not only is your application being served for local testing in a browser, a LiveReload server is also started. With LiveReload, any time you change a source file and save it, the application is rebuilt, the deployment is updated and the browser page, if you have it opened, is automatically refreshed as well.

The basic command used to deploy your application locally is:

ng serve

References

For more details on the CLI, please visit the Angular CLI project.