AngularJS Meetup - May 2012

Last week we kicked off our effort to regularly meet AngularJS developers by hosting meetups in Mountain View and New York City.

Both meetups were well attended and we enjoyed meeting you all. You can check out the video recording from the event:

Event links:

• Event Meetup.com Page
• Slides
• Tutorial
• CI Server Overview
• Memory Game demo (source)
• Testacular
• JsTestDriver
• wReader demo (source)
• Colingo demo
• Event Photos

Now the good news: The next Bay Area meetup will happen on June 12! We hope to see you there. For more details please visit the event page and reserve your spot.

AngularJS 1.0.0rc10 tesseract-giftwrapping released!

As we inch toward 1.0 we are doing some of the last API cleanups in this release. The breaking changes should be trivial to correct in your code bases, please check out the notes below for more info.

Changes

Features

• $timeout: add $timeout service that supersedes $defer (4511d39c, #704, #532)
• scope: add event.preventDefault() and event.defaultPrevented (84542d24)

Bug Fixes

• ngRepeat: expose $first, $middle and $last instead of $position (1d388676, #912)
• jqLite: use the same expando store structure as jQuery (acf095d1)
• $rootScope: infinite digest exception does not clear $$phase (5989a1ed, #979)

Breaking Changes

• ngRepeat - $position is not exposed in repeater scopes any more
  To update, search for /\$position/ and replace it with one of $first, $middle or $last. (1d388676)
• scope event's cancel method was renamed to stopPropagation
  The name was corrected in order to align better with DOM terminology. To update, search for /\.\s*cancel\s*(/ and replace it with .stopPropagation( or .preventDefault( (or both) depending on what you actually need. (91db9920)

Deprecation Warnings

• $defer service has been deprecated in favor of $timeout service
  The $defer service will be removed before 1.0 final, so please migrate your code. (4511d39c)

Download

• http://code.angularjs.org/1.0.0rc10/angular-1.0.0rc10.tgz
• http://code.angularjs.org/angular-1.0.0rc10.js
• http://code.angularjs.org/angular-1.0.0rc10.min.js

Links

• angular-seed
• JsFiddle
• Complete Changelog

Custom Components: Part 2

This video expands on "Part 1" of the component video tutorial by adding the ability to toggle between an "edit mode" and a "preview mode" in your Markdown component.

Key Takeaways

• How to use "transclusion"
• When to use a "link function" and when to use a "compile function"
• How to access elements inside of your component
• The importance of isolate scope
• Why you should always use a namespace with your components

AngularJS 1.0.0rc9 eggplant-teleportation Released!

Another week and another release! This time we have several bugfixes to share.

Changes

Bug Fixes

• $location:
• single quote in url causes infinite digest in FF (679cb8a7, #920)
• support urls with any protocol (c1533ef5)
• don't use buggy history.pushState api on Android < 4 (7b739c97, #904)
• work around Opera's base href issue (b99f65f6, #938)
• docs app:  get docs app to work on IE8 (aa025348)

Download

• http://code.angularjs.org/1.0.0rc9/angular-1.0.0rc9.tgz
• http://code.angularjs.org/angular-1.0.0rc9.js
• http://code.angularjs.org/angular-1.0.0rc9.min.js

Links

• angular-seed
• JsFiddle
• Complete Changelog

Custom Components: Part 1

Custom Components: Part 1

In this video, John Lindquist walks through adding new tags to the browser using an AngularJS directive.  Here, he uses the Showdown.js library to create a <markdown> tag that lets you write Markdown instead of HTML.

Key Takeaways

• AngularJS directives transform HTML as you direct.
• You can use directives to define your own elements, attributes, classes, or comment types.
• Using the directive's linking function is one method that lets you specify the replacement content.
• AngularJS plays very well with other libraries.

Source (edit on JSFiddle)

html

<div ng-app="myApp">
    ​<markdown>
# Hello World!
- Zeppelin
- That guy
- Kronos
    </markdown>
</div>​​​​​​​​​​​​​​​​​

services.js

angular.module('myApp', []).directive('markdown', function() {
    var converter = new Showdown.converter();
 ​   return {
        restrict: 'E',
        link: function(scope, element, attrs) {
            var htmlText = converter.makeHtml(element.text());
            element.html(htmlText);
        }
    }
});