AngularJS – How to Code from Scratch

AngularJS  or Angular JS is a front-end application framework based on Javascript. It adheres to the MVC (Model View Controller) architecture as well as MVVM (Model View View Model). Google is the main developer for AngularJS. However, it is also maintained by a lot of other developers. This makes AngularJS one of the most active open-source development frameworks.

To keep me abreast with this framework, I am planning to make a series of posts as tutorials. This will be the first part. Other parts are here:

On this tutorial, we are going to go through a development of a common app. To start off, we need NPM installed.

Installing AngularJS CLI

Once you have NPM, you can install a global instance of Angular CLI:

> npm install -g @angular/cli

The above command may take a while to do its thing. Just be patient. This will install a global angular CLI (command line interface) that we can call to create our project. After that, you may now start.

First, let us confirm whether it is properly installed by checking its version. The appropriate command is

> ng --version

As of this writing, I’m using Angular 7.1.3. On your command line you should expect to see something like this:

Creating a AngularJS New Project

Now, lets go to creating a new project. Creating a project on our desired project folder is simply done with just one command. So, if you want to call your project my-app we can just do:

> ng new my-app

When we call this command, it will show us a dialog asking us whether we 1. use routes, 2. what css format we are going to use. For number 1, I answer yes because I’m going to use Angular routing. On the second dialog, I answer SCSS since I’m familiar with SASS or Syntactically Awesome Style Sheets.

As a result, we will see inside the my-app folder the following directory structure as shown:

Serving your Application

Once you verified that you get similar directory structure as above, you can now start your server. To start the server, we just do the command:

> ng serve

You can now open a browser and point it to http://localhost:4200. You may also add a switch -o to the command to open your default browser to that address.

If you see this image, you successfully created your AngularJS application. So, there you have it – Congratulations!