Monday, 25 June 2012

Thursday, 14 June 2012

Better Web Templating with AngularJS 1.0

on   with No comments

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. 
Share:

DoubleClick super-powered by AngularJS

on   in   with No comments
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...
Share:

Tuesday, 12 June 2012

Sunday, 10 June 2012

AngularJS 1.0.0rc11 promise-resolution released!

on   in   with No comments
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:
Share: