Dmitry Dmitry - 4 months ago 6x
AngularJS Question

Strange AngularJS beginner behavior

I am starting learning AngularJS but I've stumbled across a strange behavior I can't quite understand where the (() => {}) notation is not equivalent to (function(){}).

My index.html:

<!DOCTYPE html>
<html ng-app="gemStore">
<title>AngularJS Store</title>
<script src="./angular.min.js"></script>
<script src="./app.js"></script>
<div ng-controller="StoreController as store">

My app.js (closure stripped for debugging).

var app = angular.module('gemStore', []);

app.controller("StoreController", function() {
this.product = gem;

var gem = {
name: 'Dodecahedron',
price: 2.95,
description: '. . .'

In app.js, if I change

app.controller("StoreController", function() {
this.product = gem;


app.controller("StoreController", () => {
this.product = gem;

My page no longer displays the gem information(just blanks and the dollar sign remain).

Can somebody explain why this happens?

AngularJS version: v1.5.6

Opera version: 37.0.2178.54


You shouldn't use arrow functions if you need this context.

Read more here(13.2):