Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Ryan Hellerud
Ryan Hellerud
3,635 Points

odd syntax question angular.js/javascript

so i've come across a wierd angular.js syntax with a '.' before a keyword such as when and otherwise and have seen this before but not sure what it means:

$routeProvider
    .when('/', { controller: 'CustomersController', templateUrl: './templates/customers.html' })
    .when('/customer/:id', { controller: 'CustomerController', templateUrl: './templates/customer.html' })
    .otherwise({ redirect: '/' });
});

can anyone else explain this wierd '.' that I've seen before in some javascript and angular.js

3 Answers

Chris Shaw
Chris Shaw
26,650 Points

Hi Ryan,

This syntax is perfectly valid and is quite common in JavaScript since we've been using it everywhere and not just in AngularJS, in the above code all that's happening is $routeProvider is returning a new object with methods assigned to it in which we're calling using when and otherwise.

See the below example which works the same way only at the end I'm returning a properties value instead of calling another method.

function Test() {
    this.something = 'test';
}

Test.prototype.somethingElse = function() {
    return this;
};

Test.prototype.useless = function() {
    return this;
};

var test = new Test();
alert(test.somethingElse().useless().something);

So again, all I'm doing is chaining methods together by returning the instance of the object via this in the methods allowing me to request the property something because I returned the instance of the object in both somethingElse and useless.

If I didn't return this in the methods I would have got an error similar to the below.

Cannot read property 'something' of undefined

What this is saying is that because we didn't return this we now no longer have access to the object's instance which in-turn kills the chaining we had earlier, however. In AngularJS it's recommend you follow this chaining technique which they do by using an object called a Promise, what a promise allows you to do is execute code asynchronously avoiding un-needed slow downs which can be a big problem if you have a lot of JavaScript running on your page which when using AngularJS will be the case.

Hopefully that didn't zip over your head too much.

Ryan Hellerud
Ryan Hellerud
3,635 Points

i think my question was because i saw the .when on a seperate line and sometimes it looks like it starts there but its actually just a connection with the previous line i guess. I think that is what threw me off, thanks for the great response.

Chris Shaw
Chris Shaw
26,650 Points

No worries, and just to clarify you can do this with any object in JavaScript.

Ryan Hellerud
Ryan Hellerud
3,635 Points

so are you saying you can just have spaces between the function() and the .method? Or is that just subsequent formatting of the text display?

Chris Shaw
Chris Shaw
26,650 Points

Yes, so in the case of my first example you can also do the following and the browser will parse it correctly.

var something = test
  .somethingElse()
  .useless()
  .something;

alert(something);

This will work the same way as chaining everything on one line.

Ryan Hellerud
Ryan Hellerud
3,635 Points

dude you rock! THanks for the clarification maybe you can take a look at my other post trying to get angular js to work with zurb foundation reveal modal box. https://teamtreehouse.com/forum/angularjs-with-zurb-foundation-reveal-modal