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 PageSlidesTutorialCI Server...
Wednesday, 23 May 2012
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 FixesngRepeat: expose...
Tuesday, 15 May 2012
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 TakeawaysHow to use "transclusion"When to use a "link function" and when to use a "compile function"How to access elements inside of your componentThe importance of isolate scopeWhy you should always use a namespace with your c...
Monday, 14 May 2012
AngularJS 1.0.0rc9 eggplant-teleportation Released!
Another week and another release! This time we have several bugfixes to share.ChangesBug 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)...
Friday, 11 May 2012
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>
<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);
}
}
});
var converter = new Showdown.converter();
return {
restrict: 'E',
link: function(scope, element, attrs) {
var htmlText = converter.makeHtml(element.text());
element.html(htmlText);
}
}
});