Google AngularJS Framework - is it worth the risk?

Question

I was asked to create a small web application for one of our clients and think that this might be a good opportunity to try a different framework for creating web applications. Most of the applications we create are based on asp.net web forms, and we haven't done anything in the MVC architecture yet, but I really want to start creating web applications in a more structured way using the right tools.

I am learning things like asp.net MVC and the like that look nice, but I'm wondering if there is anything that can be said about using something like the Google AngularJS Framework.

If possible, I would still like to write server-side code using C #, and I have not examined AngularJS enough to know if this is possible, although I assume I can use web services.

Does anyone have experience developing an application using AngularJS, and if so, how was it and can you point me in the right direction for some tutorials?

Answer 1

Over the past two months, we have been developing the app port for the bold Swing client in AngularJS, and I think it's worth recommending. For educational resources, check out the project’s official website (and be sure to read the tutorial) and the mailing list (authors are very helpful).

Good stuff:

• excellent testability
• two-way data binding is a very powerful feature and it can be extremely useful once you get it
• AngularJS IMO templates are much less fragile than using data attributes or “special” CSS classes to indicate elements that do something
• this greatly reduces the need for jquery plugins, since the implementation of this function in AngularJS is very simple (e.g. trees, tabs, accordions, etc.).

Bad material:

