Angular - Angular Project Preparation

Angular project preparation can vary from project to project and from version to version, and this article is dedicated to that topic.

Creating the server part (.NET Core Web API part) is just 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.

This article is part of the series

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

The source code is available at GitHub .NET Core, Angular, 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 as Part Of Angular Project Preparation
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 Angular project preparation and Angular project development overall. To install Angular CLI, type the following command at the command prompt:

npm install -g @angular/cli

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 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:

ng new AccountOwnerClient

Two questions will appear. The first one is whether we want our project to have routing created, and the second one is about what kind of styling we want in our project. We are going to answer NO (N) for the first question, and (CSS – just hit enter) for the second one.

It will take some time to create the project. After the creation process is over, we are going to open the project folder inside our editor:

Third-Party Libraries as Part Of Angular Project Preparation

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

npm install --save bootstrap

It will install the library but we also need to import its path into the angular.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:

npm install --save @types/bootstrap

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

To install the JQuery library, type this command:

npm install --save jquery

For the JQuery types, we have to execute:

npm install --save @types/jquery

This is how the scripts array should look like in the angular.json file:

"scripts": [
	"./node_modules/jquery/dist/jquery.min.js",
	"./node_modules/bootstrap/dist/js/bootstrap.min.js"
]

And modify the imports for the types:

"types": [
  "jquery",
  "bootstrap"
]

For the JQueryUI installation, execute:

npm install --save jqueryui

and for the types execute:

npm install --save @types/jqueryui

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

"styles": [
	"./node_modules/bootstrap/dist/css/bootstrap.min.css",
	"./node_modules/jqueryui/jquery-ui.min.css",
	"src/styles.css"
  ],
"scripts": [
	"./node_modules/jquery/dist/jquery.min.js",
	"./node_modules/bootstrap/dist/js/bootstrap.min.js",
	"./node_modules/jqueryui/jquery-ui.min.js"
  ],

Imports for the types should look like this:

"types": [
  "jquery",
  "bootstrap",
  "jqueryui"
]

That wraps up the installation of dependencies.

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

The next step is adding our components to the project.

Angular Components

Let’s take some time to talk a bit about 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:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'AccountOwnerClient';
}

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, which is quite important for the Angular project preparation and for development at all, we are going to notice this code:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

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, let’s execute the following command:

ng g component home --skipTests

With this command, we are creating the Home component with three files (.ts, .html, .css). And by adding the –skipTests flag, we prevent creating the test file.

We can inspect the Home component now:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

In here we import OnInit interface which defines the 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 the 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

If we check the app.module.ts file, we will see that our new component is imported with our previous command:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }<code></code>

So, as we can see, Angular CLI creates all of this for us.

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

Why?

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

That said, let’s continue.

Additional Content in the Home Component

Let’s modify the home component file:

export class HomeComponent implements OnInit {

  public homeText: string;

  constructor() { }

  ngOnInit() {
    this.homeText = "WELCOME TO ACCOUNT-OWNER APPLICATION";
  }

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

.homeText{
    font-size: 35px;
    color: red;
    text-align: center;
    position: relative;
    top:30px;
    text-shadow: 2px 2px 2px gray;
}

To continue, we are going to change the home.component.html file:

<p class="homeText">{{homeText}}</p>

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

<div class="container">
  <div class="row">
      <div class="col">
        <app-home></app-home>
      </div>
  </div>
</div>

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, we are going to show you how to create navigation in the project and also how to use routing.

Angular – Project Preparation