Why AngularJS?

TODO: 

What is the use case for this technology from the developers point of view

What benefit does a developer get from using this technology

What pain were we trying to solve by adopting this technology

What are the strengths and weaknesses of this technology

• STRENGTHS
  • Two-way data binding
  • HTML Templates
  • Dependency Injection
  • Deep Linking
  • Directives!!!
  • Testable
  • Embeddable - you can attach the AngularJS application to a specific DOM element and not have to worry about nasty side effects outside of that element and into the rest of the page

What technologies complement this technology and can be used in tandem

Getting your development environment set up

TODO: add content here

Building

TODO: add content here

Testing

TODO: add content here

Best Practices

There are some great resources available on this topic already. Instead of duplicating all of them, here are some links to review.

• https://github.com/mgechev/angularjs-style-guide
• AngularJS Best Practices: I've Been Doing It Wrong! -- Part 1, Part 2, Part 3

However, it does makes sense reiterate some of the most relevant ideas as well as a few that apply to Pentaho-specific development.

• If you find yourself manipulating DOM in a controller, STOP!!! DOM manipulation should really only be done in Directives and possibly in Filters.
• Keep Filters lean and mean. They get executed many times and can become a performance issue.
• Use angular-supplied versions of common javascript/jquery methods/objects
  • $timeout instead of setTimeout
  • $window instead of window
  • $document instead of document
  • $http instead of $.ajax, or better yet use $resource
• Get to know the Angular API, don't rely on jQuery
  • angular.copy
  • angular.element
  • angular.equals
  • angular.extend
  • angular.forEach
  • angular.fromJson
  • angular.identity
  • angular.isArray
  • angular.isDate
  • angular.isDefined
  • angular.isElement
  • angular.isFunction
  • angular.isNumber
  • angular.isObject
  • angular.isString
  • angular.isUndefined
  • angular.lowercase
  • angular.noop
  • angular.toJson
  • angular.uppercase

• App Structure

  • Stick to the one file equals one AngularJS module principle. This will allow you to maintain relatively small, focused files and modules. Additionally you won't be concerned with the load order of those files. Also it will be possible to load individual modules under unit tests.

• Directives

  • While declaring an AngularJS directive, the naming convention followed is camelCase. For example, we would define the name of the directive as 'myDatePicker'. But when you actually use the directive in your HTML, it is the dash-separated version (my-date-picker).
  • To make your directives and attributes HTML5 compliant, you can prefix all AngularJS attributes with "data-" or "x-". That is, "x-ng-show" or "data-date-picker", and AngularJS will treat it just like you wrote it like a normal HTML element.

Plugging-In

TODO: add content here