AngularJS Recap in 2 Minutes

2020

I recently got a new job 🎉 One of the first projects I am going to work on is built with AngularJS. I will for that reason look into the old framework.

I have a few years back worked on projects built with AngularJS. It is not completely new to me. I will try to keep this article really short and more like an overview of the main topics. If I miss an important topic, then please comment below.

2-Way Data Binding

2-Way data binding is the synchronization between the model and the view. When data in the model changes, the view reflects the change, and when data in the view changes, the model is updated as well.

<input type="text" ng-model="hey">
<span>{{ hey }}</span>

html

Directives

Directives are either an attribute ng- or a HTML tag <custom>, that tells the library to do something to a DOM element. Most of the directives in AngularJS are starting with ng- where ng stands for Angular.

Expressions

Here we can access variables and functions from the scope. This could be interpolation bindings like <span title="{{ header.title }}">{{ header.title }}</span>.

Modules

Modules are containers for the different parts of your app including controllers, services, filters and directives.

var myAppModule = angular.module('myApp', []);

<div ng-app="myApp">
    ...
</div>

html

Controllers

This is where all the business logic behind views is being defined. The $scope in this example is basically the binding between the controller and the view. The $scope is a dependency and we need to add it as an array ['$scope', ...]. It will work without adding '$scope' with an array [...], but it can fail while minifying the AngularJS code.

myApp.controller('WingardiumController', ['$scope', function($scope) {
    $scope.spell = 'Leviosa';
}]);

<div ng-controller="WingardiumController">
    {{ spell }}
</div>

html

I know there is a lot more to AngularJS, but this is just a briefing of some main topics. Did I miss something extremely important? Then please comment below.