
AngularJS 1.0 released - patrickaljord
http://googledevelopers.blogspot.com/2012/06/better-web-templating-with-angularjs-10.html
======
ConstantineXVI
This kind of reminds me of (my limited exposure to) XAML, in a good way.

Also interesting to note that this project seems thoroughly "de-Googled". Code
hosted on github under a non-Google name, site made with bootstrap and not on
a Google domain either.

~~~
grayrest
I talked with one of the devs at BackboneConf (Vojta) and this project started
as a 20% project that became fulltime for 3 devs. Apparently a team had been
working on an internal project for 3 months and there was a bet that it could
be rewritten in two weeks, which was won. Google uses it for a few internal
apps.

Of the KVO frameworks, I consider it closest to Ember in the focus on
bidirectional bindings for dom/model isolation. The most unique feature of
Angular is the change detection technique.

Most frameworks handle this via extension of a base object and using get/set
functions or ES5 accessors. Angular actually walks the entire model graph on
demand. This allows it to work with base JS objects (there's no special syntax
to learn) and third party libraries at the cost of having an O(n) operation in
the system. The assumption is that modern JS engines are fast enough to do 10s
of thousands of checks without a noticeable impact and your client side model
is most likely under this size.

~~~
ericclemmons
Interesting you mentioned Ember, which I'm a fan of as well as Angular, though
I've been using Angular almost exclusively for severa weeks.

One key difference for Angular is that your markup ends up pretty much exactly
how you want it. Ember had <script> tags littering my DOM for binding
purposes, which made progressively enhancing forms (and leaving the standard
submit event) require manual cleanup prior to letting the page change.

To Ember's credit, it is refreshingly opinionated, and solves the very
difficult problem of handling complex states and transitions to deep portions
of the app.

~~~
damncabbage
_Ember had <script> tags littering my DOM for binding purposes, which made
progressively enhancing forms (and leaving the standard submit event) require
manual cleanup prior to letting the page change._

I'm familiar with the <script> tags it dumps for binding, but I don't
understand why you needed to manually clean them up.

Could you elaborate a little, please?

------
doublerebel
Well, Spine has fat controllers, and AngularJS has fat views. Whether I bind
the data from the controller or the view it is the same amount of work. I
don't see the immediate advantage over other frameworks.

The "Reusable Components" section states "This lets you focus either on what
the application does or how the application looks separately." However,
directly below is a view (template) stuffed in a controller as a string.
AngularJS uses a "ng-" namespace for data whereas Knockout and others use the
HTML5 "data-" spec. These seem like a step backwards, and behind what is found
in Backbone, Spine, Ember, or Knockout.

Angular also includes its own forEach, JSON parsing, isArray, isElement,
isFunction, isObject, isUndefined, noop and Promises methods (and more!).
Other frameworks instead rely on existing, familiar libraries like jQuery or
Underscore. It even has its own Uppercase and Lowercase methods, despite
existing already in native JS. Even on the AngularJS website jQuery is
included, therefore many of these methods unnecessarily exist twice.

Rather than use the existing event bindings, Angular has recreated them all
with an "ng" prefix. Angular also has its own testing suite rather than
integrating one of the existing popular JS test frameworks like Jasmine.

Angular doesn't seem to have any serverside equivalent for its proprietary
design, so creating a fallback for less rich clients will be difficult.

I am striving to understand the distinct advantage of AngularJS, however
mostly what I see is just reinventing the wheel. With so many proprietary
methods, the learning curve is steeper than using a popular framework like
Spine which is already extensible with common modules. It is a good effort,
but against its comparables it has catching up to do.

~~~
jmadsen
"Angular also has its own testing suite rather than integrating one of the
existing popular JS test frameworks like Jasmine."

are you sure about that? pretty sure it uses Jasmine.

From the tutorial: "Angular developers prefer the syntax of Jasmine's
Behavior-driven Development (BDD) framework when writing tests. Although
Angular does not require you to use Jasmine, we wrote all of the tests in this
tutorial in Jasmine. "

~~~
doublerebel
There are very brief references to Jasmine in the Unit Testing[1] and Testing
Services[2] sections, however the complete (proprietary) E2E testing
documentation does not mention Jasmine at all.[3]

[1] <http://docs.angularjs.org/guide/dev_guide.unit-testing>

[2]
[http://docs.angularjs.org/guide/dev_guide.services.testing_s...](http://docs.angularjs.org/guide/dev_guide.services.testing_services)

[3] <http://docs.angularjs.org/guide/dev_guide.e2e-testing>

------
dannyr
The template tag conflicts with Django's. You can easily define a new
AngularJS tag like this: "(( ))" tag

var m = angular.module('myApp', []); m.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('(('); $interpolateProvider.endSymbol('))');
});

