Angular: Getting Started

Angular is a framework for developing mobile and web applications. It is a great framework for web developers to use because it simplifies many of the key tasks such as user input capturing and in-app navigation. It is often the case that the web applications you are going to be developing will not host their own data on the user's computer but will rely on some central data source. If that is the case then your applications will definitely need an efficient way of communicating to remote services. In Angular, such a task is simplified and streamlined to maximize developer comfort and productivity.

Angular makes single page applications, that is, when building is complete there is only one HTML page that is produced (index.html) and all the in-app navigation is simply moving to different sections of the same page. There is no need for a page to reload which is great because our users don't have to waste time waiting. This implies that when the user is interacting with the website, all the static content is loaded once therefore faster navigation. We can also implement a cache on a single page application to store the content from a back-end service so that we do not have to continuously request the same data.

I think my favorite perk that comes with single page applications is that it's a single page. By that I mean the code is written only once, external styles and scripts are added only once, same with the dependencies. This makes debugging and editing the application a breeze compared to multi-paged apps. Imagine you find out that one of your script files is misbehaving, with a multi-page app (potentially) each page has a reference to that script. Then imagine you delete that misbehaving script, you now have to go through each page that has a reference to the script and delete the reference. This is sub-optimal.

The build process itself does a process called Tree Shaking that prunes off unused code making the resultant app smaller and thus faster at run time. The smaller resultant bundle also implies that shipping and deploying the application is faster.

There are many other benefits from using Angular that we will cover as we progress with our series but for now lets get hands on. For us to write Angular web apps we need Node.js installed on our machine. Lets check whether we have node installed:

node -v

We also need npm installed:

npm -v

Now we need to add the Angular Command Line Interface to our development environment. The CLI provides a very easy and straight-forward way of adding components, services, and dependencies into our applications and building, testing, and serving our applications.

npm install -g @angular/cli

We include the tag -g here to indicate that we want to install the CLI globally across our machine. If you face challenges with installing the CLI please check your node version and make sure it is 12+ and your npm version is 6+.

Now we are ready to make our first project. To create a new Angular app using the CLI ensure that you are in the directory that you want to put your project and type

ng new mkhaya

ng is the command to call the Angular CLI. new tells the CLI that we are creating a new project and mkhaya is the name of our new project. We are going to be working with our mkhaya project as we progress through our Angular series. The CLI will prompt you whether you want to add routing, select yes and for the stylesheet format we are going to be using CSS. The CLI will scaffold the project and install the required packages.

When installation is complete we can check whether we have things set up properly by  navigating into our application and serving it:

cd mkhaya

ng serve --open

When its finished compiling it will launch our application listening on localhost:4200 and open the default browser showing our application. At this point we can smile because we are on our way to building an amazing web app.

Next, lets discuss the project structure and the files that were created by the CLI. Open the project using your favorite text-editor or IDE.

For now we are going to talk about three files: angular.json, karma.conf.json, and package.json. The angular.json file is the manifest of our application. It describes the architecture of the application, its behavior at build, serve, and test phases. Its the primary configuration file. The karma.conf.json file configures how Karma is supposed to run our unit tests. Karma is a JavaScript test runner that integrates seamlessly with testing frameworks such as Jasmine. We will cover testing in little while.

package.json is used for managing the external dependencies that we include in our application. At times we need external libraries to help us accomplish certain tasks in our app and we can either use npm (Node Package Manager) or the CLI to add these dependencies. When using npm we use the command in this way: npm install [PACKAGE NAME] and when using the CLI: ng add [PACKAGE NAME]. These commands edit the package.json file by adding a record of the dependency that we would have added. This is useful when we want to run the application on another machine that is not our development machine. The application has to have a record of the dependencies that it needs installed for it to run properly and then download them accordingly.

Lets navigate into the src folder.

In it we see a number of files including the index.html file which is the entry point of the application with the styles.css file being the main style sheet. The app folder contains the source code for our app, in assets is where were are going to keep our static content such as images and other style sheets, and in environments is where we set our environment variables.

Great, now we have gotten started and we have a rough idea of what angular is. In the next post we will talk about components and how we can interact with our users. Take care.