9 ms·

AngularJS 1.0 released

198 points by patrickaljord 14y ago

SquareWheel 14y ago
I really love this. It's a ton of fun to play with. Seriously considering it on my next project.
- patrickaljord 14y ago
  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-by-angularjs.html http://blog.angularjs.org/2012/06/doubleclick-super-powered-... Two must watch demos: * http://www.youtube.com/watch?feature=player_embedded&v=uFTFsKmkQnQ http://www.youtube.com/watch?feature=player_embedded&v=u... * http://www.youtube.com/watch?feature=player_embedded&v=WuiHuZq_cg4 http://www.youtube.com/watch?feature=player_embedded&v=W...
  - deleted 14y ago
    [deleted]
  - iaskwhy 14y ago
    It seems like he is using Windows 8 (square windows instead of round ones), found that curious.
  - BHSPitMonkey 14y ago
    The Twitter API demo showing off the Resource library is also great: * http://www.youtube.com/watch?v=IRelx4-ISbs http://www.youtube.com/watch?v=IRelx4-ISbs
ConstantineXVI 14y ago
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 14y ago
  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 14y ago
    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 14y ago
      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?
- deleted 14y ago
  [deleted]
joshbaptiste 14y ago
I was juggling between knockout and Angular for my next project, after watching some demo's Angular gets the win.
seivan 14y ago
For me it's between Angular.js, Batman.js and http://joosy.ws 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 14y ago
  > I would prefer Batman.js, but it's so buggy and the developers seem confused So basically you like the name better? :P
  - seivan 14y ago
    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.
bill-nordwall 14y ago
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 14y ago
  You can use several binding declarations styles, including data-ng-*: https://github.com/angular/angular.js/blob/master/CHANGELOG.md#compile-rewrite https://github.com/angular/angular.js/blob/master/CHANGELOG....
  - bill-nordwall 14y ago
    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 14y ago
      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/html5boilerplate/bRtrFSrKjtI/AOa44To23nMJ https://groups.google.com/forum/?fromgroups#!msg/html5boiler... [2] http://www.nczonline.net/blog/2010/08/17/the-value-of-html-validation/ http://www.nczonline.net/blog/2010/08/17/the-value-of-html-v...
      - gilini 14y ago
indubitably 14y ago
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 14y ago
  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-frameworks-and-data-binding/ http://tunein.yap.tv/javascript/2012/06/11/javascript-framew...
- patrickaljord 14y ago
  > Plus, <html ng-app> is an abomination… You can use data-ng-app too which is valid html5.
limanoit 14y ago
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 14y ago
  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.
- mhansen 14y ago
  [Googler here] There's little overlap between Closure Library and Angular. Closure Library is a grab bag library full of useful functions that you can pick and choose from and integrate into your own code. Kind of like a standard library. Angular is a client-side MVC framework that gives you two-way databinding and custom views and dependency injection. Indeed, in our angular project, we use both - Closure Library for useful functions and advanced compilations, and angular for MVC.
gbadman 14y ago
You can play around with it on Plunker. Check out http://plunker.no.de/edit/JVl3Jx?live=preview http://plunker.no.de/edit/JVl3Jx?live=preview for an example. I didn't write the example, but did make Plunker.
- michaelmior 14y ago
  Only had a quick browse. Curious how Plunker compares to jsFiddle (http://jsfiddle.net/ http://jsfiddle.net/)
  - superchink 14y ago
    There's a pretty good overview here: http://plunker.no.de/ http://plunker.no.de/
    - michaelmior 14y ago
      Cool. Thanks :)
- drudru11 14y ago
  nice job on Plunker, very clean
- gbadman 14y ago
  Looking at Angular in more detail makes me want to port Plunker over. It would be a neat test of the framework since I find myself hitting some tricky areas in Backbone.js and in others wishing for a more prescriptive harness.
superasn 14y ago
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 14y ago
  On youtube, if you're part of the HTML5 experiment (check at http://www.youtube.com/html5 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 14y ago
    I get a button on the video bar that lets me adjust the playback rate to different speeds.
    - dpcx 14y ago
      That "only" lets you go to 2.0x. I've been listening to podcasts at 2.0x recently, and wishing for 3.0x.
- inuhj 14y ago
  My med school broadcasted all of our lectures online within minutes of the lecture being done. Although some students(20% or so) enjoyed being there the rest of us watched them online at speeds of 1.5 to 2x. I still have my freshman class shirt that reads "I watched it in Double Speed".
