65

I have been asked to build a small web application for one of our clients and think it might be a good opportunity to try out a different framework for building web applications. Most of the applications we build are based on asp.net web forms and we have no yet done anything in an MVC architecture but I am eager to start building web applications in a more structured manner with the right tools.

I have been researching things like asp.net MVC and the likes which look quite good but I am wondering is there anything to be said for using something like the Google AngularJS Framework.

If possible I would still like to be able to write my server side code using c# and I have not researched AngularJS enough to know if this is even possible, although I assume I could use web services.

Has anyone had any experience with developing an app using AngularJS and if so, how was it and can you point me in the right direction for some tutorials?

Graham
  • 7,431
  • 18
  • 59
  • 84
TGuimond
  • 5,475
  • 6
  • 41
  • 51
  • looks similar to [Knockout.js](http://knockoutjs.com/) with its declarative bindings. – greenimpala Oct 04 '11 at 16:17
  • 4
    Building single-page web apps with AngularJS and ASP.NET MVC 4: http://tarkus.me/post/32121691785/angularjs-with-asp-net-mvc-4 – Konstantin Tarkus Sep 23 '12 at 14:22
  • 2
    You may also want to check AngularJS starter kit for Visual Studio: http://github.com/kriasoft/angular-vs – Grief Coder Dec 17 '12 at 23:44
  • Things to consider: Angular (uncompressed) is [_over fifteen thousand lines long_](https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js) (!). It can be a useful tool, but considering that much of what it's used for can be handled on the server, it's worth asking if it will be a game changer for your site specifically. – Sandy Gifford Oct 09 '13 at 15:04

8 Answers8

104

We have been developing a port of a Swing fat-client application in AngularJS for the last couple of months and I think it is worth recommending. As far as learning resources go, check out the official project site (and be sure to read the tutorial) and the mailing list (the authors are very helpful).

The good stuff:

  • great testability
  • the two-way data binding is a very powerful feature, and it can be extremely helpful once you "get it"
  • IMO the AngularJS templates are much less brittle than using data- attributes or "special" CSS classes to mark elements that do something
  • it greatly reduces the need for using jquery plugins, because implementing that functionality in AngularJS is very easy (stuff like trees, tabs, accordions, etc.)

The bad stuff:

  • the learning curve seems pretty steep (I didn't have much of a problem, but I've seen some people struggle with it)
  • validations in AngularJS suck for the time being (a new implementation is on the way)
  • not all libraries/jquery plugins play nicely with Angular and usually you have to wrap them
  • the API is still being polished, so expect breaking changes (not a big problem with frequent releases and very good changelog, though)
  • performance is OK up until several thousand bindings on a page - most of the time this is not a limitation, but there are cases when this could be a problem.

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

  • some people really overuse widgets. In my experience, it's much better to use HTML "partials" + services, and only use widgets sporadically.
  • read source code of the library - it's the best place to learn stuff about angular
  • no DOM manipulation in services/controllers
  • if you use css classes to bind to events, you are doing it wrong
psyho
  • 7,142
  • 5
  • 23
  • 24
  • 4
    Do you, by any chance, mean "flat" (slowly increasing) when you say "steep" (rapidly increasing) in reference to a "learning curve"? – Marko Dumic May 04 '12 at 14:31
  • 12
    Angular is a rather large framework and there's a lot to learn in the beginning (including concepts like dependency injection), so I think the appropriate word is "steep". – psyho May 05 '12 at 21:43
  • Thanks, esp for "Some Pointers" section, it would help alot. I am gonna try it on pure Business line application with lots of input controls with lots of validations. Wish me luck. – Anand Jun 14 '12 at 04:04
  • I think the word is "steep" too, esp if your JaveScript scills are old and you don't understand JQuery either. It's quite a shift in mindset. – BanksySan Aug 14 '12 at 12:37
  • 13
    The common use of the term "steep learning curve" is already rooted in English incorrectly, and has the exact opposite meaning mathematically, @MarkoDumic is right on the academic aspect (steep learning curve means learning a lot in short amount of time), but in spoken English, steep learning curve means "hard to learn". It is so rooted in the language that it's better to use the scientifically incorrect yet commonly used version than the "right" one, just so most people will understand what you mean. see: http://english.stackexchange.com/questions/6209/what-is-meant-by-steep-learning-curve – Eran Medan Feb 04 '13 at 18:54
  • +1 FWIW I have found AngularJS a joy to use; I'd echo a lot of the plus points noted above. – Darragh Enright Feb 14 '13 at 12:12
  • Depends on the axis - If x=learning and y=time/effort, a steep learning curve is what you get for hard stuff... – newcube Aug 28 '13 at 07:58
  • What I discovered about working on angular is the minimal use of using html class or html id for element targetting, you let the data decide how the dom should be manipulated instead :) – sksallaj Mar 06 '14 at 18:36
  • 1
    The expression steep learning curve is used with opposite meanings.. According to several dictionaries `steep increase would mean a quick increment of skill`. This differs from the use in common english where steeps stands for difficult initial learning process. [see Wikipedia - Learning curve](http://en.wikipedia.org/wiki/Learning_curve#.22Steep_learning_curve.22). – surfmuggle Dec 02 '14 at 14:42
26

+1 @psycho's answer

AngularJS is client-side framework, so you can use any language on the server. It's designed to work well together with jQuery, with big emphasis on testing...

Here are some resources you might find useful:

Some example apps:

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 question on mailing list !

We are still in beta, but there are already several internal apps at Google, powered by AngularJS.

UPDATE (26th July 2012):

AngularJS v1.0 has been released.

For some public AngularJS-powered apps, check out http://builtwith.angularjs.org

Vojta
  • 23,061
  • 5
  • 49
  • 46
  • What are those apps Vojta? It would make it a much easier sell if we could point to Google eating their own dogfood. – Steven P Jul 25 '12 at 04:33
  • @StevenP most of the apps at Google are unfortunately internal only. However, I updated the answer with a link, where you can see some public apps. The biggest AngularJS-powered public app is DFA. – Vojta Jul 26 '12 at 23:05
  • Where are the example apps built with v1? That would be a helpful list. – noogrub Aug 30 '12 at 16:30
20

IMHO developing something for a client which they may have difficulty supporting is unprofessional. You have to bear in mind that it will be difficult for your client to hire experienced Angular professionals, or train their own people to climb that "steep learning curve". Also, so far the documentation is not that great. Can you easily, in a few moments, answer the question, "How can I connect my shiny Angular app to my client's database?" Can your client sometime in the future easily grab some existing code and adapt it to their potential future needs? Be honest.

Compare plain old reliable LAMP development to Angular. For a "small web application" I really believe that a professional should give his client something maintainable and simple.

It's not to say that Angular isn't cool and sexy etc etc. But you have your client's future maintainability to think about in addition to the latest framework fad. Tread lightly would be my recommendation. Build your own website with Angular first and see what you think before you bestow your fabulous new skills on some trusting client.

noogrub
  • 872
  • 2
  • 12
  • 20
  • 2
    Point taken. I did not build the application using angular in the end. – TGuimond Jul 01 '12 at 14:08
  • 2
    That is funny. When jQuery just got out, I bet you used the same reason to reject jQuery. – maxisam Oct 19 '12 at 15:11
  • 9
    @maxisam - yes, I did. When the jQuery code became mature, then I began to promote it to commercial clients. I just feel that early adoption has hazards that one should responsibly consider when making decisions for a client, that's all. I'm building an app right now as a test for production code; if it performs well and we feel like the AngularJS code base is stable and reliable, we'll then push it as a company standard. That was all I was trying to say. – noogrub Oct 19 '12 at 18:16
  • I wouldn't use it on production if Angular is still in RC. But Angular released a stable version already. It really depends on how you think. – maxisam Oct 19 '12 at 20:43
  • Regardless of stack chosen, I would say that new team members should be able to look at the tests and see how things work. In a different point, you can't compare LAMP (server side rendering) to angular (client side rendering). A better comparison is angular to backbone. Also, dependency injection is something every engineer needs to know, period. – davidjnelson Oct 22 '12 at 21:11
  • "Can you easily, in a few moments, answer the question, 'How can I connect my shiny Angular app to my client's database?'" Things may have been different when you answered, but the answer to this rhetorical question, today, is obviously yes. – user240515 Oct 21 '13 at 19:31
  • 2
    Bruce Lee said, It is like a finger pointing a way to the moon. Don't concentrate on the finger or you will miss all that heavenly glory. I agree, we actively use AngularJS at the enterprise level now where I work, and it's excellent. The core advice I gave here still applies to new technologies, especially for "consultants" who are considering using them for a live client app before they've even practiced the technology on their own: Build your own with first and see what you think before you bestow your fabulous new skills on some trusting client. – noogrub Oct 22 '13 at 13:52
11

I remember reading this SO thread couple of months back with same question in my mind, and we decided to go ahead with AngularJS, and the best decision we made on this project yet.

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

Most probalbly after such a nice client side Javascript MVC framework, you would only need REST API layer interacting with Business Logic Layer at server side, and no MVC at server Side (ASP.NET MVC/Spring/Structs would feel like old memories).

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

Soon after our project finishes, we might put some of our directive we wrote for open source world.

Anand
  • 4,523
  • 10
  • 47
  • 72
  • I know that it has not been long since your answer, but ... have you got anything to share as of today? – superjos Feb 26 '13 at 11:20
  • @SutikshanDubey Could you please help to answer what to do in a single page app with angularjs if I need to make custom controls - properties of which like width, height, x/y position on screen comes from server in json format ? – KKS Jan 08 '14 at 10:15
11

I have been researching the merits of AngularJS for many months to utilize as a core framework for product I am creating. There are many aspects of AJS that make it worth while to learn. Yes there is a bit of a learning curve but its well worth it, especially if you wish to have more control on client side capability.

JQuery manipulates the DOM at run time, whereas AJS situates itself within the JS rendering lifecycle. This allows you to teach the DOM new tricks by creating your HTML Elements and Attributes. This is very, very powerful. As what you are able to do is introduce new Element behaviors for whatever your purpose and need. In AJS these custom HTML Attributes/Elements are called Directives. With the ability to craft your own Directives, you are able to build functionality that the current HTML doesn't have, pushing out capabilities that will run on all modern browsers now and into the future. Of the many approaches to inducing new behavior, AJS appears to be the safest direction one could take due to how they have chosen to implement it.

There is a huge performance gain over JQuery in AJS.

I love the simplicity of the two-way data binding, and the separation of concerns in their client side MVC pattern, which as pointed out above provide great testability. There scope object is the glue between the View (HTML), the Model (your Data) and your custom Controllers. The scope provides access to parent attributes and can be isolated at the sibling level, which is important for some reusable templates.

Templates can created and reused across your application which can contain 0 or more custom directives.

I have been using frameworks such as PRISM and MEF but I am finding that AJS has most of the same features that exist in these .NET frameworks but in a 29K footprint. There is rumors that they are working on lazy-loading which if provided will provide for some very interesting LOB type capabilities.

There are a number of UI frameworks that are being built for AJS but you can wrap any 3rd party control lib as needed, given a bit of effort. The trick is to ensure that when these 3rd party controls have changes induced, that you ensure AJS is properly notified using their apply method.

If you combine AJS with MS TypeScript within VS 2012, it provides the ability to manage and build some very impressive projects which will work well for those who are more comfortable with projects within VS.

There are a ton of other reasons to look at AJS, but if you are considering frameworks such as KnockOut I'd highly recommend AJS instead, regardless of it's perceived learning curve. Knockout is a library, AJS is a framework.

user1333524
  • 463
  • 5
  • 17
  • I wholeheardedly agree – Spock Aug 27 '13 at 10:34
  • @user1333524 Could you please help to answer what to do in a single page app with angularjs if I need to make custom controls - properties of which like width, height, x/y position on screen comes from server in json format ? – KKS Jan 08 '14 at 10:18
8

So far i think Google's Angular is great. Particular like the databinding and dependency injection.

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

Community
  • 1
  • 1
Eric_Guo
  • 81
  • 1
  • 2
7

I realise this post is old and you haven't gone with Angular, but I have a similar background to you, and I'm at the same point as you when asking the question.

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

  • As many have already mentioned, Angular can have a very steep learning curve "Not only me, but co-workers that I consider highly smart developers, have struggled with some of the basic concepts" AngularJS is amazing... and hard as hell (link also has some good tutorial links which you asked for), and the version 2 stuff is looking more like java, which wouldn't have been a problem with your C# background, in my opinion Directives are hard enough to understand without verbose annotations and so on.
  • Angular performance can be poor in some cases, especially when using ng-repeat on a large number of elements Considering Speed and Slowness in AngularJS and Scaylr's experience. Other's have mentioned that performance really degrades over ~2000 bound elements, but that's usually met with arguments about how any app with more than that many elements probably isn't a good app. Keep it in mind though if you have legitimate use cases which call for many bound objects.
  • Angular is popular in terms of contributors, but ranks way way behind, say, jQuery in terms of production usage. Finding Angular developers might be tough, and jQuery or other developers converting have that "steep learning curve" to deal with.
  • Because Angular is young, you have no guarantee that it'll gain enough traction for your new Angular skills to be employable, and your new application not to quickly become legacy code
  • In v1.2 Angular doesn't support IE7 and below and v1.3 will drop IE8. For >=IE9, you need to follow some special coding practices.
  • The many javascript widgets, plugins and libraries which you might be used to using can't be used properly with Angular without heavy modification and people often suggest to re-write your component in Angular anyway.
  • UPDATE March 2014: after 2 months attempting to build a non-trivial densely functional one page app: 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're coding with it. I'm finding some bugs Angular that are fixed by upgrading to a later version and others fixed by regressing to an earlier one. I've never had to go version shopping like this with jQuery.
  • UPDATE May 2014: Young, broken tools. Batarang is great until it doesn't work. I can't trust it until they fix this one.

And finally, the three best resources I've found for learning this stuff

Marc
  • 12,706
  • 7
  • 61
  • 97
poshest
  • 4,157
  • 2
  • 26
  • 37
0

I would say yes to this and check out John Papa's hottowel implementation as a way to do it.

poshest
  • 4,157
  • 2
  • 26
  • 37
Warren LaFrance
  • 552
  • 7
  • 20