Clubhouse is now FREE with all core features, for up to 10 users! Learnmore
Software Development

Building Single Page Applications using AngularJS

Hrithik Jha

Since the inception of the world wide web, websites have been getting better. From static HTML pages with minimal CSS designing to websites which can stream 8K video with caching periods predicted my ML algorithms to provide a smooth streaming experience.

Front-End frameworks have been a major step ahead in website experiences. In this article, we’ll build a Single Page Application (SPA) using AngularJS. Angular is developed by Google and is now written using TypeScript. A good transition to Angular can be using AngularJS which uses JavaScript and easy to grab concepts.

What is a Single Page Application?

Gmail would be a perfect example of a SPA. You have all your tabs on the left such as Inbox, Spam, Snoozed and so on which don’t reload the page you’re on but change a certain part of the page. Similarly, when you’re in your inbox and click on a mail, it opens up in a certain part not reloading the whole page.

Setting Up:

You only need a Code Editor (even Notepad if you’re brave) and internet since we’re using a CDN to provide Angular functionalities. Include the following code in your HTML file:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.min.js"></script>

The Code:

Starting out, this is the webpage:

The tabs on the left are the Navigation section and section on the right is the one which will be changing. Initially, we can set a welcome message which is displayed when the url ends with /.

The HTML and CSS code:

<body ng-app="mApp">

Notice we’ve written ng-app=“mApp” after body. ng-app is an Angular Directive. Angular Directives are certain flags which provide useful functionalities and are placed inside HTML tags. This tag initializes the Angular code signifying that the functionalities will be inside <body>. To have different “Apps”, you can give the ng-app to different <div> tags if each needs a drastically different functionality.

<div id="wer" ng-view></div>

Here, ng-view is another Angular Directive which has changing views in an ng-app. It means that this <div> will keep changing in response to our interaction with the navigation tabs. It has been initially set to: “Welcome to my website, please select an option.”

The Angular code follows just after the HTML code.

The Angular Code:

  var app = angular.module("mApp", ['ngRoute']);

The variable app is initialized as module “mApp”, the ng-app directive for our <body> tag. It is important to use the same variable name for this. ng-app acts as a container and the variable “app” controls the operations inside it.

Notice that ngRoute is a part of the parameter passed. It is a dependency which we earlier used the CDN to access its functionalities. The traversal to the difference views is accessed through routing and hence, the use of ngRoute.

           app.config(function($routeProvider){
$routeProvider

Using app.config, we use ngRoute and work with $routeProvider. Notice routeProvider has a $ in front of it. In Angular, all variables, functions which can be accessed through Angular are present in the Scope. Think of scope as a pool with everything inside accessible through Angular. It is a subset of all variables in a program.

               .when("/", {template:"<p>Welcome to my website, please select an option.</p>"})

Using routeProvider we access .when.

Think of it as a switch case. Where the case is the URL endpoint. So now when it is only / we’re at the homepage. Further, template is what we use to display the content of the div with ng-view at the current URL endpoint. If you notice, it has <p> tags. HTML code can be written inside the template which will be displayed in the <div>.

               .when("/about", {template:"<h1>Hi, I'm Hrithik. I like making websites.</h1>"})

Here, I’ve written the content inside <h1> tags which reflects in the output.

Writing HTML code inside template is very constraining and to counter it one can use templateURL and instead of the HTML code we write in the name of the file, such as about.html.

We have finally built a SPA using Angular. The possibilities with Angular are endless as it is a very detailed and liberating framework. You can better understand Angular by reading about the different Angular Directives and about Angular Controllers.

Thank you for reading this article!