4

I try to understand the examples on angularjs.org. For example the following code snippet. How does this .value and .factory and .config work?

angular.module('project', ['ngRoute', 'firebase'])

.value('fbURL', 'https://angularjs-projects.firebaseio.com/')

.factory('Projects', function($firebase, fbURL) {
  return $firebase(new Firebase(fbURL)).$asArray();
})

.config(function($routeProvider) {
  ...

EDIT:

My point of not understanding the code above is the blank line after the first line and the line starting with a dot.

hol
  • 8,255
  • 5
  • 33
  • 59
  • 2
    It's simply one expression on multiple lines. Maybe it's easier to read for you if you put the `.value(` immediately after `'firebase'])`. – RemcoGerlich Dec 21 '14 at 20:38
  • Its not clear to me what you're asking for. Maybe you're wondering why this code snippet is written "chained" or "fluent". This is just because each method returns the object its being invoked on - which is finally just `angular`. This is just a form of convenience: a developer does not need to repeat the object a method is called on. – try-catch-finally Dec 21 '14 at 20:42
  • I just made a edit. It is very hard to express a question about something which you are confused. The latest edit makes the question clearer. – hol Dec 21 '14 at 20:45
  • It has nothing to do with dot notation - the only question is about how JS treats a line when it starts with a dot. I'll edit it, then reopen; as you might have already seen, the given answers are NOT about this - and for me, that's a sign something went wrong with the original post. – raina77ow Dec 21 '14 at 20:45
  • 2
    To answer your updated question: javascript ignores the line breaks and the spacing. It simply reads it as .module().value().factory.config(), but it is formatted in a human readable manner. – Jesse Kernaghan Dec 21 '14 at 20:46
  • @JesseKernaghan: Your answer is very clear. Why don't you give that as an official answer I would immediately accept it because it caused an immediate "ahhh that easy, now I got it". – hol Dec 21 '14 at 20:52

5 Answers5

12

As standard dictates, unless there's a reason for ASI (like using postfix op, return, continue, throw or break statements), line terminators that separate language tokens are treated by JS as any other whitespace - that is, ignored. So these lines...

angular.module(arg1, arg2)
.value(arg3)
.controller(arg4)
.filter(arg5)

... are treated essentially the same as ...

angular.module(arg1, arg2).value(arg3).controller(arg4).filter(arg5)

So it's all about readability.

raina77ow
  • 103,633
  • 15
  • 192
  • 229
  • Thank you for making the thorough answer with reference to the official documentation. I must be fair to grant you the accepted answer because you clearly gave the best answer. – hol Dec 21 '14 at 21:02
3

A function in javascript can return an object that you can call a function on as well. Basically you can chain function calls. This is the same thing as, for instance, jQuery does. Let's say you have an object that has the following methods:

setFirstValue()
setSecondValue()

If you return the same object from within those methods (eg.) :

function setFirstValue() { do something here; return this; }

You can now chain these methods together:

object.setFirstValue().setSecondValue()

So .. as you can see .. the dot actually operates on the result of the previous operation - it's as simple as that.

Marius
  • 3,976
  • 5
  • 37
  • 52
2

This is the same as:

var app = angular.module('project', ['ngRoute', 'firebase'])

app.value('fbURL', 'https://angularjs-projects.firebaseio.com/')

app.factory('Projects', function($firebase, fbURL) {
  return $firebase(new Firebase(fbURL)).$asArray();
})

app.config(function($routeProvider) {
  ...

The angular.module call returns an object, and the dot notation references the previous object returned.

Hopefully that helps you understand how the referencing of objects works in the way you've set it up.

rageandqq
  • 2,221
  • 18
  • 24
1

To answer your updated question:

Javascript ignores the line breaks and the spacing. It simply reads it as .module().value().factory.config(), but it is formatted in a human readable manner.

Jesse Kernaghan
  • 4,544
  • 2
  • 18
  • 25
0

. operates on the result of the preceding expression. For example, angular.module('project', ['ngRoute', 'firebase']) returns a module object, which you can call .value on.

aknuds1
  • 65,625
  • 67
  • 195
  • 317
  • There is no limit on how basic a question may be on stackoverflow but there is a rule about friendliness. I edited the question since your answer, you may want to revise your answer. – hol Dec 22 '14 at 07:36