Angular 7 tutorial: learn Angular 7 by example

Tutorials, Web Development

Angular 7 - what are the new improvements and features? Keep on reading this Angular 7 tutorial and create your own web application with me to learn more about this modern web framework by example.

When you’re talking about modern web frameworks, it’s hard not to mention Angular. It belongs to one of the top most popular web technologies. The premiere of the latest version, Angular 7, induced me to write this article.

Being the seventh version of a technology from Google may discourage you from learning – especially newer developers. Because, “Hey? What was so special about the previous six versions anyway?” We don’t necessarily have to worry about what and when something was added.

However, Google programmers haven’t wasted time. They have presented us with, maybe not a revolution, but the evolution of a solution that will surely appeal to you.

How can you find out more? It’s best to create your own application and see the advantages and disadvantages of the technology for yourself. In the further part of the article, I will create such an application with you, so that you can see that new developers should not be afraid of Angular.

Angular 7 tutorial: how to start?

To start having fun with new Angular 7, it will be necessary to prepare the appropriate tools. The first and most important one is Node.js. We will need it to launch our application. It is worth mentioning, that by installing Node.js we gain access to the Node Packaged Module – in short: npm.

The IDE editor will be the second crucial tool to work with. For your own convenience, I recommend one with a built-in terminal. If you use Visual Studio Code, I recommend installing the ‘Angular Extension Pack’ extension, which will definitely make your work easier.

Angular 7 by example: Angular CLI

Angular CLI – what exactly is it? This is another tool that will make working with Angular simpler, faster and more enjoyable. The task of Angular CLI is to create and manage our project. It automates many activities using a dedicated command-line interface.

Angular CLI installation:

We have to first install it in order to use it. For this operation, we will need the aforementioned package manager. Just open the terminal and execute the command:

npm install -g @angular/cli

Having our “command center”, we can now manage our application. First of all, you have to create it to be able to manage it. Here we will use one of the commands we acquired along with the command line installation of Angular.

Angular 7 guide: create the project

Having prepared the environment, we can proceed to the creation of the project. We do this with the previously installed Angular CLI and one of its commands – namely:

ng new <project-name>

We should enter the name of our project here <project-name>. In my case, it will be ‘application’.

In doing this command, Angular CLI will ask us if we want to use angular routing.

In this case, we will not use it as its presence will not be relevant to us. The answer to this question is therefore arbitrary.

In the next question, we will have to choose our CSS precompiler. If you do not know what CSS precompilers are, then I encourage you to Google the phrase and get to know them; they really make our work more efficient! Here, I have chosen SCSS.

After answering this question, the creation of our project is initiated. After a while, we should see a message regarding added dependencies and the creation of the whole project. To make sure everything has been done correctly, we can go to the directory with our application using the following command in the terminal: cd <project-name> and then executing the command: ng serve. In this way, we launch our application that has just been generated by Angular CLI. This is what it should look like in the terminal:

Angular 7 tutorial - learn Angular 7 by example

As you can see, our application has been launched locally on port 4200. After going to the website: http://localhost:4200/ , we should see the homepage of the Angular web app, which looks like this:

Angular 7 tutorial - how to start?

Bravo! You have taken your first step in Angular! However, do not rest on your laurels just yet; you still have to learn a lot of things about what the CLI has generated and how to manage it all.

Angular 7 tutorial: file structure

Let’s talk about what has just been created in the directory of our application. Open it in the IDE and look at the file structure:

Angular 7 by example: Angular CLI

First of all, I encourage you to read the README.md file, where you will find all the necessary commands needed to work with the application as well as a link to the documentation of Angular.

Apart from all this, you will see a very standard division: we have the ‘e2e’ folder where our UI tests are located as well as a directory with ‘node-modules’ dependencies, the content of which is controlled by the package.json file. Let’s stop for a moment here. This is the place where we can find out what our application uses and in which version.

"dependencies": { 
    "@angular/animations": "~7.0.0", 
    "@angular/common": "~7.0.0", 
    "@angular/compiler": "~7.0.0", 
    "@angular/core": "~7.0.0",
    "@angular/forms": "~7.0.0",
    "@angular/http": "~7.0.0", 
    "@angular/platform-browser": "~7.0.0",
    "@angular/platform-browser-dynamic": "~7.0.0", 
    "@angular/router": "~7.0.0",
    "core-js": "^2.5.4",
    "rxjs": "~6.3.3",
    "zone.js": "~0.8.26"
}

At this point, we can once again make sure that we are using the latest version of Angular.

