Getting started with Angular

Posted on by Roger Versluis.

Introduction

This is the first blog in a series where we will dive in the world of Angular and ASP.NET Core. In this first post we will setup a new Angular project and have a quick look over the generated files.

Getting Visual Studio Code

To keep a separation of concerns between backend of frontend we’ll create two separate projects and use two different editors. For all frontend coding of Typescript, CSS and HTML we will use the editor VS Code. Not to be confused with Visual Studio, this lightweight editor developed by Microsoft gained quite some popularity over the last few years.

To get started download the Stable Build installer from the VS Code website. At the time of writing version 1.30 was released but with the rapid development of VS Code you will probably get a newer version.

When VS Code is installed we will use the default settings and extensions to keep it light. But of course feel free to install a theme of your choice, my personal pick is Material Theme, which I think looks pretty slick.

VS Code with the Material Theme

Getting Angular

Angular is a popular front end framework developer by Google. Initially released on October 20, 2010, commonly called AngularJS, it was a pioneer in Javascript frameworks and set a new standard of client side Javascript development. Today there is still a very active community but development has halted in favour of its predecessor Angular2.

Six years after the first AngularJS release Angular was released, a complete rewrite now completely written in the popular Javascript alternative TypeScript. Now at version 7 it is very well maintained and actively used throughout the Javascript community.

To get started with a new Angular project we will be using ng-cli a handy command line tool which lets you scaffold new projects or generate new components to your project, because it makes our lives easier we’ll be using ng-cli throughout this series.

To make it work we need to install Node and NPM first. Install the latest LTS version if you don’t have it yet on your system.

After Node is installed open a command line window and execute:

npm install -g @angular/cli

Verify if everything is installed correctly

ng --version

The output should look something like:

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 7.1.4
Node: 8.11.3
OS: win32 x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.11.4
@angular-devkit/core         7.1.4
@angular-devkit/schematics   7.1.4
@schematics/angular          7.1.4
@schematics/update           0.11.4
rxjs                         6.3.3
typescript                   3.1.6

If you get an error installing the CLI, this is an issue with your local npm setup on your machine, not a problem in Angular CLI. Please have a look at the fixing npm permissions page, common errors page, npm issue tracker, or open a new issue if the problem you are experiencing isn’t known.

Creating the project

To accommodate for the future backend project we’ll create a new central directory for our separate projects. For example I created C:\Projects\aspnet-angular-app\. Go to this newly created directory and execute the following ng-cli command to create a new Angular project:

C:\Projects\aspnet-angular-app>ng new client
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS

When ng-cli asks to use routing hit Y and when it asks which stylesheet format to use hit SCSS.

After a few minutes it will have installed all dependencies and create a minimal project layout.

In VS Code hit File -> Open Folder and select the newly created client folder. Before doing anything else open the terminal by hitting Ctrl+`.

Execute the following command in the VS Code terminal:

ng serve

The project will now be built and an internal webserver is started. Browse to http://localhost:4200 to see your newly created app in action.

Exploring an Angular project

At first Angular will feel overwhelming, lots of files, terminologies, magic, but luckily ng-cli takes care of most of this. Lets go through some of the important files of our new project.

/e2e
This folder contains your end to end tests. Protractor is used to write your tests and they are executed by running ng e2e in the terminal.

/angular.json
All configuration that is used to keep ng-cli working properly is done in here, commonly called an Angular Workspace. The Work Space file has many configuration options. Nitay Neeman has written a nice article going over the most common options.

/tslint.json
TSLint is an extensible static analysis tool that checks TypeScript code for readability, maintainability, and functionality errors. This file contains the default best practices rules determined by the Angular team. You can change those rules as you wish but in this series we will use the default.

/src/app/app-routing.module.ts
Here we define the routes for our app.

/src/app/app.component.html
/src/app/app.component.scss
/src/app/app.component.spec.ts
/src/app/app.component.ts
In Angular a components controls a patch of screen called a view. This can be a full page, a partial page, a large component on a page or a small component. If it has HTML and/or styling, it’s a component.

The app.component is the default generated demo component from ng-cli. The .html file contains all your HTML code, .scss all your SASS styles, .spec.ts your unit test and .ts your code.

/src/app/app.module.ts
NgModules configure the injector and the compiler and help organize related things together. Here is where you define what is part of your app and what isn’t. Angular is very modular and you can define multiple NgModules in a single workspace.

/src/index.html
Does exactly what you think it does, it is the base layout for all your pages. Usually this file is kept very clean as Angular will take care of injecting all the compiled Javascript and style sheets for execution. Notice that <app-root></app-root> is a reference to our Angular component app.component.ts.

/src/karma.conf.js
Angular comes pre-installed and pre-configured with the Karma unit testing framework. To run all unit tests you simple execute ng test which will run all tests.

/src/main.ts
This file is your Main function. Comparable to C#, Java, C++ or really any other programming language, it’s the very first entry into Angular.

/src/style.scss
Angular has a system of component styles where each component owns its own isolated stylesheet. But for global styles this is where you will want to add them.

There are many more system files created but most of them will not be touched and used with its default setting.

Conclusion

In this article we created a new Angular app ready to be tinkered with. In the next step we will look at setting up the ASP.NET Core backend.