Recently I had to learn Angular and as AWS Lambda and it was a bit of a learning curve for me as I wasn’t familiar with the framework and the AWS stack. I decided to write this guide to better my understanding of these technologies as well as help others.

This guide is focusing on the basics of creating a basic Angular app that is linked to a AWS DynamoDB database and uses AWS Serverless Python as a backend. We will first look into how we can create an app using the Angular CLI then connect the backend in a later stage in part 2.

A demo of the app available here.

Make sure you have installed the Angular CLI and able to create a development environment by following the guide on the Angular website, more information is available on the official Angular CLI Github.

Once you know how to start a project using the CLI we will create our app with the following command

ng new angular-learn-forms

and run the command

ng serve

to make sure our app is up and running on the default port http://localhost:4200/, you should be greeted with a similar screen saying

You can call your app whatever name you want but just make sure you keep consistency throughout your project.

The app will have 4 components:

AppComponent

NavbarComponent

HomeComponent

DatabaseComponent

The CLI command to create the app would have already created the scaffolding for our application as well as the AppComponent, now we only need to create the remaining 3 components by using the following commands.

ng g component navbar

ng g component home

ng g component database

ng g component forms

After creating these components we will mainly focus on the app directory where our components live, the tree structure should appear similar to this :

├── app.component.css

├── app.component.html

├── app.component.spec.ts

├── app.component.ts

├── app.module.ts

├── app.routing.ts

├── database

│ ├── database.component.css

│ ├── database.component.html

│ ├── database.component.spec.ts

│ └── database.component.ts

├── forms

│ ├── forms.component.css

│ ├── forms.component.html

│ ├── forms.component.spec.ts

│ └── forms.component.ts

├── home

│ ├── home.component.css

│ ├── home.component.html

│ ├── home.component.spec.ts

│ └── home.component.ts

└── navbar

├── navbar.component.css

├── navbar.component.html

├── navbar.component.spec.ts

└── navbar.component.ts

At this point we will need to check that the imports and declarations in our app.module.ts have been updated with the components that were just created. Typescript normally does a good job at this but we will check for good measure and it should look like this.

Now we can start modifying the files created, starting with the navbar.component.html we will populate it with the following HTML code.

This is a basic HTML navbar that will be fixed at the top of the screen and this can be achieved by adding the tag <app-navbar> to the app.component.html file.

Since you are running “ng serve” the app should automatically load and you will be able to see the navbar that you just created but it looks rather plain as it is just HTML with no CSS styling. An easy way to add styling to your webapp is by using a Boostrap library, we will use Bootswatch by adding a <link> tag to your your index.html file like so

<link rel="stylesheet" href="https://bootswatch.com/3/flatly/bootstrap.css" media="screen">

Now your app should start taking form, you will notice that the links are highlighted and can be clicked but they are not active, this is where we need to link our components together and this can be done with routing.

You will need to create a file app.routing.ts in the app folder and populate it with the following.

First we need to import the following dependencies: ModuleWithProviders, Routes and RouterModule, then the components we created earlier: HomeComponent and Database component, there is no need to import the NavbarComponent as it doesn’t route anywhere and it is fixed to the top of the page.

ModuleWithProviders, Routes and RouterModule, then the components we created earlier: HomeComponent and Database component, there is no need to import the NavbarComponent as it doesn’t route anywhere and it is fixed to the top of the page. Then we structure the paths with their respective components.

Finally we add the routing import to the app.module.ts file which will look like this now:

Now we will add a <router-outlet> to the app.component.html file to be able to display the contents of the components we just routed, the <router-outlet> is wrapped in a “container” to make sure the contents get display correctly under the navabar.

Finally, we add the paths that we created to the navbar by modifying the navbar.component.html by adding the routerLink directive to the links on the navbar.

The components are fully linked now and we are able to navigate between the different paths using the navbar, the container displays the respective HTML file for every component.

Next, we will populate the forms.component.html with the following to create a basic form to gather information that we will later synchronize to a database.

Here’s a demonstration of what you should be able to achieve.