Angular.js: Turbocharge Your Web Pages

What is Angular.js? | Examples | Installing Angular.js | Conclusion

Did you read my piece entitled "The Five Pillars of Web Development?". If not have a look first. It says that you have to write some pretty fancy HTML and styles in order to make a nice-looking and responsive web page.

Angular.js claims to be an all-in-one JavaScript library for web site development. It allows you to use declarative html to do most of what you would otherwise have to do using a combination of JavaScript and Cascading Style Sheet code.

1. What is Angular.js?

The following is from the Angular/docs website:

AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. AngularJS's data binding and dependency injection eliminate much of the code you would otherwise have to write.

With AngularJS, designers can use HTML as the template language and it allows for the extension of HTML's syntax to convey the application's components effortlessly. Angular makes much of the code you would otherwise have to write completely redundant.

AngularJS is maintained by Google, as well as a community of individual developers. The detailed, technical aspects of this framework can be found on the AngularJS website, which states that “AngularJS lets you extend HTML vocabulary.”

Sounds pretty cool, n'est-ce pas?. Let's try it.

2. Examples

There are tons of resources on the web to help you learn about Angular. The one at is especially good. Type this into a text file on your desktop called "Test.html":

<!DOCTYPE html>
<html lang="en-US">
<script src=""></script>

<div ng-app="">
  <p>Name : <input type="text" ng-model="name"></p>
  <h1>Hello {{name}}</h1>


The screen that results looks pretty unimpressive, until you start typing:

Fig. 1 - A simple input form using Angular.js

This is pretty spectacular. It's using JavaScript to respond to the KeyDown event; the instant you type, the label below the input box changes. You don't get that with plain ole' HTML.

There are links to many tutorials on this page:

All of these effects and more are available for the price of a single script link in the Head section, plus what is really a small amount of code.

Angular doesn't do everything. Click on the Angular Http entry in the list. The line


returns the contents of the named file. That's called AJAX, the acronym for "Asynchronous JavaScript And XMLHttpRequest". It returns the contents of the named text file. Why does it have an "htm" extension? Because a web server returns it, and web servers handle files based on their extensions.

What if you want to return a table? The next example shows how:

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    .then(function (response) {$scope.names =;});

$http.get("customers.php") refers to the text returned by a call to a PHP page. What is PHP? It's "Hypertext PreProcessor", a web server scripting language processor. PHP pages, like aspx pages, are used to return generate and return pages formatted by a program (C# or Visual Basic in the case of a Microsoft web server). PHP is similar to C++, but with looser rules that make it a little easier to learn and use.

The use of AJAX to call the page means that you can ask a programmer to provide a web page or web service that sends data you need the formatted as an HTML <table>. But still, someone's got to write it. Here's what I use in my Topics web page:

var xhttp = new XMLHttpRequest();"GET", "GetTopicTable.aspx", true);
document.getElementById("myDivName").innerHTML = xmlhttp.responseText;

The page doesn't have to be reloaded; the data that's returned (as a fully-formed <table>) is simply stuffed into the named div. (Note that you must specify the div an id of myDivName and include runat="server".)

Angular is what Google's developers use to provide a consistent user interface, and to enhance productivity; it does both very well. And given that it's free, it's an easy choice.

3. Installation

If you want to deploy an app to a server, you're responsible for providing what it needs to function. To do that, you'll need to install the Angular development environment on your computer. Here's what you're getting yourself into.

There's an old Steve Martin joke that goes like this:

How do you get a million dollars in real estate? First, get a million dollars. Then, ...

The Angular website contains this instruction: "First, install node.js Then,...

This is your first indication that the world of javascript development environments is not quite as simple as Visual Studio.

Next, open the node.js command prompt and type

npm install -g @angular/cli

To verify that it worked, type

ng -v

The ANGULAR logo will appear in splashy DOS TEXT format.

Next, create a new folder (I used C:\WebSites\Angular) and type

ng new Angular5Demo

A total of 29,873 files (348mb)! will be generated. Now, navigate to (use your own directory structure)

cd C:\WebSites\Angular\Angular5Demo

Now you're ready to try out the sample web page that was created. Type

ng serve --open

That should launch your newly-generated app in your default browser:

Fig. 2 - The generated Angular.js web page

In the file C:/WebSites/angular5demo/src/app/app.component.ts, change the last line of code from Title="app" to something clever:

import { Component } from '@angular/core';

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  title = 'This required twenty-nine thousand files? Really?';

Use Ctrl+C to kill the process. You've just written your first Angular app. To deploy it, you'll need to build a compiled app. In the node.js command prompt, type this:

build ng

This will create a new folder called dist which will contain an app that you can deploy.

Fig. 3 - The dist folder ready to be deployed

4. Conclusion

Angular provides the tools to produce some pretty nice-looking HTML right out of the box. You'll still have to provide sources for dynamic content (e.g. SQL and C#), but it's a pretty attractive package - and did I mention that it's free?