DEV Community

Cover image for AngularJS Recap in 2 Minutes
Steffen Pedersen
Steffen Pedersen

Posted on

AngularJS Recap in 2 Minutes

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

I have a few years back worked on projects build 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 a 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>
Enter fullscreen mode Exit fullscreen mode

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', []);
Enter fullscreen mode Exit fullscreen mode
<div ng-app="myApp">
    ...
</div>
Enter fullscreen mode Exit fullscreen mode

Controllers

This is here all the business logic behind views are 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';
}]);
Enter fullscreen mode Exit fullscreen mode
<div ng-controller="WingardiumController">
    {{ spell }}
</div>
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (3)

Collapse
 
bradtaniguchi profile image
Brad

I see this article missing two things:

  1. Dependency Injection - DI is one of the core features of AngularJS.
  2. Angular(2+) - AngularJS is in LTS until 2021, so the framework is effectively a legacy framework. It's suggested to use Angular for future projects. 😄

Other than that nice quick article on the major features of good ol AngularJS :D

Collapse
 
steffenpedersen profile image
Steffen Pedersen

You're right! Thank you 😄

Collapse
 
smilydawra profile image
smilydawra

Quick summary! Nice one!