The third directory is the heart of our application: the ‘src’ folder. This is where we find the main controller, style files and the configuration file of our unit tests. We should pay attention to folders with components and especially the one called ‘app’.

Angular 7 tutorial

What does our Angular component consist of? By default, Angular CLI creates its view (.html) in the component’s directory. It corresponds to the style file (.scss) and the logic contained in the file with the .ts extension. These three files will be the most interesting for us at the moment.

Perhaps you may be asking yourself now: Why such a division? What are these components designed for?

Angular 7 tutorial: components

They have one goal: to keep order. It’s easier for us to understand how a complicated system works if we look at each of its small parts separately, rather than if we analyze it as a monolithic whole.

An analogy to Lego blocks works great here. Each Lego building has a finite number of individual blocks. The individual blocks combine into larger combinations creating elements of our construction. Cooperation between selected elements is also necessary; not all of them can be easily combined. In addition, pre-created combinations can be reused; for example, towers in the castle. Nothing prevents you from experimenting with different combinations.

Angular 7 tutorial

The creation of web applications too can be so simple and natural. With this newly acquired knowledge, let’s take a look at the ‘app’ component again. Let’s color the background of its content blue:

In our case, the ‘app’ component is the only one in the application and it is responsible for displaying the entire page. How can we expand our structure? It’s simple – all we need to do is return to our “command center”. Angular CLI enables us to create new components from the terminal level. All you have to do is execute the following command in the directory of our project:

ng generate component <component-name>

Here <component-name>, we enter the name of our new component. In my case, it will be ‘list’ because I would like to put my shopping list for tomorrow there. I would like to encourage you to read the documentation of Angular CLI which you will find here. Let’s return to our new component. After executing the aforementioned command in your ‘src’ directory, you should see the newly created component. I put my list in its view:

<div style="background-color: bisque; border: 3px dashed black">
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
  <li>Tomatoes</li>
</ul>
</div>

Now, to make our component visible, we need to place it somewhere. It is assumed that the parent of all components is the ‘app’ component, which we already have. Let’s put our list in it and remove unnecessary logos and links at the same time:

<div style="background-color: cornflowerblue; border: 3px dashed black;">
<div style="text-align:center">
<h1>
   Welcome to {{ title }}!
</h1>
</div><
<app-list></app-list>
</div>
Angular 7 tutorial: summary

Now we should have the following view:

This perfectly illustrates an example of nested components. We can easily distinguish a parent (the blue ‘app’ component) and its child (the ‘list’ component, which has a yellow background). In this way, we have created our first component.

Angular 7 tutorial: summary

Congrats: you’ve created your first web application in Angular 7! I hope you know more about this modern web framework now. How do you like it? Let me know in the comments below. Please have a look at other web development article on our blog. In the next part of this Angular 7 guide, we’ll deal with the data display in the components, based on the directives available in the latest Angular.

Krzysztof Drozdowski

Krzysztof is our front-end developer who mostly develops web applications at Zaven. Recently, he has been testing the latest version of Angular in practice. And he is taking his first steps as a blogger too!

Popular posts

From Hype to Hard Hats: Practical Use Cases for AI chatbots in Construction and Proptech.

From Hype to Hard Hats: Practical Use Cases for AI chatbots in Construction and Proptech.

Remember the multimedia craze in the early 2000s? It was everywhere, but did it truly revolutionize our lives? Probably not. Today, it feels like every piece of software is labeled "AI-powered." It's easy to dismiss AI chatbots in construction as just another tech fad.

Read more
Fears surrounding external support. How to address concerns about outsourcing software development?

Fears surrounding external support. How to address concerns about outsourcing software development?

Whether you’ve had bad experiences in the past or no experience at all, there will always be fears underlying your decision to outsource software development.

Read more
What do you actually seek from external support? Identify what’s preventing you from completing a project on time and within budget

What do you actually seek from external support? Identify what’s preventing you from completing a project on time and within budget

Let’s make it clear: if the capabilities are there, a project is best delivered internally. Sometimes, however, we are missing certain capabilities that are required to deliver said project in a realistic timeline. These may be related to skills (e.g. technical expertise, domain experience), budget (hiring locally is too expensive) or just capacity (not enough manpower). What are good reasons for outsourcing software development?

Read more
Mobile Apps

Get your mobile app in 3 easy steps!

1

Spec out

with the help of our
business analyst

2

Develop

design, implement
and test, repeat!

3

Publish

get your app out
to the stores


back to top