Welcome - AngularJS

W I F I:
HootGuest
owlshoot

Best Practices

Or at least some good ideas

Start With the HTML

Code Assuming it will Magically work

<rating max="5" model="review.num_stars"></rating>

<span tooltip="{{tip_msg}}">something</span>

Stay Away From $broadcast and $on

At First

• Force you out of jQuery/Backbone habits of events and imperative programming
  
  
• Embrace data binding
  
  
• Lots of code examples out there which are way too complex
  
  
• This is all about a mind-set change. $broadcast

SEPARATE Your Pieces

Each Part does ONE THING well

• A lot of effort was put into un-spaghetti-coding web dev
  Do not undo that work
  
  
• Dependency Injection is your friend
  
  
• Lean on the side of more pieces injected together
  Rather then large bulky pieces doing many things
  
  
• Better for: testing, reuse, collaboration, bug reduction

Directives

• This is where DOM manipulation happens
  
• Think mini application

<slider ng-model="my_val"  max="20" min="0" step="2"></slider>

app.directive('slider', function() {
    return {
      scope: {
        ngModel: '=',
      },
      template:'<div></div>',
      link:function(scope,element,attrs){
        scope.$watch('ngModel', function(newVal ){
          element.slider("value", parseInt(newVal,10));
        });

        element.slider({ //create jQuery UI Slider
          min: parseInt(attrs.min,10),
          max: parseInt(attrs.max, 10),
          value: scope.ngModel,
          step: parseInt(attrs.step, 10)
        });
        
        //bind the slide function to update the ngModel
        element.bind( "slide",function( event, ui ) {
          scope.ngModel = ui.value;
          scope.$apply();
        });
      }
    };
});

Controllers

• DO NOT put DOM manipulation in here
  
  
• Make them really dumb
  
  
• Glue things together
  
  
• Pull in services and expose them via scope
  
  
• Fetch correct notifications to be displayed
  
• Delegate to service to mark notification as read
  

Services

• Physically mark notification as read
  
  
• This is where things actually happen, services are smart
  
  
• Work with the persistence layer
  
  
• If you are trying to call one controller from another . . .
  You are doing it wrong
  
• Put the shared code into a service
  
• Dependency Inject services for shared state
  

Scope

• Glue controller and view together
  
• Scope is NOT the model
  
• Has references to the model
  

• {{ model.thingy }} as an example of model on scope

• ng-model : should always have a dot "."
  

• <input ng-model="something.my_val">

• Actions etc. from controller may be directly on scope

• <button ng-click="my_action()">

• Read only in Template
  
• Write only in Controller
  

Structure - Group By Feature

This goes against Yeomen & Angular-Seed

Test From The Start

• Should go without saying
  
  
• It isn't too hard to setup
  
  
• Longer you go without testing, less likely to add it in after
  
  
• No tests means you don't really know how stable your application really is
  
  
• Testing is a core part of Angular, and should be embraced

$watch

• Gets called ALL THE TIME
  
  
• Probably the best way to make your app slow
  
  
• Do not create side-affects (don't change things)
• Make it really simple and fast
• Should always return same value, regardless of how many times it gets called
  

Put the model in one place

• Two Main Places To Put It  (+/- to each approach)
  

1. $rootScope.model
   
2. myModel.service.js (my preference)
   
   

MINIFICATION

• Don't develop with minified code
• Build process should switch between regular and min
• Grunt is one suggestion for dev/build tool
  
  
• Do not minify the angular code, you'll mess it up
• angular.min.js has been tuned, just concat or link it

Further Reading

• youtube.com/angularjs  :: Best Practice Video
  I borrowed a LOT from there
  
  
• www.egghead.io
  
  
• Development Guides (Angular Docs)
• Conceptual Overview
  
• Data Binding
• Dependency Injection
  

Thanks!