Quick start web frontend with the Angular CLI
Before we delve deeper into the subject matter of the Angular CLI, I would like to say a few words about what Angular actually is. Angular is a web framework developed by Google for Single Page Applications (SPA) which places a high value on structure and quality. Unlike classic web applications, an SPA only provides an HTML file in the browser. The dynamic content of the HTML file is only changed on the client side, for example via a server request. Angular is characterized by a clean architecture and a focus on isolated components and is increasingly establishing itself in the enterprise environment. Angular was developed as a JavaScript framework in its first version and was completely rebuilt in TypeScript in version 2. As the basic idea and concepts have remained the same, it is even possible to migrate or use hybrid versions.
Since 2017, Angular has been semantically versioned and released in a fixed cycle (every 6 months) with new functionalities and adaptations. The current version is 7.x.x.
What is the Angular CLI?
The Angular CLI is an important CLI (Command Line Interface) tool for the development of Angular applications and was released with the second version of the Angular framework. The CLI provides a set of functions that support all phases of software development for Angular. These include, among others:
- Live reload server to view code changes directly in the browser
- Webpack, which takes over the bundling of all resources
- A fully operational test environment
- Generator for Angular elements (components, directives, pipes and services)
- Depedency management for the generated elements
- Generation of artifacts through build mechanisms
Requirements for getting started with Angular CLI?
NodeJS is required for development with the Angular CLI. NodeJS provides a JavaScript runtime environment and includes the npm (Node Package Manager). This package manager is used for most components in Angular.
Download and installation of NodeJS: https://nodejs.org/en/
After NodeJS has been installed, the Angular CLI must be installed. The installation is started with the following command in the terminal:
- npm install -g @angular/cli
Once the installation is complete, all the requirements for starting development with Angular and the CLI are met.
The important commands
| Command | Description |
| ng new <name> [options] | Stellt den initialen Start für die Entwicklung des Angular Projektes dar. Im aktuellen Verzeichnis wird ein App-Ordner namens <name> angelegt und alle relevanten Angular Dateien werden hinzugefügt. |
| ng serve <project> [options] | Builds the app and displays it in the browser. Changes to the code are directly rebuilt and displayed. |
| ng build <project> [options] | Builds the app and copies all compiled sources to the /dist folder. The content represents the Angular artifact for publishing. |
| ng generate <schematic> [options] | Creates new files based on the Angular schemas. This allows you to create new classes, components, services or pipes, for example. |
| ng lint <project> [options] | Performs a static code analysis and identifies any vulnerabilities in the code. |
| ng test <project> [options] | Runs tests with different options. |
| ng update [options] | Enables the automatic update of dependencies and the Angular framework. |
The commands just described enable the entire development cycle to be covered. Each of these commands can be customized with additional option parameters.
Example:
- ng new myApp -routing=true
- Creates an application called myApp and provides a fully functional routing module. Routing modules are normally used to display different subpages to the user (selectable in the form of a menu) in order to structure the content of the website appropriately.
- cd myApp
- Switches to the directory of the application just created.
- ng serve
- Compiles the application and starts a live development server. The application can then normally be accessed at http://localhost:8080
- ng test -environment=prod
- Enables the tests to be started with the environment parameter "prod", which is usually representative of the production environment.
A complete documentation of the Angular CLI can be found at: https://cli.angular.io/
Conclusion
The example above clearly shows that the Angular CLI makes it possible to create a clean and high-quality application structure in the shortest possible time, which can be compiled and tested immediately. In addition to this convenience, the use of the Angular CLI has other positive side effects. For example, compliance with the Angular style guide is ensured on a large scale, as the creation of elements and the structure is carried out in accordance with the Angular schema. In addition, Angular projects using the Angular CLI always look the same, at least in their basic structure, which improves the maintainability and portability of the code. The development of Angular apps should always be carried out using the Angular CLI if possible.
Sources
https://angular.de/artikel/was-ist-angular/
https://angular.de/artikel/angular-cli-einfuehrung/
https://github.com/angular/angular-cli/wiki
https://de.wikipedia.org/wiki/Npm_(Software)
