AngularJS Basic App

Many years ago, when Version 2.0 came out for Angular, there became a split between AngularJS (1.x) and Angular (2 and above). Because the difference was so great, it was difficult to migrate from 1.x to 2.0. Angular team decided to continue to support and update the 1.x version.

Even though Version 2.0 was released in September of 2016 and Version 7 was released in October of 2018, Version 1.75 was also released that same month.

So why keep both version lines going? It is quite expensive to rewrite the entire code base into the new version. And these legacy systems still need developers to work on them.

The AngularJS App I’m discussing here is a basic simple page. A bit of a Hello World with a little extra spice. I’m going to assume that you, gentle reader, are familiar with HTML, CSS and JavaScript. While we walk through each of the files, I’ll mention only the AngularJS portions. If I don’t mention something, you can assume it’s part of standard HTML.

HTML Page

As with any web based site or app, there needs to be an HTML page. The HTML, for the most part, is basic HTML. All the elements that your used to.

<!DOCTYPE html>
<html ng-app='HelloWorldApp'>

On the html tag we find here an attribute ng-app. This declares where the AngularJS app is located. By putting it in the HTML element, the app encompasses the entire document. This could be put on the body element, or even a div. But that would limit the app coverage.

  <head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
    <script src="app.js"></script>
    <title>Hello AngularJS!</title>
  </head>

The head of the page looks pretty normal. I’ve included the AngularJS file from Google’s library. The app.js file will be were we’ll put the AngularJS code. These two files are also commonly found near the close of the body tag.

  <body>
    <h1>Hello world from a Basic AngularJS App!</h1>

Basic HTML, moving on.

    <div ng-controller='HelloWorldController'>

The attribute ng-controller marks the block that each controller has. Anything inside this div is controlled by this controller. Multiple controllers can be on a page and controllers can also be nested.


      <p>{{ message }}</p>

The double curly brackets tells AngularJS that inside is some AngularJS code to be evaluated. AngularJS will look inside the controller for how to evaluate message.

      <button ng-click="changeMessage()">Click ME!</button>

The ng-click attribute tells AngularJS what to do when when somebody clicks on this element, the function changeMessage() will be called.

    </div>
  </body>
</html>

More basic HTML. :)

JavaScript - App.js

Here is the App.js file that was called for in the HTML. As with the HTML, I’m going to assume you know basic JavaScript.

(function () {
'use strict';

We’re starting with a basic IIFE (immediately-invoked function expression).

angular.module('HelloWorldApp', [])

We start off declaring an AngularJS Module App. Here we declare the name of the App which matches the name of the App as part of the ng-app attribute. Very commonly developers will assign the angular.module to a variable.

With a variable being assigned the angular.module the controller and other portions don’t need to be chained on.

.controller('HelloWorldController', HelloWorldController);

Chained on we declare the controller HelloWorldController. In quotes we match the controller named in the ng-controller attribute back in the div element.

The second parameter is the name of the function that contains the controller. The function could be in this place, but calling a function, I think, looks better. especially when there many parts being chained together, such multiple controllers and filters.

HelloWorldController.$inject = ['$scope'];

Here we are inject dependencies directly into the AngularJS controller. Another please that these can be injected is in the array during the module creation earlier.

The dependencies should be in the same order as when used as parameters when defining the controller function.

function HelloWorldController($scope) {

Here is the start of the function for the controller. We are passing in the $scope. Every controller automatically gets a $scope from AngularJS. It’s how objects are passed from the HTML into the JavaScript and back.

  $scope.message = "Message Sent from the Controller!";

Here we are added a message variable to the $scope. Remember the {{ message }} back in the HTML? Here’s where the information comes from.

  $scope.changeMessage = function () {
    $scope.message = "You click IT!";
  };

This function is added to the $scope and it was called in the HTML on the ng-click attribute back in the HTML as part of the button element.

}

})();

And it’s the end of the IIFE (Immediately Invoked Function Expression). While the IIFE is not necessary, it does bundle the code into a function that keeps it off the global scope.

Resources

AngularJS Home Page is the official documentation for AngularJS.