Starting an Angular Project

by Horatiu Dan

In order to be able to begin developing a new project using Angular, one shall follow a couple of simple steps, described as part of this blog post. In addition to the set-up, the post will briefly explain how a project is generally structured and what actually happens in the very moment it is started.

Pre-requisites

As for every technology, certain pre-requisites (tools) are to be installed first.

Node.js

Node.js is a very popular platform that allows running JavaScript code outside the browser. Differently put, a JavaScript file can be run from the command line.

It ca be downloaded it from https://nodejs.org and installed locally very easily by following the steps. For this project version 14.16.0 is used. The version can be checked with the following command.

 > node -v v14.16.0

NPM

Once Node.js is installed, NPM shall be present as a couple of libraries are needed in the project.

NPM is a package manager for Node.js that allows installing such libraries easily.

It can be installed using the command line:

 > npm install -g npm@latest

for the latest version, or

 > npm install -g npm@6.14.11

for a particular one.

Version may be checked with the following command.

 > npm -v 6.14.11

Angular CLI

Angular CLI installation is straight-forward. In a terminal window, one may issue

 > nmp install -g @angular/cli

for the latest version, or

 > npm install -g @angular/cli@9.1.15

for a particular one.

Once installed, ng commands may be used for Angular related tasks.

 > ng version Angular CLI: 9.1.15 Node: 14.16.0 OS: win32 x64 Angular: 9.1.13 ... animations, common, compiler, compiler-cli, core, forms ... platform-browser, platform-browser-dynamic, router @angular-devkit/core 9.1.15 @angular-devkit/schematics 9.1.15 @angular/cli 9.1.15 @ngtools/webpack 9.1.15 @schematics/angular 9.1.15 @schematics/update 0.901.15 rxjs 6.5.5 typescript 3.8.3 webpack 4.42.0

Generating the Project

By issuing

 > ng new ninjago-front-end

and answering [Y] to routing and [CSS] to the css format, the project having the ‘ninjago-front-end’ name is generated using the CLI.

 > cd ninjago-front-end > ng serve

 > npm start

tarts the application which may be accessed in the default location – http://localhost:4200/.

This is basically all that is needed in order to have an empty Angular project.

It is worth mentioning that such a project may be started directly from an IDE (IntelliJ for instance) which will execute the same CLI commands, but in a more ‘visual’ manner.

High Level Angular Project Structure

Once created, an angular project contains a great deal of files, mostly configuration ones. The src folder encloses the code as follows:

app – contains all of the component(s) code

app.component represents the root component in the application that will contain the rest of the components that are defined.

app.component.css – the component specific styling
app.component.html – the HTML, the actual component DOM
app.component.spec.ts – the tests of the component
app.component.ts – the TypeScript file that defines the data that is displayed in the component as well as the corresponding logic, behavior

All components in Angular consist of these files.

app-routing.module.ts – defines the application routing logic

app.module.ts – contains the declarations of all used modules in the application

assets – things the project needs – images etc.

environments – contains files for specifying different environment variables (useful when having multiple ones as development, production etc.)

index.html – the single file the application is rendered into

main.ts – the application entry point

polyfills.ts – contains the special packages to be imported for browser compatibility

styles.css – contains the global styling of the application

test.ts – launches the application testing

Among the above mentioned configuration files, the following are worth mentioning:

angular.json – contains project-specific configuration defaults used for build and development
karma.conf.js – contains the testing default configuration
package.json – contains the project dependencies

Behind the Scene

When the Angular application is started – using ng serve command – the following happens:

main.ts entry point bootstraps AppModule module (defined in app.module.ts)

 platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));

AppModule bootstraps the application root component – AppComponent – defined in app.component.ts file

 @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

AppComponent renders app.component.html in the app-root selector (tag) as part of index.html, in accordance with the app.component.css styles.

 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>NinjagoFrontEnd</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body> <app-root></app-root> </body> </html>

Running the Unit Tests

During development, it’s a good habit to write unit tests to increase confidence, maintainability and robustness of the application. Fortunately Angular (TypeScript) allows defining such unit tests as specs.

They can be always executed by issuing the following command

 > ng test

which launches a built-in Karma server and a browser and executes the existing specs.

Sharing the Project

Now that the project was created and analyzed, it can be uploaded to GitHub so that it can be further enhanced. This operation is straight-forward.

After logging in, a new repository is created – https://github.com/horatiucd/ninjago-front-end.git

Locally,

 > git remote add origin https://github.com/horatiucd/ninjago-front-end.git > git branch -M main

Then push to the central repository main branch either using the command line or directly from the IDE.

As the project evolved, branch v1.0.0 better illustrates what is needed here – https://github.com/horatiucd/ninjago-front-end/tree/v1.0.0.

Resources

Angular Documentation – https://angular.io/docs – personally I find it as one of the most accurate and well written documentation of a product.