Wednesday, November 28, 2012

AngularJS 1.0.3 bouncy-thunder and 1.1.1 pathological-kerning released!

What's new in these releases? A number of bugfixes, improvements to the docs, and a little refactoring to make debugging and profiling easier. In 1.1.1 pathological-kerning you'll find all the bug fixes from 1.0.3 bouncy-thunder, plus some new features to try out in your code. Most notably, in version 1.1.1 we've added the frequently requested FormController.$setpristine method, which resets a form's pristine state so that the form can be reused after submission.

For full details in both these releases, see the changelog.

Thanks to the community contributors responsible for many PRs in these releases: Josh Adams, Wes Alvaro, Godmar Back, Xiangru Chen, Dave Clayton, Jamison Dance, Tom Davis, Pedro Del Gallego, Zach Dexter, Haralan Dobrev, Benjamín Eidelman, Brian Ford, Iwein Fuld, Adrian Gheorghe, Uri Goldshtein, Kai Groner, Tom Hughes, John Hume, Iristyle, Kris Jenkins, Sudhir Jonathan, Rado Kirov, Pawel Kozlowski, Daniel Luz, Adam Macejak, Tim Macfarlane, Max Martinsson, Stein Jakob Nordbø, petrovalex, Gregory Pike, Fred Sauer, Shyam Seshadri, sgtpep, Braden Shepherdson, Dean Sofer, JP Sugarbroad, sqwishy trick, Jeremy Tymes, Anna Vester, Christian Vuerings, Kevin Western, Cameron Westland, Jonathan Zacsh, Jay Zeng, Zhenbo Zhang, Jimmy Zhuo.

In particular, thanks to Pawel Kozlowski and Peter Bacon Darwin for joining us as committers on AngularJS to help manage the pull requests for these and future releases.

Links

1.0.3 bouncy-thunder (stable branch)

1.1.1 pathological-kerning (unstable branch)

About those directives

Turns out we forgot to publish September's meetup videos from the Mountain View meetup.  Yikes!  Well, better late than never.

Actually, this is some of our best content to date.  For the first time, Miško Hevery demystifies AngularJS Directives.  If you've struggled with some of the concepts and reasons behind writing directives, this one is for you.

As a perfect follow-up, Vojta Jína gave a presentation on writing unit tests for directives and discusses techniques to make them run quickly.


For folks just starting out with Angular, Igor Minar walked folks through the basic features of Angular in writing the ubiquitous ToDo application.


At the end, Dean Sofer (aka ProLoser), presented JobVite - a cloud-based recruiting platform written in AngularJS.



Tuesday, November 27, 2012

AngularJS Example Applications


Folks often ask us where they can find source for apps that cover more techniques than the examples on angularjs.org or the tutorial.  If this is your question, then this post is for you!

FoodMe


As part of our tutorial session for Devoxx 2012, we built this simulated take-out food ordering application.

Project URL: https://github.com/IgorMinar/foodme
What you can learn:

  • Several examples of writing directives
  • Multiple views
  • Filtering and sorting lists
  • Using local storage
  • Setting up Testacular to continuously run unit tests

Angular Fun


This one is for you CoffeeScript fans out there.  Though it's a demo app, it has many of the features you'd want in a skeleton for many real apps you'd want to create.  Nice job, Cary Landholt! 

Project URL: https://github.com/CaryLandholt/AngularFun
Stable snapshot:  https://github.com/CaryLandholt/AngularFun/tags (v1.0.0.zip)
What you can learn:

  • Form validation
  • Writing filters
  • Handling server error codes
  • Retrieving data from web services Twitter and GitHub
  • Using Angular with NodeJS, CoffeeScript, RequireJS, Grunt, LESS and Jasmine

TextDrive



Want to build native-looking apps using Chrome?  TextDrive is a great place to start.  Vojta Jína (the author) and Brad Green (Angular eng manager) did a Hangout video with the Chrome Apps Office Hours on this.  For another take on the same application, you can also check out this post from Google Apps team and this Google Drive tutorial which walks through building an Angular app against the Drive APIs.

Project URL: https://github.com/GoogleChrome/textdrive-app
What you can learn:

  • Using Angular to create an app around a third-party editor view (ACE editor)
  • Structuring your app with thin controllers and rich services
  • Switching between Chrome storage and local storage as appropriate for persistence
  • Writing Chrome apps using Angular

wReader




