How to easily build an Angular 5 app using Visual Studio Code

Categories: Technology |

The web development usage of Javascript has tremendously increased, along with the popularity of many IDEs – Integrated development environments. Chief among these is Visual Studio (VS) code, which is open source and cross-platform. As a consequence of this evolvement, developing web apps has become simpler.

I want to share some key tips based on my experience, as well as a few pieces of source code, in order to help you quickly build a web app from the ground up, using VS Code and Angular 5.

Angular has become one of the most popular Javascript frameworks to build web apps, because of its programming orientation, as well as the vast ecosystem it works with. By using VS Code, it is very simple to build web apps of any size from most common computer platforms, such as Windows, Mac, or Linux.

Angular 5.0.0 is finally released! Featuring in this major release, we have progressive web apps. These are enhanced web apps, that provide a more engaging user experience comparatively to mobile native apps, and are growing in popularity. Angular 5 comes with extra tooling at its disposal in order to build PWAs simply, and following web standards. One of the new packages Angular 5 is coming with, is the Angular Service Worker, which is used to ensure that a web app can be reliable and always up to date. For instance, the angular official web site is now a live example of an Angular progressive web app. Also, Angular 5 added the Angular Universal State Transfer API. This can be used for example, to navigate an app after loading only the first page.

Here it is a list of some of the main changes in version 5.0.0:

  • Starting at version 5.0.0 the angular-cli production builds will apply the build optimizer by default.
  • Support for DOM manipulation.
  • Improved Angular compiler for faster rebuilds, including builds with AOT (Ahead of Time) compilation.
  • Increased standardization across browsers for number, date and currency pipes, eliminating polyfills.
  • Replaced the ReflectiveInjector by StaticInjector, reducing the application size.
  • Improved in the performance of the Angular’s Zone mechanism.
  • Support for multiple names for components and directives, which can very helpful for migrations.
  • The @angular/https library used to make web requests has been deprecated and instead it is recommend to use the HttpClient Class located in @angular/common.
  • The version 1.5 of angular-cli has added support for Angular 5 by default.
  • Angular Forms validation are at the entire form level.
  • Improved import mechanism for the RxJs library.
  • New router lifecycle events for better tracking.

So, with no more introduction, let’s embark on this trip in order to learn how to build an Angular 5 web app from scratch.

Step by step guide to developing a web app using VS Code and Angular

Note: I have made the final code available on GitHub, it has detailed instructions to install the app.

Visual Studio Code, the integrated, the integrated development environment (IDE) created by Microsoft, is extremely intuitive and cross-platform. This IDE has been created using Javascript code, thanks to an innovative framework named Electron — built by GitHub. In fact, there are other popular IDEs built with Electron like Atom or Sublime.

The next and most important tool we are going to use is angular-cli, which is a command-line tool that allows us to easily create Angular apps. It has been created by the Angular team a while ago, and it is evolving over time.

In fact, the Angular team has announced that they will make the angular-cli tool even more flexible by separating its shell commands from a new independent Development Kit.

One of the advantages of this division is that, while having the Angular DevKit independent of the shell commands, development teams will have the flexibility to choose from third party tools to take care of these commands. For instance, popular IDEs such as VS Code, WebStorm or Atom, will have plugins available that could use these commands and integrate with the DevKit.

How to easily build an Angular 5 app from the ground up using Visual Studio Code

  1. Creating an Angular app using the Angular Command Line Interface

All you have to do to have your web app up and running is open a terminal window in your system, and enter each of these commands:

ng new to-do-app --skip-install
cd to-do-app
yarn
code .
ng serve

And that is all there is to it.

You can now access the app through this url: http://localhost:4200; however, it barely has web content interaction. Let’s have some fun by adding functionally.

On a side note, the command on the third line incorporates Yarn into our app. Yarn is a package manager created by companies like Facebook and Google; which builds on top of npm.  According to their site, they offer fast, reliable and secure dependency management. In fact, if you have used npm alone to manage your packages; you will have a better development experience by using Yarn.

  1. Creating an Angular component and service

First, we will be writing a few additional commands, in order to create a component and a service, which are necessary to build our example app.

One of the previous commands already opened the project folder in VS Code. Go to the IDE, open a new integrated terminal and enter two more angular-cli commands:

ng g component To-Do
ng g service to-do/To-Do

The file at the bottom, app.module.ts, is the the app main module, we will come back to it in a bit.If we go to the folder structure: src/app/, we will see the component and service files created:

The file at the bottom, app.module.ts, is the the app main module, we will come back to it in a bit.

  1. Adding HTML, CSS and Javascript code

Next open the to-do.component.ts file and replace its content with this piece of code:

And open the to-do.component.html file and replace its contents with the following code:

After that let’s replace the contents of the to-do.service.ts file with this code:

After creating a service we need to provide a reference of it to the main module, which is the app.module.ts file. In it, the providers’ section array looks empty: “providers: [],”

Just fill the array with the name of the TodoService:

providers: [TodoService],

And VS Code will auto-import the reference:

We are also using reactive forms, so we need to add their references to the main module as well. Add the following imports:

We need somewhere to store our data. In this example we will be creating a couple of files for both, modeling the data structure and using our test data: to-do.ts and api/to-do-data.ts, as follows:

to-do.ts
to-do.ts
to-do-data.ts
to-do-data.ts

Down the road, the api folder can be replaced by a back-end service reference, built with another technology such as Node or Firebase.

Add this code to the model to-do.ts file

And add this code to the to-do-data.ts file

 

It is worth saying that the files with extension .ts contain code in TypeScript which is a superset of Javascript, and compile to Javascript as well. TypeScript is a strong-typed language that allows you to do fast refactoring and also prevents your app from having type errors in production.

  1. Adding CSS styles

Now everything would seem to be working, the Angular files have been put in place, containing the HTML markup and our beautiful Javascript code. However, we are looking at adding CSS styles to give the user a better experience.

We will make use of the Bootstrap CSS library to take care of the styles. We will be using a beta release of Bootstrap version 4; which was the latest one at the point at which I wrote this post. We can integrate it with Angular in a package called ng bootstrap; if we want to add Bootstrap to our project we need to do a couple of things:

Firstly, enter this command:

yarn add bootstrap ngx-bootstrap

And secondly, open the .angular-cli.json file, located in the src folder, and insert this new entry ,”../node_modules/bootstrap/dist/css/bootstrap.min.css”, into the styles array:

Every time we make changes to the angular-cli.json file we need to restart the ng serve command, so that we reflect those changes. From our very first terminal window, we do this by stopping the ng serve command with ctrl+c and running the ng serve command again. Don’t forget to save all your changes, the angular-cli will do the rest.

Finally, the component is ready to be rendered as a part of the main page content. In order to do so, replace the contents of the app.component.html file with the following markup:

We come back to the browser and, voilá! our app finally works:

to-do app in action

 

One of the beauties of using Angular nowadays is the separation of concerns in which we can have a different file to hold each of the blocks that compound a web app. As a result, our app clearly follows the web standard model:

 

And this is how we managed to build a simple Angular app in this article. We also had a chance to take a look at a set of tools that are very popular to build these types of apps.

To sum up, building a scalable web app using Angular and VS Code is very easy and can be done on most platforms like Mac, Windows or Linux. On top of that; the ecosystem of tools, frameworks, and platforms that a developer can choose from, in order to build an Angular app is always evolving and growing. This has just been one of the options I found, considering development productivity and one of the most popular front-end frameworks.

Related content

Why DevOps?

 

Leave a comment