[http://stackoverflow.com/questions/8302928/angularjs-with-
dj...](http://stackoverflow.com/questions/8302928/angularjs-with-django-
conflicting-template-tags)

~~~
swaroop
Django 1.5 will include a verbatim template tag

[https://docs.djangoproject.com/en/dev/releases/1.5/#verbatim...](https://docs.djangoproject.com/en/dev/releases/1.5/#verbatim-
template-tag)

------
superasn
A little OT but I have often found that when watching hour long videos, esp.
conference videos it is best to play it at least 1.5X its original speed. For
some reason not only does it save your time but maybe because the video is
going faster I get less distracted and grasp more of it (maybe because your
thought train isn't interrupted by other thoughts at faster speeds). This is
also great for watching video tutorials by Linda, etc.

Youtube had this feature inbuilt too but seems they've discontinued it now.
There is an iOS app called Foxtube that thankfully has retained this feature.
Or you can just download it and play it in VLC. Thought I'd share this "hack"
since the Google video is 2 hrs long.

~~~
dpcx
On youtube, if you're part of the HTML5 experiment (check at
<http://www.youtube.com/html5>), you can put the following in your address
bar, to watch at a higher rate of speed:

    
    
      javascript:document.getElementsByTagName('video')[0].playbackRate = 2.0;
    

This will work even while the video is already playing.

~~~
andypants
I get a button on the video bar that lets me adjust the playback rate to
different speeds.

~~~
dpcx
That "only" lets you go to 2.0x. I've been listening to podcasts at 2.0x
recently, and wishing for 3.0x.

------
LaSombra
I don't understand this JS MVC thingy, what do they bring up to the table?

I read Backbone's documentation and to me is a mess of heavy JS programming to
achieve something that I don't know what it is.

EDIT: How does this mix with Ruby on Rails, Grails or even Java MVC
frameworks?

~~~
smokeyj
| I don't understand this JS MVC thingy, what do they bring up to the table?

What MVC brings to any table -- structure and maintainability. This is more
geared towards complete client-side applications than your typical jquery
plugin.

~~~
LaSombra
Would that mean that the backend would be only MC and the client side would be
the V using one of those?

Does this question make sense?

~~~
necubi
Backbone and its ilk are full MVC themselves. Typically, you'd have models on
the backend which are synced to the frontend via XHR/websockets/etc, so that
both sides have a representation. Backbone also has controllers (in the Cocoa
sense rather than the Rails sense), in the form of collections. Unlike Rails,
though, most of the functionality is going to be in your views and your
models.

------
tmcw
Google releasing open source code and not revealing if they've ever used it on
any of their sites (see 'built with angularjs
<http://builtwith.angularjs.org/> ) is somewhere between silly and suspicious.

~~~
dtf
They posted this about DoubleClick:

[http://blog.angularjs.org/2012/06/doubleclick-super-
powered-...](http://blog.angularjs.org/2012/06/doubleclick-super-powered-by-
angularjs.html)

~~~
kpozin
Does anyone know if the public-facing site is supposed to be using Angular?
There are no references to the library anywhere in the source of
<http://www.google.com/doubleclick/>.

~~~
IgorMinar
DoubleClick is a public facing app, but you need an account which you can get
only through a sales rep (I believe). The target audience are medium and large
advertising agencies and not individuals.

------
gbadman
You can play around with it on Plunker. Check out
<http://plunker.no.de/edit/JVl3Jx?live=preview> for an example.

I didn't write the example, but did make Plunker.

~~~
michaelmior
Only had a quick browse. Curious how Plunker compares to jsFiddle
(<http://jsfiddle.net/>)

~~~
superchink
There's a pretty good overview here: <http://plunker.no.de/>

~~~
michaelmior
Cool. Thanks :)

------
limanoit
This is indeed interesting! Any googler want to comment how is this different
from its cousin Google Closure Library? It looks like it is leaner and more
modern. Any other difference?

~~~
libria
Not a googler, but it has little in common with GCL's approach from what I've
seen. Angular and most of the MVC frameworks seem targeted at removing
boilerplate data-binding out of common business apps.

Closure is a collection of high performance libraries suitable for very large
javascript applications and puts emphasis on reduced code size (post-compile)
and performance/memory. It doesn't have any HTML bindings so you'd have to do
that manually. After compilation I'd argue Closure would be leaner than the
equivalent Angular application. I'm sure Angular can scale well, but probably
not like Closure. It's no less modern than Angular and still being actively
used (G+, schemer).

I'd say 95% of devs are looking for something like Angular. It looks like it
will significantly reduce your JS source code; Closure will do the opposite.

------
SquareWheel
I really love this. It's a ton of fun to play with. Seriously considering it
on my next project.

~~~
patrickaljord
Yes, it's really become my favorite JS MVC and the doc is amazing. They've
also announced that Google built the new version of doubleclick on it
[http://blog.angularjs.org/2012/06/doubleclick-super-
powered-...](http://blog.angularjs.org/2012/06/doubleclick-super-powered-by-
angularjs.html)

Two must watch demos:

* [http://www.youtube.com/watch?feature=player_embedded&v=u...](http://www.youtube.com/watch?feature=player_embedded&v=uFTFsKmkQnQ)

* [http://www.youtube.com/watch?feature=player_embedded&v=W...](http://www.youtube.com/watch?feature=player_embedded&v=WuiHuZq_cg4)

~~~
BHSPitMonkey
The Twitter API demo showing off the Resource library is also great:

* <http://www.youtube.com/watch?v=IRelx4-ISbs>

------
wooptoo
I'm using an older version of Angular (0.9.19) for a medium sized project. The
bad part is that they changed it so much for version 1.0 that it's almost
another framework. And the worst part is that they introduced a lot of
boilerplate. Too bad, Angular 0.9 was IMO better.

------
Osiris
Can anyone with any ember experience comment on the differences between the
two? I've been doing Ember for the past few months and my team is about to
convert two Backbone projects into Ember for consistency. Based on what I've
read, I'm starting to wish we had gone with AngularJS instead of EmberJS, but
I'm sure each has it's pros and cons. At this point in the game, I think it's
a bit too late for my team to switch frameworks unless there's a really
compelling reason to do so.

~~~
gregwebs
I don't have much experience but tried to draw some comparisons:
[http://tunein.yap.tv/javascript/2012/06/11/javascript-
framew...](http://tunein.yap.tv/javascript/2012/06/11/javascript-frameworks-
and-data-binding/)

If you can tell, I like Angular's approach better. However, the crucial thing
is that Ember still has 2-way data binding. And I think you will have a much
easier time porting Backbone to Ember than to AngularJS.

------
josteink
I'm not going to complain about options, but to me Knockout.js looks better
and more featured.

I'm not going to jump on something new, just because it came out of Google.

~~~
creamyhorror
I thought it was the other way round, that AngularJS had features that most
other frameworks didn't. Personally, when I looked at Angular and Knockout
(and Backbone, etc.) last year, I liked that Angular didn't require using
KO.observable to do binding like Knockout did. Angular isn't new, either; it's
been around since 2010, but has mostly flown under the radar while other
frameworks got more attention.

Angular's main weakness is probably its marketing. It's made by engineers and
not designers, so its web fronts aren't crowd-pleasers. Its API and internals
have been changing so rapidly that the documentation only recently caught up.
But it's got very solid engineering under the hood, and there are a few
blogposts out there by people who compared various JS MVC frameworks and
picked Angular for its engineering.

With the advent of client-server frameworks like Derby and Meteor (and the
Rails-integrated framework Joosy), the pure client-side frameworks may have to
evolve to keep up, but among this slightly more mature crowd, Angular ranks
very well IMO.

\---

[edit] A comparison of Angular and Backbone from over a year ago, with a bit
about Knockout as well: [http://stackoverflow.com/questions/6548826/angular-
js-vs-bac...](http://stackoverflow.com/questions/6548826/angular-js-vs-
backbone-js)

<<< Jason - AngularJS is 100% MVVM. The reason the Angular boys call it MVC,
is because they are Googlers, not XAML developers. In Angular, Controllers are
equivalent to ViewModels. You'll notice - there are no references to the view
and zero DOM manipulation in Angular controllers. Knockout uses proxy objects
for observable databinding. You will soon get tired of calling ko.observable()
& ko.observableArray() to wrap any objects you want to databind. Proxies cause
problems. Angular does not use proxy objects, and therefore you can databind
directly to any JSON (ie, coming in from a service). – Ryan D. Hatch May 28 at
11:53

Jason (part 2) - Angular is also an HTML compiler... you can create new tags &
attributes, just like you could create User Controls & Attached Properties in
XAML. So everything becomes modular / you can create your own reusable
components / controls. AngularJS supports scope inheritance, which is the
equivalent to DataContext inheritance in XAML. AngularJS has a very bright
future. Did I mention it has fully support for routes & deep-linking, partial
views, services with dependency injection, and an excellent testing story? :)
– Ryan D. Hatch May 28 at 11:53

\---

Ryan, thanks for the feedback! You may notice that I wrote this answer almost
one year ago. I still really enjoy MVCC, but your prediction is correct. I am
getting weary of ko.observable(). – JasonSmith May 29 at 0:21 >>>

------
bill-nordwall
Why aren't the "ng*" attributes prepended with "data-" to make them valid
HTML5 attributes? It's a minor nit, but kind of annoying nonetheless.

~~~
SoapSeller
You can use several binding declarations styles, including data-ng-*:
[https://github.com/angular/angular.js/blob/master/CHANGELOG....](https://github.com/angular/angular.js/blob/master/CHANGELOG.md#compile-
rewrite)

~~~
bill-nordwall
Thanks for the info!

Although, forgoing "data-" prepending by default in the interest of saving a
few bytes doesn't seem like a good tradeoff. If you have any HTML5 validation
as part of your testing process, not having valid attributes is going to throw
a whole mess of errors that you'll have to ignore.

~~~
nilliams
Does HTML5 validation really matter when your goal is to build an MVC
JavaScript app? I'm not trolling btw, many others in the community have long
had validation pegged as a red herring [1] [2].

Validation of your attributes is fairly meaningless, and if you have a decent
validator setup as part of your workflow (save-time or build-time - I
personally wouldn't bother with either), then you should be able to customise
it to turn off silly errors. You could also pre-process your JS files as part
of your build step to replace ng-* with data-ng-* if it really meant that much
to you. The byte-saving doesn't matter of course, but it seems like extra
typing and more repetition in your templates for zero benefit.

[1]
[https://groups.google.com/forum/?fromgroups#!msg/html5boiler...](https://groups.google.com/forum/?fromgroups#!msg/html5boilerplate/bRtrFSrKjtI/AOa44To23nMJ)

[2] [http://www.nczonline.net/blog/2010/08/17/the-value-of-
html-v...](http://www.nczonline.net/blog/2010/08/17/the-value-of-html-
validation/)

~~~
gilini
The problem is not whether a validator spits several errors or not, HTML
validators are tools designed to point out stuff that is not conforming to the
specs. It's stuff that you should avoid, not that will necessarily break your
application on any web browser.

Why should you avoid it? Because, basically, if it's explicitly forbidden, or
not covered by spec, you can't be sure of what will happen in all (or newer)
browser implementations. If there's no defined behavior for some code, _any_
behavior is correct.

Also, it's not like you have to go an extra mile in order to follow the specs
here.

------
indubitably
The intro video is interesting, but the suggestion that apps in Angular are
going to be "much more like HTML" seems to me to be belied by the fact that
the second example has a more or less Backbone-like Model definition.

I can appreciate the desire to have declarative relationships within markup,
but if there's going to be Javascript running anyway, what does it gain?

Plus, <html ng-app> is an abomination…

~~~
gregwebs
Yeah, the point of Angular is not to "program in html", just to have
declarative html for dealing with the DOM and otherwise program in JS.

I totally agree for server-side templates that there are limited benefits
(designer friendly perhaps) to a template as valid HTML. However, when you
want to make your HTML interactive (2-way data binding) in an unobtrusive way,
you are forced to understand html.

A good example I went over is how would you bind data to a checkbox
automatically? I think you are advocating the Ember.js approach, which uses a
function call to represent a checkbox, but a plain tag is actually much easier
to understand: [http://tunein.yap.tv/javascript/2012/06/11/javascript-
framew...](http://tunein.yap.tv/javascript/2012/06/11/javascript-frameworks-
and-data-binding/)

------
hyuuu
I have tried several javascript mvc frameworks: angular, backbone ,
javascriptmvc (i'm serious, the name is javascriptmvc) but time and time again
I'm always drawn back to backbone, as this is a post about angular, one thing
that turns me off about angular is the high lock in/dependency towards the
framework.

They have a lot, I mean a lot of functionalities built in, but with that
comfot comes the price if you want to use any other jquery/javascript library
plugin that's available out there. The only option you have is to "angularize"
the plugin before you can use it. This is different from backbone, almost like
the name suggest, it's bare bone, there will be more boilerplate code but you
get more freedom and most if not all the plugins that are available to you
from your js libs can be used as is. My suggestion before going all out to ANY
js framework, know how the application would behave beforehand.

~~~
creamyhorror
There are projects to connect Angular to other libraries, e.g.

\-- angular-ui: [http://deansofer.com/posts/view/14/AngularJs-Tips-and-
Tricks...](http://deansofer.com/posts/view/14/AngularJs-Tips-and-Tricks-
UPDATED) \-- a set of widgets for UI elements, including wrappers for jQuery
plugins

\-- jquery-mobile-angular-adapter:
<https://groups.google.com/forum/#!topic/angular/at8helGHd_g> \-- for using
angular with jQuery Mobile

\-- sencha-touch-angular-adapter:
[https://groups.google.com/forum/?fromgroups#!msg/angular/c8s...](https://groups.google.com/forum/?fromgroups#!msg/angular/c8sLSqA4AqQ/qymwooexmgwJ)
\-- ditto, for Sencha Touch

I believe mostly any object can be easily wrapped to be accessible by Angular
(which is what's happening in angular-ui for jQuery plugins, for example).
Right now documentation for these projects is sparse, but their authors tend
to be active on the AngularJS Google Group, and people often offer solutions
to problems very quickly there.

------
joshbaptiste
I was juggling between knockout and Angular for my next project, after
watching some demo's Angular gets the win.

------
seivan
For me it's between Angular.js, Batman.js and <http://joosy.ws>

I would prefer Batman.js, but it's so buggy and the developers seem confused,
there is no roadmap and the docs aren't updated as the code is.

~~~
swah
> I would prefer Batman.js, but it's so buggy and the developers seem confused

So basically you like the name better? :P

~~~
seivan
I like the style of the API better. Unfortunately, the API doesn't do what it
says it does :)

I dislike how views are treated in Backbone.

------
krosaen
Angular, knockout and ember are the contenders I'm now aware of for 2 way data
binding. Looks like angular also brings in some of the stuff backbone
provides... I might prefer to go more ala cart and stick with knockout for
now.

------
jackmoore
The github repository seems to have a lot of open issues for a 1.0 release:
<https://github.com/angular/angular.js/issues>

------
glenjamin
There seems to be a lot of magic going on under the hood, which will help you
get off the ground quickly but I worry how easy it is to extend this to do
unusual things.

Likewise, to provide features like dynamic update when a function's return
value changes I assume it has to do either something very clever, or something
very dumb (polling?). How performant is this sort of approach?

~~~
mhansen
Yes, it polls. Most functions are quite fast, and fine to just poll, and it's
quite convenient to be able to bind to functions when needed.

But it's all tradeoffs - in our app we have a few that aren't - for those, we
profiled to find them, and added a bit of code to the functions to cache the
return value.

~~~
atjoslin
It doesn't poll, actually.

~~~
mhansen
Sorry, what I meant is that when the application rerenders (digesting changes
that have been made) it will re-evaluate the function to check if the result
has changed.

Polling the function for changes, contrast with how e.g. knockout.js pushes
changes. (I could be wrong, please let me know if my understanding's not
reality)

~~~
atjoslin
Ah, yeah I think you've got it right. I thought you meant polling as in it
checked every X milliseconds for changes.

------
heretohelp
Does anyone else find it odd that most JavaScript frameworks end up solving
half the easy problems of doing frontend heavy web development, and leave the
other half unsolved?

Backbone goes so far as to encourage a menagerie of bizarrely constructed HTML
strings getting injected into templates, Spine has superfat controllers
instead utilizing models more prominently, and AngularJS solves the
(relatively easy) problem of databinding and little else.

What the hell? This is why we have to use roll our own solution at my company
using jQuery + BackBone + _.template. We end up having most of the state
either bound into the DOM (ala Angular, but done ourselves), or stored in a
Cache object backed by Backbone.

~~~
politician
FWIW, check out <https://github.com/politician/outback> for a bidirectional
declarative binding solution for Backbone. It'll help you keep all of your DOM
manipulation code safely away from your Views.

------
tylermauthe
Finally! A simple way to re-implement the <blink> tag!!!!! My life is
complete.

~~~
tylermauthe
I was just kidding...

------
nyellin
Please, if you're going to use a default Bootstrap layout, at least add a
background image. Something as minor as:

    
    
      background-image: url(http://subtlepatterns.com/patterns/brillant.png)
    

will make a difference. (And please don't hotlink like I did.)

~~~
ceejayoz
Why? Who benefits from a subtle dot pattern on the back of these developer
docs?

~~~
nyellin
It makes the page look mildly nicer with almost no effort.