If you're looking to build an app with high curb-appeal, look no further.  wReader is another Chrome platform app that looks and feels like native desktop apps.  It is hard-wired to browse the Google Chromium blog, but it could easily be repurposed as a skeleton for other uses. Try it live here.


Project URL: https://github.com/GoogleChrome/wReader-app
What you can learn:

  • Using directives to implement keyboard shortcuts
  • Observing and reacting to view scrolling
  • Using local storage

For more examples, please be certain to visit builtwith.angularjs.org.  You can search by the tag 'Open Source' to find more apps with source available.  And when your app is ready, please submit it for the world to see!

Monday, November 19, 2012

More AngularJS Meetup Videos

We have a few more meetup videos up on YouTube from October and November... and we welcomed a new Angular Meetup group in the Southern Hemisphere, in Sydney, Australia. You can learn more about the new Sydney group on http://www.meetup.com/AngularJS-Sydney/, or check out the video from their inaugural meetup below.

$provide Methods / Building Up with AngularJS

We had two talks for our Mountain View meetup in November: Wes Alvaro presented on service providers in AngularJS, followed by a short presentation from Greg Weber on design patterns for dealing with UI complexity.
We had some issues with the video quality on this one. Slides for both the talks are available online.


AngularJS + Yeoman

For October we got a first test run of livestreaming HD on our channel from the meetup in Mountain View, CA. We're still working out the details needed to do HD and livestreams on an ongoing basis, but do check out the video from October and let us know how you like it.
Brian Ford gave a talk on Yeoman's template generators for AngularJS, with demos to show you how to get started.

Sydney Meetup

At the very first ever Sydney AngularJS meetup, John Scott hosted the introductory presentation, and Daniel Nadasi showed on how his own team at Google uses AngularJS in a real application (the Google Places Bulk Location Management Tool).

Tuesday, September 11, 2012

AngularJS Meetup Videos from July and August

