Angular / Breeze - camelCasing in model binding

Question

I am just starting to learn Angular, and have been working with John Papa's course on Pluralsight to try and get my head around it. I was having a problem binding some data to a page, and it turned out to be an incorrect casing.

I had:

 <small>{{s.timeslot.name}}</small> at <small>{{s.room.name}}</small>

when I should have had:

 <small>{{s.timeSlot.name}}</small> at <small>{{s.room.name}}</small>

That's fine, but I just can't understand why.

The data is returned from Web API with this method (note no camelcase on timeslots):

    [HttpGet]
    public object Lookups()
    {
        var rooms = _repository.Rooms;
        var tracks = _repository.Tracks;
        var timeslots = _repository.TimeSlots;
        return new { rooms, tracks, timeslots };
    }

An angular service called datacontext.js has the following object to map between (at least to my understanding) Web API names and Breeze entity names.

    var entityNames = {
        attendee: 'Person',
        person: 'Person',
        speaker: 'Person',
        session: 'Session',
        room: 'Room',
        track: 'Track',
        timeslot: 'TimeSlot'
    }

There are some further functions that involve caching data, and extending the model on the client, but nowhere is there a reference to timeSlot (with camelCase).

What is happening here, is a convention for HTML casing being enforced by Angular?

EDIT: Thanks to Ward for the answer. For anyone following the same course who has a similar question, breeze.NamingConvention.camelCase.setAsDefault() is called in entityManagerFactory.js.

Answer 1

The problem is a bit of "sloppiness" in the spelling of "TimeSlot" in various places.

Your binding to "s" is a binding to the Session type. The Session type itself dictates the spelling of any of its navigation properties. Everything else is irrelevant.

The metadata for Session is generated on the server based on the C# "Session" class. There you will find that the navigation property is spelled "TimeSlot".

Your client is using the Breeze NamingConvention.camelCase to translate between the preferred PascalCasing of C# and the preferend camelCasing in JavaScript apps. Therefore, on the Breeze client you should expect "TimeSlot" navigation property to become "timeSlot".

Entity names are not translated by the NamingConvention (at this time). The C# type, "TimeSlot" is also spelled "TimeSlot" for the JavaScript type.

Every other spelling everywhere else is irrelevant for this binding.

You may find the "Query result debugging" documentation topic helpful.