Stable vs Unstable

(AngularJS 1.0.x vs 1.2.x)




Cobbled Together By:
Owen Mead-Robins
owenmead@gmail.com

how unstable are we talking about?

Angular team thinks you could automated tests
your way to world peace

Very unlikely you'll find major bugs or breaking in 1.2


Key difference 

The 1.2.x parts of the API will change
without notice or appology

disclaimer!

Angular community has been very busy
There are lots of changes in there

I just went through the ChangeLog
(after some drinks)
Looking for things that I thought were:
Interesting, Note worthy, Probably Affect Most People

Not a bad idea to scan the doc yourself

Basically...
If I missed something important to you or your projects, sorry

Some Overall Stuff

  • Making things more robust

  • Batarang got a handful of improvements

  • $compile - whole bunch of work done here

Animations!

.repeat-item.ng-enter,
.repeat-item.ng-leave {
  transition:0.5s linear all;
}

.repeat-item.ng-enter,
.repeat-item.ng-leave.ng-leave-active {
  opacity:0;
}
.repeat-item.ng-leave,
.repeat-item.ng-enter.ng-enter-active {
  opacity:1;
}
<div ng-init="items=['a','b','c','d','e','x']">
  <input placeholder="filter" ng-model="f" />
  <div ng-repeat="item in items | filter:f" class="repeat-item">
    {{item}}
  </div>
</div>

  • Could also use Keyframe CSS
  • JS custom animations using $animate, 
    or use something like Greensock

Errors improved

  • Link in the JS console to tell you what the heck is going on
http://errors.angularjs.org/1.2.0-rc.2/$compile/iscp?p0=myDirective&p1=operation&p2=%25
  • Ties into the documentation
  • Still a bit cryptic at times, but a very solid step
    in the right direction

ng-repeat

  • Split definition
    • No longer have to be tied to a single DOM element
    • Which means you can now do stuff like this:
      <dl>
        <dt ng-repeat-start="item in items">{{item.header}}</dt>
        <dd ng-repeat-end>{{item.detail}}</dd>
      </dl>

  • $even and $odd added to each $scope

    New Directives

    • ngIf
      • Changes the DOM, instead of show/hide which uses CSS
      • Way better for performance, especially with a lot of dom elements

    • ngFocus / ngBlur

    • ngKeypress / ngKeyup / ngKeydown

    • ngSrcset
      • Can use angular expressions in place of src="" attributes

    ng-Touch

    (FORMLY NG-MOBILE)

    • Added swipeleft and swiperight events. $swipe service too

    • Fixed some issues with ngClick and soft keyboards

    • ngClick adds class when element held down via tap

    • Still outside of core, so need to include it

    Dynamic Template

    • You can use a function for a dynamic template creation

    • Could have some real fun ( pain ) with this one

    promise ($q)

    • Has a .catch() and .finally() shorthand

    • Reads like a traditional try/catch

    • Allows for much nicer graceful recoveries

    select

    • Binding to ngMultiple removed
      (Apparently it never really worked anyway)

    • Can use "track by" to make working with objects easier
     <select ng-options="obj as obj.name for obj in objects track by obj.id">

    ngmock

    • Can now pass an object instead of a full blown module

    • Sounds small, but will make testing faster and easier

    $http

    • Can now abort a request after specified timeout (JSONP too)

    • No longer encoding special characters "$@,:"

    • Support for request/response promise chaining

    $resource

    • Now a $promise attribute instead of the confusing $then
    Before & After:
    Resource.query().$then(callback);
    Resource.query().$promise.then(callback);

    • Instances now return the promise rather then the instance
    Before & After:
    resource.$save().chaining = true;
    resource.$save();
    resource.chaining = true;

    • URL can now be overridden for specific actions

    $route

    • Separate file as no longer part of "core"

    • Wildcard parameter changed
      • Before  *wildcard       After :highlight*
    • caseInsensitiveMatch  now supported

    • nextRoute.$route  property is gone. Use nextRoute object itself

    • Can use functions as template param in "when"

    Grab Bag of Changes

    • jqLite attributes working with SVG

    • $parse no longer auto unwrap promises

    • $controller can now be aliased ng-controller="MyController as my"

    • ngForm
      • Supports namespaces
      • Ability to reset a form to pristine state



    Thanks!


    owenmead@gmail.com

    AngularJS 1.0.x vs 1.2x

    By owenmead

    AngularJS 1.0.x vs 1.2x

    A quick presentation covering some of the changes from AngularJS 1.0.x to 1.2.x

    • 817

    More from owenmead