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.
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 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:
1 |
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 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:
1 |
ng new AccountOwnerClient |
In Angular version 7, as soon as we type this command, 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, just open the project folder inside your 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:
1 |
npm install --save bootstrap@3 |
It will install the library but we also need to import its path into the angular-cli.json
(In Angular 6 it is 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:
1 |
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:
1 |
npm install --save jquery |
Type definitions are already installed with the bootstrap types. If they are not, just execute:
1 |
npm install --save @types/jquery |
This is how the scripts array should look like:
1 2 3 4 |
"scripts": [ "./node_modules/jquery/dist/jquery.min.js", "./node_modules/bootstrap/dist/js/bootstrap.min.js" ] |
And modify the imports for the types:
1 2 3 4 |
"types": [ "jquery", "bootstrap" ] |
For the JQueryUI installation, execute:
1 |
npm install --save jqueryui |
and for the types execute:
1 |
npm install --save @types/jqueryui |
This is how the styles and the scripts array should look like:
1 2 3 4 5 6 7 8 9 10 |
"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" ], |
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:
1 2 3 4 5 |
"types": [ "jquery", "bootstrap", "jqueryui" ] |
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 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:
1 2 3 4 5 6 7 8 9 10 |
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app'; } |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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, 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
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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 { } |
Angular Cli
provides a better and easier way to instantiate components, all you need to do is to type the command:
1 |
ng g component home |
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:
1 2 3 4 5 6 7 8 9 |
export class HomeComponent implements OnInit { public homeText: string; constructor() { } ngOnInit() { this.homeText = "WELCOME TO ACCOUNT-OWNER APPLICATION"; } |
Then, add a new class to the home.component.css
file:
1 2 3 4 5 6 7 8 |
.homeText{ font-size: 35px; color: red; text-align: center; position: relative; top:30px; text-shadow: 2px 2px 2px gray; } |
Continue with changing the home.component.html
file:
1 2 3 |
<div class="col-md-12"> <p class="homeText">{{homeText}}</p> </div> |
Finally modify the app.component.html
file, just to test if this works:
1 2 3 4 5 |
<div class="container container-fluid"> <div class="row"> <app-home></app-home> </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, 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 and if you would like to receive the notifications about the freshly published Angular content we encourage you to subscribe to our blog.
Grate post and great blog.
In the angular app, modify the app.component.html file to include the home componente
I’m waiting for all this post in the future
Awesome series, thank you Marinko.
One thing I noticed from the steps above, you need to remove the space before “bootstrap”
npm install –save @types/ bootstrap
Hi Matt. Thank you very much for reading the series and for your comment as well. I hope this series is helpful to you. If you like it you may always subscribe to receive notifications when a new article is published.
Thank you very much for the suggestion, it was my bad (typo). Now it is fixed.
All the best.
Hi Marinko, awesome work with the server and client series.
I was having trouble with referencing the jquery library. Apparently the Angular team made some changes on how you reference scripts and styles (Angular 6).
After some Googling I made the following change:
From:
“../node_modules/jquery/dist/jquery.js”,
“../node_modules/bootstrap/dist/js/bootstrap.js”
to
“./node_modules/jquery/dist/jquery.js”,
“./node_modules/bootstrap/dist/js/bootstrap.js”
Now it is working for me.
Cheers!
Hi Caio Castro. First of all, thank you very much for reading our posts and I am really glad that you find it awesome. We are investing a lot of work in all our posts and it is always a pleasure to read a nice words from our readers.
Now about the issue: OMG 😀 😀
You are totally right. If I try to create Angular 6 project and try to reference with ../node_modules, the project doesn’t build as soon as I change to ./node_modules, it builds like a charm. But pay attention to this, if I use this old project and try to reference with ./node_modules, the build brakes in the same way 😀 😀 so in earlier projects we need to use ../node_modules. It is so weird and I must admit a little bit of frustrating.
Thank you very very much for your comment, I haven’t noticed that this could be the problem, and you helped us a lot. You helped the readers as well, if some of them stumble upon the same problem.
I am going to update the article.
One more time, thank you very much. All the best.
I’m following this tutorial, learning quite a lot too. I’ve noticed that you made this part with Angular 4, and later updated some parts for Angular 6 (as its used in creating new projects with latest angular-cli).
I found a little typo you might have not noticed. (It’s my first time using Angular, or any front-end framework rly)
“It will install the library but we also need to import its path into the angular-cli.json file.”
In Angular 6 I think its now just “angular.json”
Really interesting series!
Hello irrelevant. First of all, thank you very much for reading and for your suggestion. It is quite a joy when we have readers like yourself. You are totally right, I haven’t noticed that in Angular 6 there is no more the angular-cli.json file but now it is just angular.json. I am going to update that in this article.
Angular made a lot of “small” changes in its new version and I have to update article to make easier reading for our readers, so it is great to have someone who gives you suggestion when we miss something.
If you like these articles, feel free to subscribe to receive notification about new articles, which are published every week.
One more time, thank you very much.