Understanding Angular CLIs

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). 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.

Angular IDE works 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. 

Tools Used

• ng—Angular CLI Node package
• Node.js and npm—Node runs ng; npm manages Node package dependencies
• Bash—ng has advanced commands which must be processed in a Bash shell

Angular IDE does not rely on any of these tools being present on your system, and downloads 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, Angular IDE ensures 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 are required for subsequent projects created with the same versions on this system, even if you switch to a different workspace.

Project Initialization Commands

New Angular Project wizard

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

These commands 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 also downloads additional dependencies that your Angular application requires to run. This may take a few minutes, depending on the speed of your Internet connection.

Working with Terminal+

The Terminal+ view is an intelligent local shell, with project context awareness. When you select a project, Angular IDE 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. You can easily use multiple versions of these tools across different projects without experiencing incompatibilities caused by using a different version in a project.

Terminal+ view

Generating Angular Elements

Use wizards to generate Angular elements such as components, directives, guards, modules, pipes and services. These wizards execute corresponding ng commands to generate your element.

Angular CLI Component wizard in Angular IDE by CodeMix

For example, to generate a component named MyComponent, the following command is 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 you can use to customize generation; for instance –inline-template, creates template HTML markup inline instead of in a separate file, which is the default behavior. Beyond what is supported by the wizard, you can use the Terminal+ view to generate Angular classes, interfaces, enums, and routes.

Deploying an Angular Application

To deploy your application for testing, right-click the project and select Run As/Debug As>Angular Web Application from the context menu. Alternatively, you can deploy from the Servers view. Expand Web Applications, select the project, and then either right-click and select Start Server from the context menu, or click the Start button .

Starting the server

Not only is your application being served for local testing in a browser, a LiveReload server is also started. With LiveReload, when you save changes to a source file, the application is rebuilt, the deployment is updated, and the browser page (if open) is refreshed.

The basic command used to deploy your application locally is:

ng serve

References

For more details on the CLI, see the Angular CLI project.