AngularJS meetups are becoming monthly ritual for many AngularJS developers as well as the core team. Meetups provide an opportunity for the community around AngularJS to get together in various cities and talk about Angular stuff. Starting next month we are going to attempt to stream these events live via Google Hangouts. We still have some technical challenges to solve (it's not as simple as it sounds), but we'd like to open up these meetups to as many of you as possible in real time. In the meantime if you couldn't join us in person, check out these videos.

Rebuilding DoubleClick with AngularJS

In August, we had a special guest at our Mountain View AngularJS meetup. Marc Jacobs, the tech lead of the DoubleClick Digital Marketing Manager (formerly DoubleClick for Advertisers) gave a presentation on how they rebuilt and launched their application with AngularJS.


More information about the event can be found on the meetup page.
The talk was also repeated at our NYC meetup.

Dependency Injection

In June we talked about what is Dependency Injection (DI), what benefits it gives to you and your app and how AngularJS implements Dependency Injection.




More information about the event can be found on the meetup page.
The talk was also presented at our Mountain View meetup.


As a good follow up reading, check out Miško's recent blog post on how DI removes the problems associated with the main() method.




Building an AngularJS App

Back in July at our NYC meetup, we had a presentation on building an app with AngularJS. The famous ToDo app, narrated for your pleasure, including lots of audience questions about some of the core concepts.


More information about the event can be found on the meetup page.

Monday, September 10, 2012

Yeoman and AngularJS

On his blog today, Addy Osmani announced the general availability of Yeoman, a project to help developers simplify the setup process for application development. Yeoman also includes an initial version of AngularJS-specific template generators.

Long ago, we developed angular-seed as our git-based answer to bootstrapping an AngularJS project with a predefined structure and a set of preconfigured development tools. Yeoman removes the git-dependency and adds a set of template generators and many features and tools impossible to achieve within the confines of a git repository.

Our own Brian Ford has been heavily involved in creating these AngularJS template generators, and has written a nice deep-dive blog post to describe how Yeoman and its generators work with AngularJS.

We'd love to hear what you think about the new workflows, to help us decide what needs to be improved in the Yeoman and AngularJS generators. Based on this feedback, we'll iterate quickly to make improvements with the eventual goal of making Yeoman a successor to angular-seed.

Wednesday, September 5, 2012

AngularJS 1.0.2 debilitating-awesomeness and 1.1.0 increase-gravatas released!

Today we are announcing two releases – stable 1.0.2 debilitating-awesomeness and unstable 1.1.0 increase-gravatas.

1.0.2 debilitating-awesomeness

Bug fix release containing these bug fixes:
  • $compile: denormalize directive templates (dfe99836)
  • $interpolate: $interpolateProvider.endSymbol() returns startSymbol (20348717)
  • jqLite: better support for xhtml (d3fa7a2e, #1301)
  • mocks: free up memory after every spec (1a8642aa)
  • e2e test runner: Adding meta tag to avoid cache issues (5318588d)
  • Directives:
    • form: prevent page reload when form destroyed (054d40f3, #1238)
    • ngList: remove data bound flicker (fa62ea81)
    • ngPluralize: fixes ng-pluralize when using non-standard start/end symbols (e85774f7, #1134)
    • option: support option elements in datalist (9767f7bd, #1165)
And a ton of documentation fixes: A big thank you to all the contributors!

Links

1.1.0 increase-gravatas

Contains all fixes from 1.0.2 and additionally:
  • $http: support custom reponseType (e0a54f6b, #1013)
  • $interpolate:
    • provide contextual error messages (d804bbcd)
    • expose start/end symbols in run phase (58f121a5)
  • $sniffer: auto detect CSP mode (currently requires Chrome on dev channel) (167aa0c2)

Links

Monday, August 27, 2012

Getting rid of the main()

Did you know that your JavaScript has a main() method? That’s right – the outermost scope of any script is the main method. It does not have an official method declaration but it is the same thing for all practical purposes.

<script>
  window.alert('Greetings from the main method.');
</script>


Ok, so JavaScript has a main method, just like most languages. But Misko, you ask, what is your point? My point is that you need a main method for assembling, initializing and starting your application, but it is causing you problems and you need to get rid of it.

The application assembly is something which grows organically on any project. Usually with lots of global state and singletons. No one really sits down and designs the main() method. It is an afterthought. On a large project the main() method becomes a pit where initialization happens, but no one knows why it happens in any particular order. Worse yet, everyone is afraid to change it, since it usually results in catastrophic failure.

But the main() method has one more property, and that is that it can not be prevented from running. This usually spells doom for testing your application, since loading the JavaScript into the test harness results in running application at best, and horrible exceptions at worse. Neither of which is helpful for writing unit tests.

AngularJS applications have no main methods. Or rather AngularJS main methods are empty of logic and behavior, they only contain code declaration. This means that AngularJS applications are more testable and do not have a Gordian Knot of dependencies in the main() method.

But that begs the question: How do AngularJS applications assemble themselves? The answer lies in a declarative approach to application assembly. Rather than having a main() method responsible for instantiating and assembling all of the components of the application, an AngularJS application components simply declare which other components they need. Dependency injection system can then instantiate any components and all of its dependencies on as needed basis. Let’s look at an example:

angular.app('example').
  service('wheels', Wheels).
  service('engine', Engine).
  service('car', Car);

function Wheels() {
  // do something
}

function Engine() {
  // do something
}

function Car(wheels, engine) {
  // Look, car automatically gets wheels and engine.
}


The last piece which is missing is knowing which component to instantiate first to get the application going. This component is usually a root controller, and AngularJS knows how to instantiate it because ng-controller directive triggers its instantiation like so:

<script>
  // $window is MyApplication controller dependency
  // Asking for $window in the constructor declares it as dependency 
  MyApplication = function($window) {
    $window.alert('hello world');
  }
</script>
<body ng-controller="MyApplication">
  <!-- Asking for MyApplication causes it to be instantiated with all of its dependencies --!>
</body>
Note: Alternatively $route service or a run block of a module can perform the same role.

The best part of this is that AngularJS applications are practically begging to be unit tested. Loading the JavaScript in the test harness just specifies the definitions of components, but it has no side effects. Instantiating any one component in a test is easy, one simply ask the dependency injection system for it. But the best part is that in unit-tests we can override the components and definitions and replace them with test friendlies making unit-testing AngularJS application a cinch.

Tuesday, August 14, 2012

Your excuse to buy a PlayStation

Today, Sony and YouTube announced the YouTube app for the PlayStation 3.  It's a beautiful, immersive experience designed for the PS3 platform.  And the amazing part is that it is built with AngularJS.


If you have a PS3, you can check it out in the PlayStation Store.  Otherwise, this is a perfect excuse to buy one and see what AngularJS is capable of.

We've invited the YouTube developers to present at a future AngularJS meetup and share their development experiences with you.  Until then, enjoy the app!

Thursday, July 26, 2012

AngularJS 1.0 -> 1.2 Roadmap

After the 1.0 launch a few weeks ago and bit of PR work AngularJS has been gaining more adoption than what we expected. Thank you everybody who took a look and recognized that we are onto something awesome. Many of you have asked about our plans post 1.0, and that's what I'd like to address by rolling out our roadmap for the next few months.

Versioning conventions

  • 1.0.x will receive only bug fixes backported from 1.1.x branch and will be supported until 1.2 is released
  • 1.1.x will receive features and bugfixes and might contain breaking changes in between minor releases
  • 1.2.x will become stable (a bugfix branch) based on the last 1.1.x release

Delivery date

We are targeting the release of 1.2.0 in early to mid September 2012.

Scope for 1.0.x (branch v1.0.x in git)

Low risk bug fixes and documentation fixes only. Release frequency 2-4 releases per month depending on the number of fixes. Issues currently tracked for 1.0.x train are listed in our issue tracker under the 1.0.x milestone.

Scope for 1.1.x (branch master in git)

All the development happens on the master branch with qualifying fixes being backported to the v1.0.x branch. Release frequency 4 releases per month. Before we get to implement any of the new features, there are 62 pull requests (most of them very recent) waiting for our review. So our number one priority right now is to clean up the pull request queue as well as our issue tracker. Once that is done, this is what remains:

Big Features:

  • Improve error messages and reduce payload size by introducing error rewriting #1041
  • Support for animations and transitions in ngRepeat, ngView and ngInclude
  • Support for comment-based ngRepeat

Small Features:

  • Name all anonymous $watch functions to improve debugability and tooling (Batarang) support
  • Ability to reset a form to pristine state
  • Add missing ngFocus and ngBlur event handlers
  • ng-controller=”Ctrl as c” syntax
  • angular-seed + tutorial updates (better structure, Testacular)

Major side projects

  • Object.observe() prototype (replace our dirty checking with O.o() )
  • Batarang - finish DI instrumentation and deploy the extension to Web Store
  • CI server - completely transition from JsTD to Testacular (requires implementing e2e testing proxy in Testacular)
  • Server-side pre-rendering prototype
  • Closure compiler advanced compilation prototype

Friday, July 20, 2012

AngularJS Now Hosted on Google CDN

As you probably already noticed, one of the core AngularJS values is simplicity. Simple is awesome, but simple and fast is doubly awesome and that's why we also value speed and performance.

Since early beginnings of the project, we strived to make bootstrapping of AngularJS apps as fast as possible and offered to host all of the AngularJS artifacts on our http://code.angularjs.org/ server which follows the best caching and compression practices. Our expertise and server is however no match to the speedy autobahn-like Google CDN (content delivery network).

Thanks to your adoption of AngularJS all over the world, we earned the privilege to be hosted on this state of the art infrastructure. And so I'm happy to share with you, that as of today you can start relying on Google CDN when deploying AngularJS apps.

In order for everyone to truly benefit from this, we need your help. While the CDN definitely speeds up the first download of angular.min.js file (you do use the minified file in production, right?!?). The biggest benefit the CDN will give us is providing the canonical URLs for all common AngularJS files, which are then served with far-future expiration headers and cached in browsers all over the world.

What this means is that if some app (for instance "Spiderman's Todo List") pulls angular.min.js version 1.0.1 from the Google CDN and another app (let's say "Batman's Recipe Book") by an unrelated developer pulls the file from the same url, both of these files will share this file once cached. So if a user uses both of these awesome apps, she will have to download the angular.min.js file only once.

Call to Action

If you run an AngularJS app in production, please instead of hosting the Angular files yourself, change your html file or script loader to use Google CDN urls.

We already approached Plunker and JsFiddle to do the same for their snippet templates. And will work with various teams at Google to use the Google CDN in their apps as well. And of course we are going to switch all *.angularjs.org apps to use the CDN as well.

Google CDN Info

The latest version (v1.0.1) of AngularJS is currently already deployed on the CDN and we'll be adding newer versions as we release them.

The URL for the main angular.min.js file is https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js

There are additional modules as well as non-minified versions (mainly for development and debugging with Plunker, JsFiddle and similar tools). To see the full list please check out the manifest file.

Tuesday, July 3, 2012

AngularJS Meetup June 2012 - Data-binding, HBO and Drag'n'Drop

The topics discussed at June's AngularJS meetups in Mountain View, NYC and Seattle included data-binding deep dive, how AngularJS is being used at HBO and why they picked it over Backbone.js and how Daniel Zen implemented drag'n'drop functionality in his AngularJS application.

Contents:
  • 3m15s: Data-binding in AngularJS (Igor Minar)
    slides, plunk demo
  • 1h00m35s: AngularJS chrome extension (Igor Minar)
    blog/screencast, project
  • 1h04m39s: AngularJS at HBO (Charles Fulnecky)
    (waiting for permission to publish slides, check back in a few days)
  • 1h29m43s: Drag-and-drop photo library with AngularJS (Dan Zen)
    example, code demo

In July, we'll discuss dependency injection in AngularJS and how we built TextDrive and wReader Chrome Platform apps for Google I/O using AngularJS. We'll leave a lot of time for free-form discussion about AngularJS. So come ready with questions, demos and apps to show off or ask about.

Also, for the first time, we'll do a meetup in San Francisco, in addition to all the other cities.

Join the local meetup groups to be notified of dates and locations:

PS: The recording with similar content (but different audience questions) will be available in our youtube feed in a few days.

Monday, July 2, 2012

Introducing the AngularJS Batarang

Batarang Photo Credits: doranwa

For the past month, we've been working on a Chrome extension to help debug AngularJS applications. Today, we're introducing the AngularJS Batarang (a superheroic tool that lives up to its name). This extension features tools to help find and address performance bottlenecks, and visualize and debug applications.

We are releasing this early version because we'd love to get your feedback. Let us know what you think and what we should add or improve in the AngularJS Google Group.

Also be aware that this extension is built on experimental Chrome APIs, which means that you'll need Chrome Canary to use it. Additionally we can't upload it to the Chrome Web Store until the experimental APIs are available in the Chrome stable. Yes, we are living on the bleeding edge of Chrome extension development, but that's only because we want to provide you with features that can't be implemented in current stable Chrome version. It's just a matter of time until the needed APIs are stable, and installing the extension will be much easier.

Check out how to get the extension, then watch the tutorial below to get started.

Monday, June 25, 2012

AngularJS 1.0.1 thorium-shielding released!

This is a small bug fix release to fix $location related bugs.

Bug Fixes

  • $location: don't throw exception while url rewriting if element was removed (3da4194f, #1058)
  • $location: prevent ie from getting into redirect loop (ffb27013, #1075, #1079, #1085)

Links

Thursday, June 14, 2012

Better Web Templating with AngularJS 1.0


Author Picture

By Miško Hevery, Google AngularJS team

AngularJS lets you write web applications as if you had a smarter browser.  It lets you extend HTML's syntax to express your application's components clearly and succinctly and lets use standard HTML as your template language.  And it automatically synchronizes data from your UI (view) with your JavaScript objects (model) through 2-way data binding.

Today we are announcing the 1.0 release of AngularJS.  We’d like to thank our early adopters, and we’re excited to share it with you who haven’t yet experienced it.

Our goal with AngularJS is to eliminate the guesswork in creating web app structure and take the pain and the boilerplate out of web client apps.  We think we’re there and we’d love for you to take a look.

AngularJS’s core features are:
  • Unobtrusive data binding. AngularJS automatically moves data from the UI to your model and back whenever either of them change.  There are no classes to inherit from, and no wrapper or getter/setter methods to call. Your model can be as simple as a as primitive, native array or as complex as you make it via your custom JavaScript type.
  • HTML as the template. You, your browser, your editors and your other tools already know all about working with HTML.  Why introduce something else?  AngularJS lets you expand HTML’s vocabulary with your own app-specific elements, attributes, and class-types that are fully compatible with the HTML specification.
  • Reusable components -- in HTML! AngularJS gives you the power to extend HTML’s syntax with your own elements, attributes that adds behavior or transforms the DOM.  Want to write<tab><calendar>, or <colorpicker> instead of <div><div><div>...?  Want to attach keyboard shortcuts to any element by adding an attribute like key=’ctrl-s’?  You miss the <blink> tag?  All these things and more are possible.
  • Views and Routes. AngularJS lets you switch sub-views in your app with a simple route configuration.  And you get URL deep-linking for free.
  • Tests and Testability. Shipping apps means testing them.  We provide common mocks, we take full advantage of dependency injection, and we encourage MVC structure making it easy to test behavior separate from view. It also comes with an end-to-end scenario runner which eliminates test flakiness by having the runner truly understand application state.
Come and check out our many examples, tutorials, videos and our API docs at angularjs.org.  And we’d love to hear your thoughts and questions on Google+ or on our mailing list.

Miško Hevery is a software engineer on the AngularJS team in Mountain View, CA.  Miško focuses on imagining a future where web development is actually simple. 

DoubleClick super-powered by AngularJS

When many of you learn about AngularJS and that it's being baked at Google, the first question that everyone has is: "Which products is Google developing with AngularJS?".  Our answer to this question has been, "It's killing us, but we can't tell you just yet.".

That changed last week when the revamp of the DoubleClick platform was announced last week!  That's right. The DoubleClick team chose AngularJS as their client-side technology for the massive rewrite of their entire stack.  The DoubleClick Digital Marketing Manager and other pieces of the platform are happily data-bound and dependency-injected with AngularJS.



The DoubleClick apps are by far the biggest AngularJS apps that we've seen in production and the input and feedback that the DoubleClick team has provided us over the past 1.5 years long journey has made Angular significantly better. Thank you guys!

PS: We plan to invite one of the DoubleClick engineers to join us for to one of our meetups to talk about  why they picked Angular and to describe their experience and lessons learned. Stay tuned...

Tuesday, June 12, 2012

AngularJS 1.0.0rc12 regression-extermination released!

This small release primarily fixes a regression that was introduced in 1.0.0rc11.

Bug Fixes

  • $location: correctly parse link urls in hashbang mode (74fa65ec, #1037)

Cleanup

  • $defer: remove deprecated $defer service (9af7a919)
  • docs: simplify api urls (f16150d5)

Links

Sunday, June 10, 2012

AngularJS 1.0.0rc11 promise-resolution released!

The last planned RC with all the promised changes is here!

Features

  • $route:
    • allow defining route async dependencies as promises and defer route change until all promises are resolved (885fb0dd)
    • rename template -> tempalteUrl and add support for inline templates (0a6e464a)
  • $compile: simplify isolate scope bindings and introduce true two-way data-binding between parent scope and isolate scope (c3a41ff9)
  • $injector: provide API for retrieving function annotations (4361efb0)
  • $location: add $locatonChange[start|success] event - since events are cancelable, it's now possible to cancel route and location changes. (92a2e180)
  • $rootElement: expose application root element as $rootElement service (85632cb4)

Bug Fixes

  • $compile: correctly merge class attr for replace directives (contributed by Max Martinsson, fb99b539, #1006)
  • $http: add utf-8 to default Content-Type header (post/put) (10f80d7d)
  • $timeout: allow calling $timeout.cancel() with undefined (contributed by Ali Mills, 1904596e)
  • jqLite: don't eat event exceptions (416a7830)

Breaking Changes

  • $beforeRouteChange and $routeChangeStart events were renamed to $afterRouteChange and $routeChangeSuccess
    This was done to make the naming consistent with $location events and also get events to categorize and order nicely just by alphabetical sorting.
    (7c242821)
  • template option in $route definition was renamed to templateUrl
    The template options in $route definition now represents the actual template string. To provide the template url use templateUrl option instead. This was done to unify the directive and $route definitions.
    To migrate just rename template to templateUrl. (0a6e464a)
  • isolate scope bindings definition has changed
    To migrate the code follow the example below:
    Before:
    scope: {
      myAttr: 'attribute',
      myBind: 'bind',
      myExpression: 'expression',
      myEval: 'evaluate',
      myAccessor: 'accessor'
    }
    
    After:
    scope: {
      myAttr: '@',
      myBind: '@',
      myExpression: '&',
      // myEval - usually not useful, but in cases where the expression is assignable, you can use '='
      myAccessor: '=' // in directive's template change myAccessor() to myAccessor
    }
    
  • the inject option for the directive controller injection was removed
    The removed inject wasn't generally useful for directives so there should be no code using it. (c3a41ff9)

Download

Links

Join our meetups

If you what to learn more about AngularJS and you are in one of San Francisco, Seattle or NYC areas then we invite you to join our meetups:

Wednesday, May 23, 2012

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:

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

Links

Tuesday, May 15, 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 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

Monday, May 14, 2012

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

Links

Friday, May 11, 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>​​​​​​​​​​​​​​​​

services.js

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