• the learning curve seems pretty steep (I didn't have a big problem, but I saw some people struggle with it).
• checks in AngularJS are sucking at the moment (new implementation on the way)
• not all libraries / jquery plugins work fine with Angular, and usually you have to wrap them.
• The API is still polished, so expect a violation (not a big problem with frequent releases and a very good list of changes).
• performance in the order of up to several thousand bindings per page - in most cases this is not a limitation, but there are times when this can be a problem.

Some pointers (if you ever decided to learn AngularJS):

• some people really abuse widgets. In my experience, it is much better to use HTML "partial" + services and use only widgets sporadically.
• reading library source code is the best place to study angular material
• no DOM manipulation in services / controllers
• If you use css classes to bind to events, you are doing it wrong.

Answer 2

+1 @psycho answer

AngularJS is a client environment, so you can use any language on the server. It is designed to work well with jQuery, with great attention to testing ...

Here are some resources you might find useful:

• Tutorial: http://docs.angularjs.org/#!/tutorial
• DOCS API: http://docs.angularjs.org/#!/api
• Developer Guide: http://docs.angularjs.org/#!/guide

Some sample applications:

• http://cburgdorf.github.com/angular-todo-app
• http://www.fluid.ie/angular/calculate/
• http://hookercookerman.github.com/angularjs-todos/
• http://paul-hammant.github.com/StoryNavigator/navigator.html

Adapter for SenchaTouch: https://github.com/tigbro/sencha-touch-angular-adapter

Adapter for jQ Mobile: https://github.com/tigbro/jquery-mobile-angular-adapter

Feel free to ask any questions on the mailing list !

We are still in beta, but Google already has several internal applications running AngularJS .

---

UPDATE (July 26, 2012):

AngularJS v1.0 released.

For some public applications working with AngularJS, check out http://builtwith.angularjs.org

Answer 3

IMHO, developing something for a client to whom they may have difficulty with support, is unprofessional. You must bear in mind that it will be difficult for your client to hire experienced Angular professionals or train your people to climb this “steep learning curve”. In addition, the documentation is still not so great. Can you answer the question within a few minutes: "How to connect my brilliant Angular application to my client database?" Could your client ever in the future easily grab some existing code and adapt it to their potential future needs? Be honest.

Comparison of simple old reliable LAMP development with Angular. For a "small web application," I really believe that a professional should give his client something convenient and simple.

This is not to say that Angular is not cool, not sexy, etc. But you have the opportunity to support your future customer support in addition to the latest frameworks. A tread would lightly be my recommendation. First, create your own Angular website and see what you think before giving away your awesome new skills on some gullible client.

Answer 4

I remember how I read this couple of SO a couple of months ago with the same question, in my opinion, and we decided to continue working with AngularJS and the best solution that we made in this project.

We are using AngularJS + ASP.NET MVC4 REST WebAPI.

Most likely, after such a pleasant Javascript MVC client structure, you only need a REST API layer that interacts with the business logic layer on the server side and not a single MVC on the server side (ASP.NET MVC / Spring / Structs would feel like old memories )

You will find Angular-UI a good add-on (esp ng-grid)

Shortly after the completion of our project, we can put part of our directive that we wrote for the open source world.

Answer 5

I have been studying the virtues of AngularJS for many months to use as the main structure for the product I am creating. There are many aspects of AJS that make him learn. Yes, there is a little learning curve, but it is worth it, especially if you want to have more opportunities for the client side.

JQuery manages the DOM at runtime, while AJS is inside the JS rendering lifecycle. This allows you to learn new DOM tricks by creating your HTML elements and attributes. It is very, very powerful. Like what you can do is introduce a new Element behavior for any purpose and need. In AJS, these custom HTML attributes / elements are called directives. Having the ability to create your own directives, you can create functionality that does not exist in the current HTML, crowding out the capabilities that will be implemented in all modern browsers now and in the future. Of the many approaches to stimulating new behavior, AJS seems to be the safest direction that could be taken because of how they decided to implement it.

JQuery in AJS has seen tremendous performance gains.

I like the simplicity of two-way data binding, and the separation of problems on their MVC-template on the client side, which, as mentioned above, provides excellent testability. The scope object is the glue between the view (HTML), the model (your data) and your user controllers. The area provides access to parent attributes and can be isolated at the brother level, which is important for some reusable templates.

Templates can be created and reused in your application, which can contain 0 or more user directives.

I use frameworks like PRISM and MEF, but I find that AJS has most of the same features that exist in these .NET frameworks, but with a size of 29K. Rumor has it that they are working on lazy loading, which if provided will provide some very interesting features like LOB.

There are several user interface infrastructures that are created for AJS, but you can wrap any third-party management library as needed with a little effort. The trick is to make sure that when these third-party controls triggered the changes, you guarantee that AJS will be correctly notified using the method of their application.

If you combine AJS with MS TypeScript in VS 2012, it provides the ability to manage and create very impressive projects that will work well for those who are more convenient for projects in VS.

There are many other reasons to take a look at AJS, but if you are considering an infrastructure such as KnockOut, I would highly recommend AJS, regardless of whether it perceived the learning curve. The knockout is the library, AJS is the foundation.

Answer 6

So far, I think Google Angular is wonderful. In particular, like data injection and dependency.

For other js frameworks there are knockout.js, backbone.js, etc. here are some posts: angular.js example in backbone.js and / or knockout.js

Answer 7

I understand that this post is old and you did not go with Angular, but I have a similar background for you, and I am in the same place as you, asking a question.

So, for future visitors, some of the "risks" and links to resources that I found useful ...

• As already mentioned, Angular can have a very steep learning curve "Not only me, but colleagues I think are very smart developers have struggled with some of the basic concepts" AngularJS is amazing ... and hard as hell (the link also contains some useful links to the tutorials you requested), and the version 2 material is more like java , which would not be a problem for your C # background, in my opinion, directives are hard enough to understand without detailed annotations, etc.
• Angular performance may be poor in some cases, especially when using ng-repeat on a large number of elements. Given the speed and slowness in AngularJS and the Scaylr experience . Others noted that performance does degrade over ~ 2000 related elements, but it is usually met with arguments about how any application with a large number of elements is probably not a good application. Keep this in mind if you have legitimate use cases that require many related objects.
• Angular is popular with authors , but there is a way, say, of jQuery in terms of product usage . Finding Angular developers can be tough, and with jQuery or other developers who deal with this "cool learning curve."
• Since Angular is young, you have no guarantee that it will gain enough grip with your new Angular skills that you can use, and your new application will not quickly become obsolete code.
• In v1.2, Angular does not support IE7 and below, and v1.3 will drop IE8 . For> = IE9 you need to follow some special encoding methods .
• Many widgets, plugins, and javascript libraries that you can use to use cannot be used with Angular without significant changes, and people often suggest rewriting your component in Angular anyway .
• UPDATE March 2014: after 2 months of trying to create a non-trivial, densely functional application on one page: there are many versions of Angular, and it's hard to say which is the best or most stable. It will depend on what you code with it. I found some Angular errors that were fixed by upgrading to a later version, while others were fixed using regression to an earlier version. I never had to buy a version like this with jQuery.
• UPDATE May 2014: Young, broken tools. Batarang is great, so far it doesn't work . I cannot trust this until they fix it.

And finally, the three best resources that I have found to study this material

• Ultimate guide to Todd Motto and
• UPDATE April 2014: This chapter of the book is quite amazing. I haven't bought the rest of the book yet, but the concept is fantastic.
• A complete non-trivial application written in Angular (a companion book is fine, but doesn't really talk about a non-trivial application, as they are said to advertise on their site )

Answer 8

I would say yes to this and see John Papa hottowel as a way to do this.