<commit_before>---
layout: post
title: "Golang & Angular Series - Part 2: Developing and Securing Angular Apps"
metatitle: "Develop To-Do App with Golang and Angular - Part 2 Angular App"
description: "A series that will show you how to develop modern applications with Golang and Angular."
metadescription: "Part 2 - Angular front-end. In this series, develop a to-do list application with Golang and Angular using the Gin framework and securing authentication with Auth0."
date: 2018-08-22 08:30
category: Technical Guide, Frontend, Angular
author:
  name: "<NAME>"
  url: "ifndef_lmj"
  mail: "<EMAIL>"
  avatar: "https://cdn.auth0.com/blog/guest-author/lasse-marting.png"
design:
  bg_color: "#333333"
  image: https://cdn.auth0.com/blog/logos/node.png
tags:
- angular
- golang
- go
- auth0
- web-app
- applications
- node-js
related:
- 2018-08-22-developing-golang-and-angular-apps-part-1-backend-api
- 2016-04-13-authentication-in-golang
---

**TL;DR:** In this series, you will learn how to build modern applications with Golang and Angular. [In Part 1 - The Backend - Developing and Securing Golang APIs](https://auth0.com/blog/developing-golang-and-angular-apps-part-1-backend-api/), you learned how to build a secure backend API with Golang to support a to-do list application. Now, in the second part, you will use Angular to develop the frontend of the to-do list app. To facilitate the identity management, you will use Auth0 both in your backend API and in your Angular app to authenticate users. If needed, you can find the final code developed throughout this article in [this GitHub repository](https://github.com/auth0-blog/golang-angular-2).

{% include tweet_quote.html quote_text="I'm developing a modern application with @angular and @golang." %}

## Prerequisites

For this tutorial, you will need to install Golang, Node.js, and Angular. However, as you will see, the process is quite simple. For starters, you can visit [the official installation instructions provided by Golang](https://golang.org/doc/install) to install the programming language.

After that, you will need to install Node.js (which comes with NPM). For that, you can follow [the instructions described here](https://nodejs.org/en/download/).

Then, after installing Node.js and NPM, you can issue the following command to install the [Angular CLI](https://cli.angular.io/) tool:

```bash
npm install -g @angular/cli
```

> **Note:** By adding `-g` in the command above, you make NPM install the Angular CLI tool globally. That is, after issuing this command, you will have the `ng` command in all new sessions of your terminal.

## Part 1: Recap

In the first part of this series, you have developed a secure backend API with Golang and Gin. If you have followed the previous article, you can jump to the next section. Otherwise, you can still follow this article along. However, you will have to fork and clone [this GitHub repository](https://github.com/auth0-blog/golang-angular) and, after that, you will have to <a href="https://auth0.com/signup" data-amp-replace="CLIENT_ID" data-amp-addparams="anonId=CLIENT_ID(cid-scope-cookie-fallback-name)">sign up for a free Auth0 account here</a> so you can properly configure and run your backend API.

After signing up for Auth0, you will have to go to your [Auth0 dashboard](https://manage.auth0.com/) and proceed as follows:

1. go to [the _APIs_ section](https://manage.auth0.com/#/apis);
2. click on _Create API_;
3. define a _Name_ for your API (e.g., "Golang API");
4. define an _Identifier_ for it (e.g., `https://my-golang-api`);
5. and click on the _Create_ button (leave the _Signing Algorithm_ with RS256).

![Creating an Auth0 API to represent a Golang backend](https://cdn.auth0.com/blog/golang-angular/creating-an-auth0-api.png)

Then, to run your API, you will have to issue the following commands:

```bash
# set env variables
export AUTH0_API_IDENTIFIER=<YOUR_AUTH0_API>
export AUTH0_DOMAIN=<YOUR_AUTH0_TENANT>.auth0.com

go run main.go
```

> **Note:** You will have to replace `<YOUR_AUTH0_API>` with the identifier you set in your Auth0 API while creating it. Also, you will have to replace `<YOUR_AUTH0_TENANT>` with the subdomain you chose while creating your Auth0 account.

## Developing a To-Do List Application with Angular

Now that you have your backend sorted out, you will proceed with the creation of the frontend app with Angular. This application will consist of a simple home page with a button to redirect users to the to-do list. To access this list, users will have to be authenticated.

### Initializing the Angular Project

For starter, you will have to scaffold your new Angular project. You will do this in a new directory called `ui` inside the project root of your Golang. To create this directory and to scaffold your Angular application, you will use the Angular CLI tool. So, head to the project root of your Golang API and issue the following command:

```bash
# make sure you are on your backend project root
ng new ui
```

This will place a new Angular quick-start project inside the `ui` directory. Now, you need to go into this new directory and download all your project's dependencies. To do this, run the following commands:
<commit_msg>Front-end consistency<commit_after>---
layout: post
title: "Golang & Angular Series - Part 2: Developing and Securing Angular Apps"
metatitle: "Develop To-Do App with Golang and Angular - Part 2 Angular App"
description: "A series that will show you how to develop modern applications with Golang and Angular."
metadescription: "Part 2 - Angular front-end. In this series, develop a to-do list application with Golang and Angular using the Gin framework and securing authentication with Auth0."
date: 2018-08-22 08:30
category: Technical Guide, Frontend, Angular
author:
  name: "<NAME>"
  url: "ifndef_lmj"
  mail: "<EMAIL>"
  avatar: "https://cdn.auth0.com/blog/guest-author/lasse-marting.png"
design:
  bg_color: "#333333"
  image: https://cdn.auth0.com/blog/logos/node.png
tags:
- angular
- golang
- go
- auth0
- web-app
- applications
- node-js
related:
- 2018-08-22-developing-golang-and-angular-apps-part-1-backend-api
- 2016-04-13-authentication-in-golang
---

**TL;DR:** In this series, you will learn how to build modern applications with Golang and Angular. [In Part 1 - The Backend - Developing and Securing Golang APIs](https://auth0.com/blog/developing-golang-and-angular-apps-part-1-backend-api/), you learned how to build a secure backend API with Golang to support a to-do list application. Now, in the second part, you will use Angular to develop the front-end of the to-do list app. To facilitate the identity management, you will use Auth0 both in your backend API and in your Angular app to authenticate users. If needed, you can find the final code developed throughout this article in [this GitHub repository](https://github.com/auth0-blog/golang-angular-2).

{% include tweet_quote.html quote_text="I'm developing a modern application with @angular and @golang." %}

## Prerequisites

For this tutorial, you will need to install Golang, Node.js, and Angular. However, as you will see, the process is quite simple. For starters, you can visit [the official installation instructions provided by Golang](https://golang.org/doc/install) to install the programming language.

After that, you will need to install Node.js (which comes with NPM). For that, you can follow [the instructions described here](https://nodejs.org/en/download/).

Then, after installing Node.js and NPM, you can issue the following command to install the [Angular CLI](https://cli.angular.io/) tool:

```bash
npm install -g @angular/cli
```

> **Note:** By adding `-g` in the command above, you make NPM install the Angular CLI tool globally. That is, after issuing this command, you will have the `ng` command in all new sessions of your terminal.

## Part 1: Recap

In the first part of this series, you have developed a secure backend API with Golang and Gin. If you have followed the previous article, you can jump to the next section. Otherwise, you can still follow this article along. However, you will have to fork and clone [this GitHub repository](https://github.com/auth0-blog/golang-angular) and, after that, you will have to <a href="https://auth0.com/signup" data-amp-replace="CLIENT_ID" data-amp-addparams="anonId=CLIENT_ID(cid-scope-cookie-fallback-name)">sign up for a free Auth0 account here</a> so you can properly configure and run your backend API.

After signing up for Auth0, you will have to go to your [Auth0 dashboard](https://manage.auth0.com/) and proceed as follows:

1. go to [the _APIs_ section](https://manage.auth0.com/#/apis);
2. click on _Create API_;
3. define a _Name_ for your API (e.g., "Golang API");
4. define an _Identifier_ for it (e.g., `https://my-golang-api`);
5. and click on the _Create_ button (leave the _Signing Algorithm_ with RS256).

![Creating an Auth0 API to represent a Golang backend](https://cdn.auth0.com/blog/golang-angular/creating-an-auth0-api.png)

Then, to run your API, you will have to issue the following commands:

```bash
# set env variables
export AUTH0_API_IDENTIFIER=<YOUR_AUTH0_API>
export AUTH0_DOMAIN=<YOUR_AUTH0_TENANT>.auth0.com

go run main.go
```

> **Note:** You will have to replace `<YOUR_AUTH0_API>` with the identifier you set in your Auth0 API while creating it. Also, you will have to replace `<YOUR_AUTH0_TENANT>` with the subdomain you chose while creating your Auth0 account.

## Developing a To-Do List Application with Angular

Now that you have your backend sorted out, you will proceed with the creation of the front-end app with Angular. This application will consist of a simple home page with a button to redirect users to the to-do list. To access this list, users will have to be authenticated.

### Initializing the Angular Project

For starter, you will have to scaffold your new Angular project. You will do this in a new directory called `ui` inside the project root of your Golang. To create this directory and to scaffold your Angular application, you will use the Angular CLI tool. So, head to the project root of your Golang API and issue the following command:

```bash
# make sure you are on your backend project root
ng new ui
```

This will place a new Angular quick-start project inside the `ui` directory. Now, you need to go into this new directory and download all your project's dependencies. To do this, run the following commands:

{'fraction_non_alphanumeric': 0.08770757778201947, 'fraction_numerical': 0.014506585226188204, 'mean_word_length': 4.365591397849462, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 23, 'https://': 26, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 12, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4745339', 'n_tokens_mistral': 3154, 'n_tokens_neox': 2915, 'n_words': 1419}