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>
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>
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';
}]);
<div ng-controller="WingardiumController">
{{ spell }}
</div>
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)
I see this article missing two things:
Other than that nice quick article on the major features of good ol AngularJS :D
You're right! Thank you 😄
Quick summary! Nice one!