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
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
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
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!
- This is probably the biggest feature added
- Use 1.2 as they've rewritten it from 1.1.5
- Could give whole presentation on this...
- Using CSS Transitions and class manipulation
- yearofmoo.com (Remastered Animation in AngularJS 1.2)
- egghead.io/search?q=animation
- Lots of good stuff out there
.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
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
- 3,146