Developer Diary - AngularJS: Writing Directives

Continuing the AngularJS research, I have written a summary of this video on Writing Directives:
http://www.youtube.com/watch?v=WqmeI5fZcho

Compile vs Link Functions

• The compile function:
  • has no access to the scope
  • called once only
  • accesses the template and modifies it
  • contains common elements that is in all instances
• The link function:
  • has access to the scope
  • called per instance
    • i.e. n times for a n-object repeater
  • links template instances to the scope
• An object orientated analogy is that:
  • compile works on the template "class"
  • link works on the template "object" (instances)

Updating Angular

• When updating the scope outside of the Angular world, you need to inform Angular of the change (so that Angular updates the UI).
  • 1. $scope.$apply(function doStuff() {  
    2.     // do stuff that updates the scope  
    3.  });  
• Within the "doStuff" function, you can use parameters via $parse
  • 1. // parse returns a "class" which has functions to read/write to the given scope parameter.  
    2. $parse("paramterName")  
    3.     .assign(scope, value);  
• Outside the Angular world typically means calling jQuery, handling non-angular events, etc. from inside a directive.

Scopes

• Directives should ideally have isolated scopes for better encapsulation
• These scopes can also inherit and interact with a parent scope
  • This is achieved through using "@", "=" and "&" symbols....
    • Not 100% on how it works exactly, but found information on it here: http://docs.angularjs.org/guide/directive
    • '@' seems to copy the given value from parent scope
    • '=' forms a bi-directional relationship between the directive scope and parent scope
    • '&' is a bit of an enigma to me, I don't quite get it....
    • "provides a way to execute an expression in the context of the parent scope"???

Transclusion

• Transclusion can be used to nest directives/components
  • This could potentially be used to nest views
  • To do this, the transclude flag needs to be true
  • The position where the transcluded stuff is located is specified with the "ng-transclude" attribute.
• A transcluded component is given a specific scope
  • This scope is a sibling to the scope of the directive it is contained in.
    • This ensures the transcluded component's scope is enscapsulated away from the directive's scope and visa versa.
  • The transcluded component's scope and the directive's scope share the same parent.
    • Typically this parent is the controller's scope.

Developer Diary - AngularJS: Best Practices

Recently I have been exploring AngularJS as our new "weapon of choice" for UI development at work. Learning it can be difficult as the documentation is a bit dense. However I have found some awesome videos given by the makers on YouTube!

In these series of posts I will be giving my take on the videos and I welcome any feedback!

Summary of key points I found in this video on Best Practices:

http://www.youtube.com/watch?v=ZhfUv0spHCY

Application Structure

• Use a standard, it helps!
• Google recommend Yeoman
• This looks absolutely awesome but it doesn't work in Windows atm :(

Script Loading

• Asynchronous loaders cannot use ng-app attribute to initialise your application
  • use manual bootstrap method instead
• Require.js comes recommended for dependency management

Model

• When changing the model outside of Angular, use $apply function so Angular is notified and updates the UI

Deployment

• Minification may have limited benefit in Angular because files should already be small (in theory).
  • However minification may help, you need to measure and test this yourself.
• Similarly concatenation may have limited benefit (again measure and test across multiple browsers).
• Ensure the server is "gzip" enabled
• index.html file should be non-cacheable
• Cache by these by version (I don't really understand this...):
  • views
  • code
  • images
  • css

Separation of Concerns

• Controllers should focus on:
  • what HAPPENS when a user does something
  • where to GET data from
• Services should be:
  • Singleton
    • allowing for caching of data which is not destroyed between navigation
  • Hold logic required in multiple locations

Scope

• Views should treat scope as read-only
• Controllers should treat scope as write-only
• Scope != Model, scope just references your model.

Performance

• For optimum performance, ensure $watch getter function is:
  • Fast
  • Idempotent
  • Does not contain mutating logic
• The number of bindings per page also heavily affects the performance.
• Doing ng-hide doesn't actually remove the hidden component
  • This can lead to slow performance.
  • Use ng-include and ng-view instead
• Avoid having >100 items in a repeater
  • The performance may suffer
  • Also UX may suffer, humans aren't good at taking in that much information at once.
• Filters can be expensive
  • Recommended that an "intermediate model" is used instead.

Directives

• These maybe simplified in Angular 2.0
• For IE compatibility, the best form of directive to use is attribute.

Other Points

• {{ }} should be avoided on the index.html because it can cause "screen flash" as the binding is updated after angular is loaded
  • ng-bind should be used instead
• Angular 2.0 has some potentially interesting features:
  • Simplification of directives
  • Animations built in
  • Server-side pre-rendering of views