Intro

{
name: "Tom Acree",
occupation: "Software Engineer / Consultant",
company: "Transcordia LLC",
companyUrl: "www.transcordia.com",
Experience: ["JQuery", "Sencha/Ext-JS", "Dojo", "angular"]
}
I have been working with AngularJS on a project around 6 months

Goals

  • Better Understanding of how Models fit into the overall framework
  • Some best practices, or maybe gotchas
  • Making models richer

Defining the Model in Angular

Angular is an opinionated framework

...Except for the most part when it comes to models

$scope is NOT the model, it holds a reference to the model  

Models are data structures within the application and are applied to  $scope

 

The data received from an AJAX call is not always the model we want.      Models may need to be transformed

Models need business logic/behavior


Best Practices

Models should be managed, but not in controllers or directives


Where we've been:

Controllers with logic to manage the model, business rules, etc.

Where we want to go:

Slim controllers and richer models

What We're doing

Move management of Models into services


Model objects should be what you bind to

...not properties of a model

Misko Hevery: "...bindings should have a dot..."


Do This: {{movie.title}}

Not This: {{title}}


See the following explanation

Nested Scopes in AngularJS



My Goals in Working with Models

  • Works with REST api.  This is my focus today.
  • Models can be enhanced with behavior
  • Support for nested objects
  • Support sparse vs detailed versions of a model
  • Caching
    • Where possible, avoid trips to the server
  • Traversable Relationships such as parent/child

Managing logic-Behavior in Models

Move logic to a service

 angular.module('ngColApp')
    .factory('movieUtils', function () {
        return {
            calculuateProfit: function (movie) {
                // do calculation
            },

            getLengthInHours: function (movie) {
                // do calculation
            }
        };
    });

  • Service uses data as parameter
  • Functional approach, no prototypes, base classes, ...
  • Testable and mockable
  • Gets unwieldy
  • I'd prefer methods on my entities themselves

Encapsulate logic within a mixin or function definition and apply a transformer

  • Logic is in the Model itself
  • Easily testable
  • Easy to implement
  • Uses classes and prototypes 


Interesting approach at odetocode

This was what I wanted, what else is there?

Existing Frameworks

  • Restangular
  • BreezeJS
  • ngActiveResource
  • angular-data
  • others...?

Restangular

https://github.com/mgonto/restangular

See the  presentation

First discovered in "ng-book"

Proposed as alternative to $Resource

Full Featured
Easy to use
Has much of what I hoped for

Angular Data

http://angular-data.pseudobry.com/


Looks Promising

Not Yet Released

Powerful cache support

BreezeJs

http://www.breezejs.com/documentation/breeze-angular-service


Now with built in support for angular

Large Community it seems

Fully featured, maybe more than I need?

Worth trying out

ngActiveResource

https://github.com/FacultyCreative/ngActiveResource


Full featured implementation of Active Record style models

Had traction, good start on egghead.io

Not overly active, but that changes

Very opinionated design

So then I found this...

Ben Teese





The approach

Uses Restangular

Leverages Mixins over Prototypes

SIMPLE!!!

Not too intrusive as long as you are ok with Restangular

See Example

Restangular in Brief

 function restangularShow() {
    // First way of creating a Restangular object. Just saying the base URL
    var baseAccounts = Restangular.all('accounts');

    // This will query /accounts and return a promise.
    baseAccounts.getList().then(function (accounts) {
        $scope.allAccounts = accounts;
    });

    // Just ONE GET to /accounts/123/buildings/456
    Restangular.one('accounts', 123).one('buildings', 456).get();
    
    var newAccount = {name: "Bob"};

    // POST /accounts
    baseAccounts.post(newAccount);

    // Second way of creating Restangular object. URL and ID :)
    var account = Restangular.one("accounts", 123);

    // GET /accounts/123?single=true
    account = account.get({single: true});
}


Models in AngularJS

By Tom Acree

Made with Slides.com

Models in AngularJS

Columbus AngularJS meetup presentation on handling models in AngularJS. Presentation provides discussion points on some of the current methods in managing models being done and provides relevant links to this work.

  • 1,057

More from Tom Acree