angularjs - How JavaScript treats lines starting with a dot? - Stack Overflow

admin管理员组

文章数量:1221352

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

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

.value('fbURL', '/')

.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.

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.

• javascript
• angularjs

Share Improve this question Follow edited Dec 21, 2014 at 20:53 hol asked Dec 21, 2014 at 20:29 holhol 8,42355 gold badges3535 silver badges6161 bronze badges 6

• 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 Commented Dec 21, 2014 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 Commented Dec 21, 2014 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 Commented Dec 21, 2014 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 Commented Dec 21, 2014 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 Commented Dec 21, 2014 at 20:46

 |  Show 1 more comment

5 Answers 5

Sorted by: Reset to default 13

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.

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.

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.

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.

. 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.

本文标签： angularjsHow JavaScript treats lines starting with a dotStack Overflow