Before AngularJS became popular, jQuery was the core library which was used to develop web apps and to dynamically interact with the HTML DOMs. Using jQuery is referred to as imperative programming, meaning your code specifies not just what you want to happen, but how you want it to happen as well. As a result, you would end up with many internals to make the code work properly, most likely ending up in a massive collection of code snippets and losing the overview of how it all connects to each other. With imperative programming, you might end up having a lot of behaviors and animations that are wired up behind the scenes, which are not apparent when looking at the code.
The solution to this problem is to start using declarative programming, which only specifies what you want to happen, and leave the how it will happen to AngularJS, the framework of our choice. By declaring the UI and placing the markup directly in HTML, you maintain the logic for the presentation in one place and you separate it from the rest. Once you also understand AngularJS's extended markup, it's clear how and where data is bound and it becomes easy to manipulate the UI.
A simple case of a Vanilla web application based on AngularJS can be seen as follows:
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="MasteringQS">
<div ng-controller="myCtrl">
<button ng-click="myFunc()">OK</button>
<p>The button has been clicked {{count}} times.</p>
</div>
<script>
angular.module('MasteringQS', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.count = 0;
$scope.myFunc = function() {
$scope.count++;
};
}]);
</script>
</body>
</html>
When read by the browser, the code then creates a button on the .html page which, when pressed, increments the numbers of clicks dynamically, as the following screenshot shows:
To elaborate on the code, as a starter, the AngularJS library is being loaded (in Qlik Sense, this is done by default). What can then be identified are the various ng-, which stands for Angular, attributes which extend the classic way of writing HTML with declarative AngularJS code, called directives. There are several built-in ng-directives available in the library, but you can also write your own ones.
ng-app is one of the built-in directives and initializes an AngularJS application, in this instance called MasteringQS. As we are passing data from a function to the HTML DOM, a controller is required, called myCtrl in this instance, which holds the code logic and controls the data in the app. To run the code controller, an ng-click directive is added to the button on the page which executes the myFunc() function to increment the counter. But when the counter is incremented on-click, how does the resulting value appear on the HTML DOM as per the screenshot? That's where the two-way data binding magic comes into play. The resulting counter value is stored in the $scope, which is the binding part of the controller and the view. Object values and attributes can be passed vice versa using the $scope: to embed values and expressions into the DOMs on the view, double curly braces are utilized {{}}. So, in the example, once $scope.count is updated, it's automatically evaluated in the view within the paragraph where {{count}} is positioned. Simple as ABC!
Following the preceding quick crash course on how all those AngularJS components come together, it is now a good point to go into the detail in each one of them to provide a better understanding of what they are and how they can be used.