Laravel Lumen CRUD REST API with Angular Application -part 2

Before we get started, ensure that you have the following tools already installed on your local machine.

  • An IDE, preferably WebStorm or Visual Studio Code.
  • Node JS installed
  • Angular CLI and Angular version 5

Creating the angular project

Create a new project angular project by issuing the command in the terminal

This application will use the bootstrap 4 framework for CSS.

Install bootstrap 4 and its dependencies.

now add the following line to the file styles.css

Now bootstrap CSS is ready to be used in our application.

next open shoppers with the editor by typing

In the terminal.

Create your components inside the app folder in the project

The components to be created include:

Also, create a routing module by running the following command.

this module will be used to configure the routes as shown below.

For more details on how routing works in angular please visit the official Angular documentation.

Creating services:

The service_name created include:

Now the app-module.ts file should look like.

And the app-routing.module.ts file should look like.

At this point, the HTML template of the app module should contain the following code to facilitate routing.

Note that the showLoadingIndicator allows for controlling whether to display or remove the spinner in times of slow network connections

The code for controlling this behavior is shown below in the file app.component.ts

The rest of the code for the components, services, and guards can be found on my Github repo

You can test the application by running the below command in the terminal.

Once it has finished building, it should open in the browser and point to the URL http://localhost:4200.

Thanks for reading. :)

I’m a Software Engineer in love with everything tech