Angular 4 Tutorial for absolute beginners — Part 1

A number of angular newbies I’ve been working with asked me if I could work with them in making an angular app, so I decided to start this tutorial series. In this tutorial, We are going to learn the basics of using angular and practice them in building an actual app. The app that we will build in this tutorial is a realtime chat application.

Prerequisites:

1. Knowledge of HTML and CSS/SASS
2. Knowledge of Javascript

What we are going to learn

At the end of this tutorial series, we will have discussed:

1. An Intro to Angular
2. Installing Angular
3. Components
4. Templating
5. Binding
6. Stylesheets
7. Services

Quick Intro

Angular is a client side Javascript framework for building client applications using HTML, CSS and either Javascript or TypeScript (Typescript later gets compiled into javascript). What by client side, I mean that all the code we write is executed by the browser and never by the server. The framework was developed and is maintained by Google. The key concepts in angular are:

• Seperation of DOM manipulation from Logic — adding html elements, hiding them, and modifying them should be separated from the application logic which may come in the form of APIs, web services etc.
• Seperation of concerns — More like the MVC architechture, angular separates the building blocks in a way that’s easier to follow and maintain. In Angular, we have Components which are made up of models (typescript classes), views(html & css/sass) and modules.
• Make Single Page Application Development easier — Since you can easily manipulate the DOM, you can easily make big applications that run on a single page — more like your modern social networks (Youtube, Facebook etc) that run on one page without a lot of postbacks and multiple page that will be hard to maintain.
• Extensibility and customisation — Although Angular comes with a lot of features by default, its very easy to extend components or add new ones by importing them.

Now that we have an idea of what angular does, lets go ahead and begin our installation.

Installing Angular

To install angular, you will need to install Node.js® and npm if they are not already on your machine. In this process we’ll be using Terminal or Command Prompt (Command line interface). Verify that you are running at least node 6.9.x and npm 3.x.x by running node -v and npm -v in your terminal window. Older versions produce errors, but newer versions are fine. If the two commands give you some error message like npm :command not found then you probably don’t have the two installed. Visit this link to download them.

Once that is done you will need to install the Angular Command Line Interface (CLI). Angular cli is the tool that will be used to create and application, serve it, build it etc. To test if you have it already, runangular -v.

Once this is is done, you can now create a new project using angular cli. To create a new angular project, runng new my-new-app which will create a new angular project called my-new-app for you with some boilerplate code in it. To run the app for the first time, runcd my-new-app to get into the app’s directory and runng serve. The app will be served on localhost:4200 so if you visit that URL

Creating the Chat Application

Now that you have completed the installation, we can now create the Chat application. To create the App, go to your terminal and

• change the directory (cd) into the location you wish to create the app from.
• run ng new chatApp
• run cd chatApp
• run ng serve --open

If you open your browser and browse localhost:4200 you should see something like the image below.

Congrats! you have created your Chat app.

The App Shell

The page above is called the application shell. The app “shell” is the minimal HTML, CSS and JavaScript/TypeScript required to power the user interface and when cached offline can ensure instant, reliably good performance to users on repeat visits. This means the application shell is not loaded from the network every time the user visits. Only the necessary content is needed from the network.

The Angular component that is controlling this App shell, is called theAppComponent. Components are the fundamental building blocks of Angular applications. Think of them as parts of your website, for example, you can have a header component or a navigation component etc.

Editing the app

To start editing the application, open the project in your favorite editor or IDE and navigate to the src/app folder. You’ll find the implementation of the shell AppComponent distributed over three files:

1. app.component.ts— the component class code, written in TypeScript.
2. app.component.html— the component template, written in HTML.
3. app.component.css— the component's private CSS styles.

Open the component class file (app.component.ts) and change the value of the title property to 'Real Time Chat'.

app.component.ts (class title property)

title = 'Real Time Chat';

Open the component template file (app.component.html) and delete the default template generated by the Angular CLI. Replace it with the following line of HTML.

app.component.html (template)

<h1>{{title}}</h1>

The double curly braces are Angular’s interpolation binding syntax. This interpolation binding presents the component’s title property value inside the HTML header tag.

The browser refreshes and displays the new application title.

We have successfully created the Angular app. In the next tutorial, we are going to look at components in more detail.