AngularJS: Single route app architecture

Question

Trying to determine how to take advantage of Angular's toolset for a problem I'm trying to solve.

My application will be a single page application, but it will also only have one route. There is no other "state" as in URL state at all. As far as I can tell, you can take advantage of controllers and views in a 1:1 relationship with a route.

What I would like is to have Controller+View combinations for components on the page. (A component could be a widget, modal window, etc.).

Is there any way to leverage Angular in this situation?

Note: I have seen https://github.com/angular-ui/ui-router, but this still relies heavily on creating "states" of the application and tying it to a URL.

What you're describing is a 'directive'. An angular directive has a view, a controller, and even its own scope (depending on how its set up) - it can be considered a self-contained widget. I don't recommend using routes for widgets. — Michael Kang
– Michael Kang, Commented Jul 2, 2014 at 1:51

Sean Walsh · Accepted Answer · 2014-07-02 01:33:21Z

To include HTML partials, you can use the ng-include directive. This can be coupled with the ng-controller directive in a few different ways:

You can nest an element with ng-include inside an ng-controller:

<div ng-controller="testCtrl">
  <div ng-include="'view.html'"></div>
</div>

You can include an ng-controller directive inside an included partial:

<!-- index.html -->
<div ng-include="'view.html'"></div>

<!-- view.html -->
<div ng-controller="testCtrl">
  <p>{{ helloworld }}</p>
</div>

You can also combine ng-include and ng-controller directives on the same element:

<div ng-controller="testCtrl" ng-include="'view.html'"></div>

Please note that in each of the examples above, the string literal in the ng-include directive is wrapped in single quotes - this is because the directive expects an expression.

Depending on what you're trying to accomplish, you may need to utilize one or more of these techniques. I also expect you'll need to work heavily with directives (for example, you can use the UI Bootstrap modal), which can have their own controller as well.

I set up a Plunker here with a couple working examples of the ng-include options listed above, including swapping the included template dynamically.

I can't speak to the feasibility of actually building a production application like this, but it appears to be possible, at least on first glance.

Collectives™ on Stack Overflow

AngularJS: Single route app architecture

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related