LaSombra 14y ago
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?
- agildehaus 14y ago
  Not sure how you do it, but client-heavy applications that I've written quickly become a huge mess when written in pure Javascript/jQuery, especially when my clients require the app to be single page with no reloading. Adding something like AngularJS or Knockout far reduces the amount of code you have to write and you get an app written around a data model. Knockout has a good description here: http://knockoutjs.com/documentation/introduction.html http://knockoutjs.com/documentation/introduction.html
- smokeyj 14y ago
  | 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 14y ago
    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 14y ago
      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.
- 14y ago
dannyr 14y ago
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-django-conflicting-template-tags http://stackoverflow.com/questions/8302928/angularjs-with-dj...
- swaroop 14y ago
  Django 1.5 will include a verbatim template tag https://docs.djangoproject.com/en/dev/releases/1.5/#verbatim-template-tag https://docs.djangoproject.com/en/dev/releases/1.5/#verbatim...
krosaen 14y ago
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.
- napillo 14y ago
  good for you?
doublerebel 14y ago
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.
- patrickaljord 14y ago
  > AngularJS uses a "ng-" namespace for data whereas Knockout and others use the HTML5 "data-" spec. You can use data-ng-* too http://news.ycombinator.com/item?id=4113317 http://news.ycombinator.com/item?id=4113317 > The "Reusable Components" section states "This lets you focus either on what the application does or how the application looks separately." This is based on the Web Component spec that many agree is the future of the web, including the twitter bootstrap crew (https://twitter.com/sayrer/status/208662599842283522 https://twitter.com/sayrer/status/208662599842283522).
  - doublerebel 14y ago
nyellin 14y ago
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 14y ago
  Why? Who benefits from a subtle dot pattern on the back of these developer docs?
  - nyellin 14y ago
    It makes the page look mildly nicer with almost no effort.
tylermauthe 14y ago
Finally! A simple way to re-implement the <blink> tag!!!!! My life is complete.
- tylermauthe 14y ago
  I was just kidding...
glenjamin 14y ago
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?
- patrickaljord 14y ago
  This is how they do it http://stackoverflow.com/questions/9682092/databinding-in-angularjs http://stackoverflow.com/questions/9682092/databinding-in-an...
- mhansen 14y ago
  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 14y ago
    It doesn't poll, actually.
    - mhansen 14y ago
      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 14y ago
        Ah, yeah I think you've got it right. I thought you meant polling as in it checked every X milliseconds for changes.
tmcw 14y ago
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/ http://builtwith.angularjs.org/ ) is somewhere between silly and suspicious.
- dtf 14y ago
  They posted this about DoubleClick: http://blog.angularjs.org/2012/06/doubleclick-super-powered-by-angularjs.html http://blog.angularjs.org/2012/06/doubleclick-super-powered-...
  - kpozin 14y ago
    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/ http://www.google.com/doubleclick/.
    - IgorMinar 14y ago
      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.
  - IgorMinar 14y ago
    http://builtwith.angularjs.org/ http://builtwith.angularjs.org/ now includes DoubleClick and more apps will follow shortly as they launch :-)
- deleted 14y ago
  [deleted]
- rthprog 14y ago
  I work at Google. Angular is certainly used internally - that said, no team is forced to use it, or switch to it.
heretohelp 14y ago
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 14y ago
  FWIW, check out https://github.com/politician/outback 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.
wooptoo 14y ago
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.
jackmoore 14y ago
The github repository seems to have a lot of open issues for a 1.0 release: https://github.com/angular/angular.js/issues https://github.com/angular/angular.js/issues
deleted 14y ago
[deleted]
hyuuu 14y ago
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.
- ericclemmons 14y ago
  How is that different from trying to mix frameworks in the backend? If your framework doesn't do as much, you write more boilerplate. If it does more, you write less, but have vendor lockin. I still like using Backbone collections and models with Angular and leave Angular with the VC part.
- creamyhorror 14y ago
  There are projects to connect Angular to other libraries, e.g. -- angular-ui: http://deansofer.com/posts/view/14/AngularJs-Tips-and-Tricks-UPDATED http://deansofer.com/posts/view/14/AngularJs-Tips-and-Tricks... -- 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 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/c8sLSqA4AqQ/qymwooexmgwJ https://groups.google.com/forum/?fromgroups#!msg/angular/c8s... -- 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.
