Monday, May 20, 2013

how to 'watch' values in directive link function

From Christian GROBMEIER
directives.directive('tabLoad', function() {      return {              link: function (scope, element, attrs) {                  attrs.$observe('tabLoad', function(val) {                      var data = angular.fromJson(val);                      console.log(data);                      console.log(data.test);                      // do something                  });              }          }  });

Sunday, March 17, 2013

Another jquery to angular link

http://blog.artlogic.com/2013/03/06/angularjs-for-jquery-developers/?utm_source=javascriptweekly&utm_medium=email

Excellent Angular Tutorials

These "Year of Moo" articles should be part of the Docs... Required Reading, if only for the excellent explanation of how to avoid digest collision by using $scope.$$phase...


Filters & some Useful Links


I noticed a neat trick in the comments for $filter, pointing out a more intuitive way to use a filter in your code than the example syntax where you import '$filter' into your directive, and then use:
newArray=$filter('orderBy')(myArray,'sortKey');


If you want to use a filter, you don't need to import the $filter service, just import the filter you want by appending 'filter' to the end of the filter you want. So if you have a filter called, "myAwesome", you would import "myAwesomeFilter"

Importing the date filter into your directive would look like this:
  .directive('myCurrentTime', function($timeout, dateFilter) {
and to use it inside of your directive you can now simply access the filter by name:
        element.text(dateFilter(new Date(), format))
See this fiddle for an example.

IN OTHER NEWS...

Also, check http://ngmodules.org/ for updates before writing your own widget.
...and, it turns out there is a Google Group dedicated to AngularUI, with a Bootstrap-UI specific sub-Group.

Wednesday, March 13, 2013

Stupid Angular Tricks

I expect there are probably a lot of widgets that are not clean enough to warrant the official Angular jsFiddle page, or
are too complex to be instructional, or
are to weird to be useful, and I thought they deserved a place.
 
In the spirit of learning, playing, and  David Letterman, let the Stupid Angular Tricks commence:

Brian Ford: Building Huge Angular Apps

http://briantford.com/blog/huuuuuge-angular-apps.html

$digest vs $apply

Use scope.$digest() on the directive's scope, which will only digest that specific scope, instead of $apply (which is global)

Saturday, March 9, 2013

Services and factories, oh my...

The docs are clear about the syntactical difference between, services and factories, and they are similar in that they allow you to abstract javascript functions into discrete testable units. 

In this jsfiddle, a service and a factory are used to output 'hello world'...  So are there specific cases where one would choose one over the other?

It appears the Factory returns a service function, but the factory itself only runs only once. A service runs each time it's called. So if you have some heavy data that you need to load, you can do it in a factory, before you return your service, and you don't have the performance hit every time you use it...

 

Sunday, March 3, 2013

controller

The controller should not contain any rendering information (DOM references or HTML fragments).

Wednesday, February 27, 2013

Initial reaction to element based directives and to root scoped examples

I don't like the idea of creating new 'E' element directives, simply because it makes it harder for a dev to later look at your code and know that your <custom-shit> tag is being manipulated from Angular. <div data-ng-custom-shit> seems a lot more self-explanatory.

Also, in a lot of examples, I'm seeing functions being defined in the root scope. This may be fine for a single page app, but if your code exists in a complex multi-page site, it would be cleaner to namespace functions like:

customNgNamespace = customNgNamespace || {};
customNgNamespace.customFunction = function(){/*...stuff...*/}

about 5 hours in...

I've been reading a lot about Angular and it's getting a lot of good press as a powerful MVC framework. I've done one project using Backbone.js, and another with Knockout, so I'm relatively comfortable with JavaScript development, and the high-level MVC concepts involved. That said, it's disheartening to come across beginner posts that warn you about the state of the documentation.  Luckily, the Angular Google-group seem to be a good source of information and advice.

My company is switching to an Angular model from a jQuery paradigm, so I've got a lot of learning to do in a short time, and Angular is proving to have a bit of a learning curve.  The following is a reference collection of tips and notes that didn't at first seem obvious. The advice I've gotten from devs coming from jQuery background is to (at first) omit jQuery from your development process. It competes with the flexibility of the Angular paradigm, and will cause testing headaches later.