Is AngularJS good choice for my project with WCF, SQL Server

[Arshad Nazeer]

I want to create a web application and I am exploring how I could do this. So I came across AngularJS. I want to use WCF Service and SQL Server in my application also. I am trying to find what AngularJS, WCF Service, SQL Server can do for me because I do not want change technologies in the middle of my project after discovering that AngularJS cannot do things which I want my application to do.

So, my question is can AngularJS help me create Static web pages and Dynamic web pages? I can start my project in ASP.NET MVC but I want to explore AngularJS and want to find out what it is.

My project is about..

1. Sending E-mails

2. Displaying content from database (in any manner using Ajax)

3. Voice chat, Video chat, Text chat

4. Can contain Javascript/JS Libraries, jQuery, CSS, HTML5, jQuery-Ajax

5. Big

Tell me something about it. Any suggestions? Tell me which is possible which is not possible.

Thank you very much

[Luke Kende]

It's all totally possible.  However, you are stepping into a different paradigm with a Single Page App (SPA), especially with angular, and especially coming from .NET.

Instead of each page requested having it's final html delivered to the browser by the server based on server-side logic, it's all in templates shown based on conditions (example: the location path determines the view, which loads templates from javascript or relative url retrieved via ajax).  All templates are just html files that use interpolation (no C# code with code-behind or any other server logic building the html).  

Hi {{user.name}} 

..and directives that define custom elements along with behavior.

<div my-pretty-slider></div>

//simplification for concept, not usable code

angular.directive('myPrettySlider', function(element){

  

  var slides = [ {image: '/path/to/image1'}, {image: '/path/to/image2' ]

  $(element).slideshow(slides);

})

If you are going to use angular, I'm not sure you'll need ASP's MVC as much as you'll need to build your ajax calls into a meaningful API so that all data from the database is represented for the types of views you will display. A RESTful api is even nicer because you can user angular's $resource object.  I've only worked with .NET some years ago, so someone else might know better...but I say don't spend too much on it's MVC if you are building a SPA.

Here are my thoughts on your project needs:

1. Sending E-mails

The view can show your template for a new email. The user enters their message details and hits send.  The page does not post in the browser, instead the submit button is bound to a method that makes the ajax calls and provides the info to the server which then shoots off the email (or queues it) and the server responds with something like { error: false, message: 'Your message was sent successfully' } which then causes your app to display this response automatically because of declaritive programming (no more calls like this $('$message').text(response.message).show() )

2. Displaying content from database (in any manner using Ajax)

  Yes, that's one of the beauties of angular.  When your data is returned from the server via ajax (json), you bind it to the template and presto the data is displayed.

<ul>
  <li ng-repeat="row in userTable">

     <span ng-repeat="field in row.fields">{{field.name}}</span>
  </li>

</ul>

3. Voice chat, Video chat, Text chat

Yes you can do it.  

Angular gives you the framework to help you organize, even "architect" your javascript into an app that helps prevent spaghetti code, but it does not provide how to do it with built-in easy to use plugins for flash or html5 or whatever other embedded software you might need.  You will be writing 'directives' and 'services' and 'factories' and similar to provide this functionality. 

Even if you know a jQuery plugin to do it, you will implement it in a fashion that will require additional work to keep it in the "scope" of angular.

Instead of $(document).ready(function(){ $('button#send').click(function(){ $.ajax() }) })
You would do something like:

<button ng-click="send()">Send</button>

$scope.send = function(){
  EmailService.send({ ...data... }); //services are a good place to define ajax calls

}

4. Can contain Javascript/JS Libraries, jQuery, CSS, HTML5, jQuery-Ajax

You can include just about any javascript library, within reason.  Some would be counter-intuitive, but angular has most what you need to get started and a growing set of extended functionality like Twitter Bootstrap modules: http://angular-ui.github.io/bootstrap/ 

If you are set on being able to pull in whatever library you want and then just making a single initialization call like with many jQuery plugins out there then Angular probably isn't for you.  

It works with all CSS and HTML5.  

You will need to give up jQuery Ajax calls and rewrite them using angular's $http or $resource.  Angular won't prevent you using jQuery ajax but it's counter-productive and in the long run you'd see why.

5. Big

You will need to do some research on this and look into lessons others have learned from as well as directory structure for large apps.

CLOSING NOTES: Personally, angular has been totally worth it.  But prepare for a learning curve in the way you think about writing html and javascript.  Angular is declarative.  You are going to learn a new way to program website and  you will have to drop some of the ways you think about writing web pages coming from jQuery and .NET.

[Arshad Nazeer]

Everybody is talking about developing Single Page Application using AngularJS but is it possible to develop Multi Page Application using AngularJS?

[Arshad Nazeer]

How is Single Page Application superior than Multi Page Application when both are developed using AngularJS? In SPA complete page is  loaded at once but in MPA only a page that the user needs is loaded. This reduces page size and the page gets loaded quickly.

[Mauro Servienti]

IMHO it is not superior at all, they are 2 face of the same medal, in the end as the application become larger and larger you end app with multiple single page applications generally divided by context. Dividing by context is acceptable because for the user it acceptable to reload everything when changing context.

Never, IMHO, approach a problem thinking in term of performances, use cases and the user mental model are much more important for the success of the application, performances tweaks comes after.

.m

—

(no keyboard keys have been killed due to the really annoying OSX spell checker)

On 23/feb/2014, at 18:05, Arshad Nazeer <arshadna...@gmail.com> wrote:

How is Single Page Application superior than Multi Page Application when both are developed using AngularJS? In SPA complete page is  loaded at once but in MPA only a page that the user needs is loaded. This reduces page size and the page gets loaded quickly.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.

[Luke Kende]

You asked about developing a web application.  When we talk about web "apps" these days we tend to mean an SPA.

Using angular just for javascript functionality and delivering each page from the server can work, but I believe defeats the purpose of it's design.  

I agree with Mario in terms of "context" and having multiple SPAs where needed, but an SPA is superior when you are writing a very specific interface, like say Gmail, or a spreadsheet UI, or maybe a social network like Facebook.   These cases are when the app doesn't need to have the complete page redrawn, only certain areas change, like switching from a list of emails to showing one specific message.  (Can you imagine Facebook or Gmail loading a new page for every view switch?)

Using angular creates a separation between the generating the view (client side) and generating the data needed for the view (server-side).  The server does not need to know about html and and html has no sprinkling of C#, PHP, or other servers-side language.  I find this to be a superior way to write html personally.  It even abstracts the the back-end such that page doesn't care where it gets its data as along as the ajax call returns the json data needed.

In terms of performance, the app doesn't load everything, only the index.html file with css and javascript resources, then your home page specifies a view and only that template is loaded (a small html file typically).  Once an action causes a change in view only then is a new template loaded via XHR.  The only added time is if the data must be retrieved to populate the view, but if the app already has it in javascript then this much quicker than loading it from the server (especially if someone has a slow connection).

In summary, if you have a focused context for an application and want to use a browser as the UI, then an SPA (and Angular) have benefits for the UX, speed, and code organization.  

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/kam-jeAACSQ/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.

[Kevin MacDonald]

On a slightly different note I suggest considering Service Stack over WCF for server-side web services. WCF is bloated and buggy.

[Mauro Servienti]

WCF is everything other then buggy, it simply really hard to access it via JavaScript, a PITA.

Sent from my Amazing Yellow Lumia, typos are guaranteed ;-)

---

From: Kevin MacDonald
Sent: ‎24/‎02/‎2014 17.59
To: ang...@googlegroups.com
Subject: Re: [AngularJS] Is AngularJS good choice for my project with WCF, SQL Server

[Kevin MacDonald]

It's also really hard to figure out what WCF is doing because it is (I believe) an ISAPI filter, and most of it is running deep under the covers below where .NET has access to it. I abandoned WCF because it was producing mangled JSON which I could not fix or debug, and it turned out months later that there was a known bug where when logging is turned on in certain situations this bug occurs. 

Service Stack is much cleaner, and is designed specifically for web services, unlike WCF which in the Microsoft tradition seems to be designed to be everything for everybody

Kevin

On Mon, Feb 24, 2014 at 9:14 AM, Mauro Servienti <ma...@topics.it> wrote:

WCF is everything other then buggy, it simply really hard to access it via JavaScript, a PITA.

Sent from my Amazing Yellow Lumia, typos are guaranteed ;-)

---

From: Kevin MacDonald
Sent: 24/02/2014 17.59

[Mauro Servienti]

it is not, an Isapi filter, WCF is a pretty amazing piece of software I know really well, I developed tons of WCF services, it has amazing extensions points and an amazing server and client pipeline.

At a certain point someone has thought that since rest is coming back to life WCF must support also rest/Json but is is not intended to do that, that's why now we have WebAPI in the asp.net stack.

The first implementation of the rest/Json stack in WCF, via the infamous WebHttpBehavior, was a PITA, that's it. Luckily after that failure someone has thought that creating a brand new stack is a good choice instead of trying to built something on top of WCF.

.m

Sent from Windows RT

[Josiah Solomon]

Go for it, totally possible. I am using msnodesql to connect to ms sql server, and rest api via express. works great! Only Microsoft product in the mix is SQL server backend. I love it!

The only challenge I currently have is jsonizing the data coming from sql via express.js.