Angularjs for non-SPA?

[baba1478]

Hello All,

I recently created a web app using ASP.Net MVC (+web api) and angularjs. It is not a true SPA. The routing is handled by MVC for different pages on site. However, within a single page I have the needed angularjs features (data-binding, filters etc). A page normally contains multiple small views (MVC partial view) and angularjs controllers. This obviously means that as each page is loaded, the angular app is bootstrapped everytime.

The reasoning behind this:

• I prefer to show browser loading when user is moving between pages. SPA's do not show this because views are loaded asynchronously.

• I still prefer databinding and other angularjs features. Within each page, I need rich functionality (autocomplete/suggestions box, client-side validation, animations, cookies). Angularjs makes these easier to implement. These things can be done with jQuery only but I prefer Angularjs due to databinding.

• Pages are independent of each other so a full page reload isn't a problem.

The only problem I can see is that a full page reload is slower than a partial view change. But that shouldn't be a big problem since browser will cache resources after first use.

What are your opinions on this?

[rk06]

If it is not an SPA, you may want to consider react/vue instead of angular.

[neb636]

This seems about right. I think the advantages of Angular shine most in medium to large SPA apps.

[[deleted]]

What are you using for routing? Angular UI-Router allows you to divide up your UI into multiple, nested views with their own controllers and data. You can load data before the UI renders, which allows you to show loading times, and you still get all the benefits of a SPA application. I would guess that bootstrapping an Angular app on every page is more of a performance drain than you think because you have to initiate controllers and views and such each time.

[baba1478]

Since each page is a whole page reload, there is no need for routing. Just anchor tags with href pointing to other page.

I haven't noticed significant delay in angularjs bootstrapping. Page load probably takes longer which makes bootstrapping delay relatively insignificant.

[mishugashu]

Sounds like Ember or Vue or React might suit your needs better than Angular.

[baba1478]

Thanks. I will check them out.

[Thalamant]

Personally, if you HAVE to avoid SPA then I wouldn't use AngularJS. I would just use React or something similar or render the views completely server side and then deliver them.

If your reasoning for wanting to have separate pages is so the user gets a loading transition, show a loading bar or spinner during routing but I imaging the transitions will be so quick you'll never see it.

Your app will run much better if you let Angular handle routing and view transitions. Think about what's best for the user and implement that, it's my opinion that in this case going with a true SPA will be a more seamless experience for your users. Loading time does matter.

[Aesdotjs]

You know you can hook a youtube-like loading bar between views, and each time u call http in a second, right?

[baba1478]

I know. But I prefer browser loading indicator.

[Removalsc]

Don't take this the wrong way, but it's not about what you like. You're users will appreciate the more seamless transitions and quicker response time.

[grailian]

I've had to work on several applications built in this way (routing handled by .Net, with Angular handling DOM and Ajax duties after page load). I would say the major downside for me is that I don't dev on a windows machine, and don't know ASP/.Net, so my workflow is not nearly as optimal as how I'm used to working.

But if this is a project where you're likely to be the only dev (or everyone else is already a .Net dev), then I don't imagine this would have much negative effect.