Osiris 14y ago
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 14y ago
  I don't have much experience but tried to draw some comparisons: http://tunein.yap.tv/javascript/2012/06/11/javascript-frameworks-and-data-binding/ http://tunein.yap.tv/javascript/2012/06/11/javascript-framew... 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 14y ago
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 14y ago
  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-backbone-js http://stackoverflow.com/questions/6548826/angular-js-vs-bac... <<< 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 >>>

198 points by patrickaljord 14y ago

SquareWheel 14y ago

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

patrickaljord 14y ago
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-by-angularjs.html http://blog.angularjs.org/2012/06/doubleclick-super-powered-... Two must watch demos: * http://www.youtube.com/watch?feature=player_embedded&v=uFTFsKmkQnQ http://www.youtube.com/watch?feature=player_embedded&v=u... * http://www.youtube.com/watch?feature=player_embedded&v=WuiHuZq_cg4 http://www.youtube.com/watch?feature=player_embedded&v=W...
- deleted 14y ago
  [deleted]
- iaskwhy 14y ago
  It seems like he is using Windows 8 (square windows instead of round ones), found that curious.
- BHSPitMonkey 14y ago
  The Twitter API demo showing off the Resource library is also great: * http://www.youtube.com/watch?v=IRelx4-ISbs http://www.youtube.com/watch?v=IRelx4-ISbs

ConstantineXVI 14y ago

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 14y ago
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 14y ago
  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 14y ago
    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?
deleted 14y ago
[deleted]

joshbaptiste 14y ago

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

seivan 14y ago

For me it's between Angular.js, Batman.js and http://joosy.ws 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 14y ago
> I would prefer Batman.js, but it's so buggy and the developers seem confused So basically you like the name better? :P
- seivan 14y ago
  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.

bill-nordwall 14y ago

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 14y ago
You can use several binding declarations styles, including data-ng-*: https://github.com/angular/angular.js/blob/master/CHANGELOG.md#compile-rewrite https://github.com/angular/angular.js/blob/master/CHANGELOG....
- bill-nordwall 14y ago
  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 14y ago
    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/html5boilerplate/bRtrFSrKjtI/AOa44To23nMJ https://groups.google.com/forum/?fromgroups#!msg/html5boiler... [2] http://www.nczonline.net/blog/2010/08/17/the-value-of-html-validation/ http://www.nczonline.net/blog/2010/08/17/the-value-of-html-v...
    - gilini 14y ago

indubitably 14y ago

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 14y ago
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-frameworks-and-data-binding/ http://tunein.yap.tv/javascript/2012/06/11/javascript-framew...
patrickaljord 14y ago
> Plus, <html ng-app> is an abomination… You can use data-ng-app too which is valid html5.

limanoit 14y ago

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 14y ago
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.
mhansen 14y ago
[Googler here] There's little overlap between Closure Library and Angular. Closure Library is a grab bag library full of useful functions that you can pick and choose from and integrate into your own code. Kind of like a standard library. Angular is a client-side MVC framework that gives you two-way databinding and custom views and dependency injection. Indeed, in our angular project, we use both - Closure Library for useful functions and advanced compilations, and angular for MVC.

gbadman 14y ago

You can play around with it on Plunker. Check out http://plunker.no.de/edit/JVl3Jx?live=preview http://plunker.no.de/edit/JVl3Jx?live=preview for an example. I didn't write the example, but did make Plunker.

michaelmior 14y ago
Only had a quick browse. Curious how Plunker compares to jsFiddle (http://jsfiddle.net/ http://jsfiddle.net/)
- superchink 14y ago
  There's a pretty good overview here: http://plunker.no.de/ http://plunker.no.de/
  - michaelmior 14y ago
    Cool. Thanks :)
drudru11 14y ago
nice job on Plunker, very clean
gbadman 14y ago
Looking at Angular in more detail makes me want to port Plunker over. It would be a neat test of the framework since I find myself hitting some tricky areas in Backbone.js and in others wishing for a more prescriptive harness.

superasn 14y ago

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 14y ago
On youtube, if you're part of the HTML5 experiment (check at http://www.youtube.com/html5 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 14y ago
  I get a button on the video bar that lets me adjust the playback rate to different speeds.
  - dpcx 14y ago
    That "only" lets you go to 2.0x. I've been listening to podcasts at 2.0x recently, and wishing for 3.0x.
inuhj 14y ago
My med school broadcasted all of our lectures online within minutes of the lecture being done. Although some students(20% or so) enjoyed being there the rest of us watched them online at speeds of 1.5 to 2x. I still have my freshman class shirt that reads "I watched it in Double Speed".

