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
, we need to open the command prompt (the best option is to open it as administrator) and use the install command:
npm install -g @angular/cli
If you already have the Angular CLI installed, you can check if you have the latest version:
ng --version
If you don’t have the latest version (13 for this article), you can uninstall it:
And after that, we can use the install command (mentioned above) to reinstall it.
After the installation completes, we are going to create a new project in the same command window:
ng new AccountOwnerClient --strict false
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 Yes (Y) 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. We will use Visual Studio Code.
Third-Party Libraries as Part Of Angular Project Preparation
We are going to use the ngx-bootstrap library (angular bootstrap) for
styling, so let’s install it using the terminal window in the VS Code:
ng add ngx-bootstrap
After we start the installation, it will inform us that we are about to install the ngx-bootstrap@8.0.0 (in our case) package and whether we like to proceed. We are going to confirm that and finish the installation.
With this installation, we are installing both bootstrap and ngx-bootstrap, and also our package.json
, angular.json
, and app.module
files will be updated:
At this point, we can try to run our app:
ng serve -o
With this command, we are going to run our app and also open it in a browser automatically (-0 flag).
If you get an error now (this is possible to happen due to a new ngx-bootstrap version), all you have to do is to open the angular.json
file and modify the styles array:
We have to modify the ngx-bootstrap path since it is wrong by default.
After this modification, we can run our app, and after a few seconds, we are going to see the initial page:
The next step is adding our components to the project.
Creating 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 inside the src
folder. In the index.html
file all content is going to be generated inside <app-root></app-root>
selector, which comes from the app.component.ts
file.
That said, let’s take a look inside the src/app/app.component.ts
file:
Every component must import Component
from the @angular/core
package. We will import more things when we need them. Also, we can notice 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). Additionally, 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.
Lastly, we have the exported class for the component.
Now let’s take a look in the app.module.ts
file, which is quite important for the Angular project preparation and for development at all :
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 the providers
array for registering our services.
Creating a New Angular Component
To create a new component named Home, let’s execute the required command:
ng g component home --skip-tests
With this command, we create the Home component with three files (.ts, .html, .css), and update the app.module file:
Also, by adding the --skip-tests
flag, we prevent creating the test file.
After the creation, we can inspect the Home
component:
Here we import OnInit
interface which defines the ngOnInit
function. This function will execute any logic inside it as soon as the component initializes.
We can 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, we should use
the ngOnInit
function.
About App.Module
If we check the app.module.ts
file, we will see that our new component is imported with our previous command:
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.ts
file:
Then, let’s add a new class to the home.component.css
file:
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, by removing all the content and adding a new one, just to test if this works:
Now in the terminal, let’s type again ng serve -o
and wait for the application to compile and run. We 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
we can run in our browser. But it is just the beginning. We have a long
way ahead of us because there are still a lot of important Angular
features to introduce to the project.