AngularJS 1.0 released
googledevelopers.blogspot.com
googledevelopers.blogspot.com
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.
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.
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.
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?
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.
You can use data-ng-* too 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).
The Web Component spec[1] examples always have the template in plain HTML, wrapped in a <template> and separate from any JavaScript. Searching the AngularJS site, there are zero references to "Web Components". Web Components are so new that the spec still has Norse mythology references, so a reference from Angular to the spec would be a big help.
More importantly, while Angular has been duplicating the functionality of Underscore and jQuery, the rest of the JS world is extending itself with CommonJS modules according to spec. Half of the builtwith.angularjs.org examples include jQuery anyway. Angular's attempt to be a complete "end-to-end solution" may easily make it a jack-of-all-trades, master of none. This also seems at odds with its focus on being a component.
Lastly, I am not the first person to raise these concerns.[2]
[1] http://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/i...
[2] https://groups.google.com/group/angular/tree/browse_frm/mont...
From one of AngularJS author:
> AngularJS is our testbed to see what works and what doesn't. We are taking the best ideas from angular and use them to shape the (Web Components) specs (and the other way around too!). As the first step, we are hoping to start to replace some pieces of angular when native apis are available. we'll see how far we'll get with this approach. What is important is that Angular can help you start thinking in the way that will be required for using these native apis and believe me that is a huge plus already.
So not only do they care about Web Components, they are using AngularJS to shape the specs and vice versa. Hard to be more standard than given that the specs are still unstable.
About being able to re-use the code on server side, I don't care about that, I write my apps in ruby anyway and this is out of scope of a JS MVC anyway. The only people that might care about that are Node users, and most people don't use Node or other js server side. So that's a non issue.
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. "
[1] http://docs.angularjs.org/guide/dev_guide.unit-testing
[2] http://docs.angularjs.org/guide/dev_guide.services.testing_s...
Angular adds some sugar on top for end to end UI testing.
Having couple of util methods (forEach, isFunction, etc...), is just so that Angular can work without any other dependency, which many projects actually do. However you are free to use underscore, jquery and other libraries...
Jasmine ? Yep, we like it and we use it. Angular DOES use jasmine as its unit testing framework + we provide some helpers to make your life with jasmine + angular easier. But again, you can use any testing framework you like.
Angular is server agnostic. However, we have some ideas and plans how to do server side prerendering, so I believe it will come...
var m = angular.module('myApp', []); m.config(function($interpolateProvider) { $interpolateProvider.startSymbol('(('); $interpolateProvider.endSymbol('))'); });
http://stackoverflow.com/questions/8302928/angularjs-with-dj...
https://docs.djangoproject.com/en/dev/releases/1.5/#verbatim...
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.
javascript:document.getElementsByTagName('video')[0].playbackRate = 2.0;
This will work even while the video is already playing.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?
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:
What MVC brings to any table -- structure and maintainability. This is more geared towards complete client-side applications than your typical jquery plugin.
Does this question make sense?
If you're creating "rich" front-end apps (as we are) you will be using your server-side framework mostly for implementing REST services with JSON (or XML, etc) However, you could also use Angular to add new functionality to some existing pages in an existing app.
That got me thinking.. Could I ever explain a non-web developer what Backbone is in a succinct way? I'm gonna try..
Web development is basically storing data at the server side, modifying and handling that data on both the server side and the client side. So basically you got multiple representations of the very same thing on two very different mediums. Passing and modifying that representation back and forth between those two very different mediums can be very tricky and error prone by itself, let alone the situation that you're handling varying numbers and varying types of these representations. Now what these MVC frameworks give us are idiomatic methods and structures attacking this very problem of representational hell.
http://blog.angularjs.org/2012/06/doubleclick-super-powered-...
The google doubleclick is now on http://builtwith.angularjs.org/
I didn't write the example, but did make Plunker.
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.
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.
Two must watch demos:
* http://www.youtube.com/watch?feature=player_embedded&v=u...
* http://www.youtube.com/watch?feature=player_embedded&v=W...
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.
I'm not going to jump on something new, just because it came out of Google.
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...
<<< 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 >>>
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.
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...
[2] http://www.nczonline.net/blog/2010/08/17/the-value-of-html-v...
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.
Btw, here's my point: The reason, why you want valid html, is to be able to use some html validator, which is super helpful, when finding bugs like unclosed div etc. However, if you prefix all the custom attributes with data-* you only get these attributes ignored, not validated. For example if you type data-ng-rrepeat="", the validator won't catch it.
So I would rather extend html validator to accept new tags/attributes in some format, say JSON, so that during the build process of your app, you can get all the directives your app defines and validate them. Then you get even your custom directives validated. I believe that's the way to go.
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…
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...
You can use data-ng-app too which is valid html5.
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.
I still like using Backbone collections and models with Angular and leave Angular with the VC part.
-- angular-ui: 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 -- for using angular with jQuery Mobile
-- sencha-touch-angular-adapter: 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.
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.
So basically you like the name better? :P
I dislike how views are treated in Backbone.
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?
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.
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)
Angular does dirty checking at the right moment.
After you bootstrap your app, nothing happens, unless: - user interacts (DOM event is fired) - response from server is back (xhr callback) - setTimeout fires - couple of other minor async stuff
So you only need to dirty check when some of these events occur and that's exactly what Angular does. Check out scope.$digest method, that's where all this stuff happens.
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.
background-image: url(http://subtlepatterns.com/patterns/brillant.png)
will make a difference. (And please don't hotlink like I did.)