LaSombra 14y ago

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?

agildehaus 14y ago
Not sure how you do it, but client-heavy applications that I've written quickly become a huge mess when written in pure Javascript/jQuery, especially when my clients require the app to be single page with no reloading. Adding something like AngularJS or Knockout far reduces the amount of code you have to write and you get an app written around a data model. Knockout has a good description here: http://knockoutjs.com/documentation/introduction.html http://knockoutjs.com/documentation/introduction.html
smokeyj 14y ago
| 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 14y ago
  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 14y ago
    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.
14y ago

dannyr 14y ago

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-django-conflicting-template-tags http://stackoverflow.com/questions/8302928/angularjs-with-dj...

swaroop 14y ago
Django 1.5 will include a verbatim template tag https://docs.djangoproject.com/en/dev/releases/1.5/#verbatim-template-tag https://docs.djangoproject.com/en/dev/releases/1.5/#verbatim...

krosaen 14y ago

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.

napillo 14y ago
good for you?

doublerebel 14y ago

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.

patrickaljord 14y ago
> AngularJS uses a "ng-" namespace for data whereas Knockout and others use the HTML5 "data-" spec. You can use data-ng-* too http://news.ycombinator.com/item?id=4113317 http://news.ycombinator.com/item?id=4113317 > The "Reusable Components" section states "This lets you focus either on what the application does or how the application looks separately." This is based on the Web Component spec that many agree is the future of the web, including the twitter bootstrap crew (https://twitter.com/sayrer/status/208662599842283522 https://twitter.com/sayrer/status/208662599842283522).
- doublerebel 14y ago

nyellin 14y ago

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 14y ago
Why? Who benefits from a subtle dot pattern on the back of these developer docs?
- nyellin 14y ago
  It makes the page look mildly nicer with almost no effort.

tylermauthe 14y ago

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

tylermauthe 14y ago
I was just kidding...

glenjamin 14y ago

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?

patrickaljord 14y ago
This is how they do it http://stackoverflow.com/questions/9682092/databinding-in-angularjs http://stackoverflow.com/questions/9682092/databinding-in-an...
mhansen 14y ago
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 14y ago
  It doesn't poll, actually.
  - mhansen 14y ago
    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 14y ago
      Ah, yeah I think you've got it right. I thought you meant polling as in it checked every X milliseconds for changes.

tmcw 14y ago

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/ http://builtwith.angularjs.org/ ) is somewhere between silly and suspicious.

dtf 14y ago
They posted this about DoubleClick: http://blog.angularjs.org/2012/06/doubleclick-super-powered-by-angularjs.html http://blog.angularjs.org/2012/06/doubleclick-super-powered-...
- kpozin 14y ago
  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/ http://www.google.com/doubleclick/.
  - IgorMinar 14y ago
    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.
- IgorMinar 14y ago
  http://builtwith.angularjs.org/ http://builtwith.angularjs.org/ now includes DoubleClick and more apps will follow shortly as they launch :-)
deleted 14y ago
[deleted]
rthprog 14y ago
I work at Google. Angular is certainly used internally - that said, no team is forced to use it, or switch to it.

heretohelp 14y ago

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 14y ago
FWIW, check out https://github.com/politician/outback 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.

wooptoo 14y ago

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.

jackmoore 14y ago

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

deleted 14y ago

[deleted]

hyuuu 14y ago

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.

ericclemmons 14y ago
How is that different from trying to mix frameworks in the backend? If your framework doesn't do as much, you write more boilerplate. If it does more, you write less, but have vendor lockin. I still like using Backbone collections and models with Angular and leave Angular with the VC part.
creamyhorror 14y ago
There are projects to connect Angular to other libraries, e.g. -- angular-ui: http://deansofer.com/posts/view/14/AngularJs-Tips-and-Tricks-UPDATED http://deansofer.com/posts/view/14/AngularJs-Tips-and-Tricks... -- 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 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/c8sLSqA4AqQ/qymwooexmgwJ https://groups.google.com/forum/?fromgroups#!msg/angular/c8s... -- 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.

Osiris 14y ago

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 14y ago
I don't have much experience but tried to draw some comparisons: http://tunein.yap.tv/javascript/2012/06/11/javascript-frameworks-and-data-binding/ http://tunein.yap.tv/javascript/2012/06/11/javascript-framew... 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 14y ago

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 14y ago
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-backbone-js http://stackoverflow.com/questions/6548826/angular-js-vs-bac... <<< 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 >>>