AngularJs Upgrading Notes

This is the most concise list of things you must know in order to upgrade your app to AngularJs v1.0 (subject to change). Read this list and upgrading should be as painless and easy as possible. REMEMBER: You should still refer to the docs for new syntax changes.

SUPA SIMPO UPGRADE TUTORIAL:

  • The accepted convention is now ng-whatever instead of ng:whatever
  • Widgets have been dropped and folded into directives.
  • Directives provide way more control and optional complexity if necessary.
    • You can now set an execution priority over other directives on the same element
    • You can now store a template inline or use a partial, both of which are automatically compiled
    • You can now extend an existing directive's "controller" (read the docs, I'm still figuring this one out)
    • ng-transpose lets you relocate and output the original element's innerHtml to a new location in the template which will continue compiling normally*
  • ng:autobind has been dropped in favor of modules
  • Your app must have a module now (read the docs)
    • Specify your module name in ng-app (usually goes on <html> tag).
    • Modules can include other modules.
    • Routes are done inside of modules
    • You can do app-wide crap from modules like .run(fn) which would hold init-code and .value() for globals or constants
    • Directives, services and filters are attached to modules now (read the docs)
    • Refer to angular-ui as a good example of how to structure your app (source code)
  • There is no html filter, it's now a ng-bind-html-unsafe="{expression}" directive
  • You probably want to output debugging variable through the {{myVar | json}} filter
  • $watch callback is now fn(newVal, oldVal) instead of fn(scope, newVal, oldVal)
  • this is no longer a reference to scope, it is now a $scope service that is passed instead.
  • Scopes still inherit, controllers do not. Consider using your module + $rootScope for global stuff.
  • ng-model now fires on blur, you're probably looking for ng-model-instant. Removed in RC5
  • $xhr is now $http and the syntax is slightly different

Comments

Add New Comment