CODEWITHSUNDEEP
javascriptangularjs
Steve Horn
Steve Horn

Reputation: 8968

AngularJS: Single route app architecture

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.

Upvotes: 1

Views: 247

Answers (1)

Sean Walsh
Sean Walsh

Reputation: 8344

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.

Upvotes: 2

Related Questions