.NET Core 2.0, Angular 4 and MySQL. Preparing the Angular Project

Creating the server part (.NET Core Web API part) is just a half of the job we want to accomplish. From this point onwards, we are going to dive into the client side of the application to consume the Web API part and show the results to the user by using angular components and many other features.

If you want to see all the basic instructions and complete navigation for the .NET Core series, check out the following link: Introduction of the .NET Core series.

For the complete navigation and all the basic instructions of the Angular series, check out: Introduction of the Angular series.

For the previous part check out: Creating .NET Core WebApi project – Handling the POST, PUT, and DELETE requests

The source code is available at GitHub .NET Core, Angular 4 and MySQL. Part 7 – Source Code

This post is divided into several sections:

• Installation of the Angular CLI and starting a new project
• Third-Party Libraries
• Angular Components
• Creating a New Component
• About App.Module
• Additional Content in the Home Component
• Conclusion

Installation of the Angular CLI and Starting a New Project

First, we are going to install the Angular CLI (Angular Command Line Interface) which will help us a lot with the creation of the angular project. To install theAngular CLI, type the following command at the command prompt:

If you already have the Angular CLI installed, verify that you have the latest version. If not, please update it before starting the project. You can find all the instructions in here: https://github.com/angular/angular-cli.

After the installation completes, we are going to create a new project.

Open the Visual Studio Code and in a terminal window (CTRL+~) navigate to the path you want your project in and execute the command:

It will take some time to create the project. After the creation process is over, just open the project folder inside your editor:

Third-Party Libraries

We are going to use the bootstrap library for the styling, so let’s install it with the command:

It will install the library but we also need to import its path into the angular-cli.json file. Place it right above the styles.css:

 

After the bootstrap library installation, we are going to install the type definitions for it. For the installation, type this command:

Right after that, let’s import that type definition inside the tsconfig.app.json file:

To install the JQuery library, type this command:

Type definitions are already installed with the bootstrap types. If they are not, just execute:

This is how the scripts array should look like:

And modify the imports for the types:

For the JQueryUI installation, execute:

and for the types execute:

This is how the styles and the scripts array should look like:

UPDATE: Above style and script paths are going to work with the Angular 6 project (which you are working on if you have updated the Angular CLI as we have mentioned at the beginning of this post). But if you are working on older project version, than your paths must start with two dots instead of one: ../node_modules/bootstrap…

Imports for the types should look like this:

That wraps up the installation of dependencies.

Now we have all the libraries installed and imported into the right files.

Next step is adding our components to the project.

Angular Components

Let’s take some time to talk a bit about the angular. Angular is a framework for building SPA (Single Page Application) applications. Therefore, we are going to generate all of our pages inside one page. That is why we only have the index.html page. In the index.html page all content is going to be generated inside <app-root></app-root> selector which comes from the app.component.ts file.

Take a look inside the app.component.ts file:

Every component must import Component from the @angular/core package. We will import more things when we need them. Also, you might have noticed the @Component decorator inside the code. This is the place where we create our selector (it is the same as the app-root tag in the index.html file). Also, we are binding the HTML template for this component with the templateUrl and the CSS files with this component by using styleUrls. StyleUrls is an array of strings, comma separated. In the end, we are creating our class for the component.

Now if we look in the app.module.ts file, we are going to notice this code:

In this file, we are going to import the necessary modules, components, and services. We are going to use the declarations array to import our components, and the imports array to import our modules. Also, we are going to use providers array for registering our services.

Creating a New Component

To create a new component with the name Home, first, let’s create the folder home inside the app folder. Then inside that home folder, let’s create the home.component.ts, home.component.css, and home.component.html files.

We will do the following actions manually just once for the sake of practice, but after that, I am going to show you how to automate the process.

Empty files won’t do the trick, so let’s add some code to the Home component:

In here we import OnInit interface which defines function ngOnInit. This function will execute any logic inside it as soon as the component initializes. Notice the constructor as well. The constructor is intended only for injection of the service into the component. For any action that needs to be executed upon component initialization, use the ngOnInit method.

About App.Module

In the end, we are going to include our component into the app.module.ts file:

Angular Cli provides a better and easier way to instantiate components, all you need to do is to type the command:

Angular CLI will create all of this for you. Also, it will create the fourth file, home.component.spec.ts which you may use for the testing purpose.

Even though one module is enough for the entire application, you still want to create more modules.

Why?

Because it is easier to maintain the modules and also more modules give you the advantage of the lazy content loading. That means that your application will load only content related to that specific module you are pointing to, and not the entire application.

So let’s continue.

Additional Content in the Home Component

Modify the home component file:

Then, add a new class to the home.component.css file:

Continue with changing the home.component.html file:

Finally modify the app.component.html file, just to test if this works:

Now in the terminal type ng serve and wait for the application to compile. Right after that start your browser and navigate to: localhost:4200. You should see the welcome message on the screen from the Home component.

Conclusion

Right now we have a working component and an Angular application that you can run in your browser. But it is just a beginning. We have a long way ahead of us because there are still a lot of important Angular features to introduce to the project.

By reading this post you’ve learned:

• The way to set up third-party libraries
• The overview of the angular components
• How to create components
• And some facts about modules in angular

Thank you for reading and I hope you found something useful in it.

In the next part of the series, I am going to show you how to create navigation in the project and also how to use routing.

If you have enjoyed reading this article, please leave a comment in the comments section below, and if you want to receive the notifications about the freshly published content we encourage you to subscribe to our blog.