Is AngularJS just for single-page applications (SPAs)?

Solution 1:

Not at all. You can use Angular to build a variety of apps. Client-side routing is just a small piece of that.

You have a large list of features that will benefit you outside of client-side routing:

• two-way binding
• templating
• currency formatting
• pluralization
• reusable controls
• RESTful api handling
• AJAX handling
• modularization
• dependency injection

It's crazy to think that all of that "could only be used in a single page app". Of course not.. that's like saying "Jquery is only for projects with animations".

If it fits your project, use it.

Solution 2:

I struggled with the "how" at first with Angular as well. Then one day it dawned on me: "It is STILL javascript". There are a bunch of examples on the ins-and-outs of Angular (one of my favorites along with the book https://github.com/angular-app/angular-app). The biggest thing to remember is to load in the js files just like you would in any other project. All you have to do is make sure the different pages reference the correct Angular object (controller, view, etc.) and you are off and running. I hope this makes sense, but the answer was so simple I overlooked it.

Solution 3:

Maybe my experience will be useful to someone. We split our project logically. One SPA we use for feed, another one to work with the map, another one for editing a user profile and etc. For example we have three apps: feed, user and map. I use it in the separated urls, like this:

https://host/feed/#/top/
https://host/user/#/edit/1/
https://host/map/favorites/#/add/

Each of these applications has it's own local routing mappings between states in the application. I think it is a good practice because each application work only with its own context and load dependencies that it really need. Also, it's practice very good for debug and integration processes.

Indeed, you can very easily make a mix of SPA apps, for example the feed will be url with the angularjs application, the user app with the reactjs and map to the backbone.js application.

In response to your question:

Angular not just for SPAs, Angular play good and fast for SPA applications, but no one bothers to build MPA application of a variety of SPA applications. But thinking about your url architecture don`t forget about SEO availability of your applications.

I also support the idea:

What’s the difference between a project and an app? An app is a Web application that does something – e.g., a Weblog system, a database of public records or a simple poll app. A project is a collection of configuration and apps for a particular website. A project can contain multiple apps. An app can be in multiple projects.

Solution 4:

If all you need is a few pages with client databinding, I'd go with Knockout and Javascript Namespacing.

Knockout is great, especially if you need uncomplicated backward compatibility and have fairly straight forward pages. If you're using 3rd party components, Knockout's custom bindings are straightforward and easy to work with.

Javascript namespacing allows you to keep your code separate and manageable.

var myCo = myCo || {};
myCo.page = {
    init: function(){ ... },
    ...
}

And in a script tag after your other scripts are loaded

<script>
    myCo.init();
</script>

The key is, you use whatever tool you want for when you need it. Need databinding? Knockout (or whatever you like). Need routing? sammy.js (or whatever you like).

Client code can be as simple or complicated as you want it. I tried integrating Angular into a very complicated site with an existing proprietary framework, and it was a nightmare. Angular is great if you're starting fresh, but it has a learning curve and locks you into a very tight workflow. If you don't follow it, your code can get really tangled really fast.