What is the best way to load partial views in SPA and Angular JS

Question

I have a SPA with 2 sections in the page. Second section of the page keeps changing based on some business logic parameters. It can happen at page load or after page is loaded.

Can we have a place holder where the element is told to load this particular view based on some input ?

Confused with which way to load the partial view(second section) based on the logic.

1) Angular Route -- It might not work correctly as I am trying to load a partial view and not the entire view

2) Need to have 'n' number of ng-includes which sets true or false of a flag and change the view.

3) ng- switch with set of statements and ask the switch to load the respective view based on the value

4) State provider : https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-view

5) A custom directive which decides to load which view based on conditions

One more point to be considered is, Once a view is loaded, the content inside it should be retained even after changing the view. For Example, I have 2 angular partial views. 1st view is loaded and some operations have been performed or some data which is entered by user, then because of other action, view 2 has been loaded. Once completing the action in view2, I am switching back to view1. The data / DOM should be restored from view1 and not a fresh view should be loaded.

Any suggestions will be helpful.

Answer 1

I ran into the same issue while making http://crawfordcomputing.com/AkadineWebOS/#/

It is a single page app, and I am using one singular route. Now the icons on the page are not part of the header where one would normally find a menu they are actually part of the view. I use a master view where all views are loaded to an array $scope.panes[]. Then the ng-repeat loads all views from the array like so:

<div ng-repeat="pane in panes">
    <div id="{{pane.windID}}" style="position: absolute; top: {{pane.x}}; left: {{pane.y}}; border: 2px solid black; min-height: 78px; height: 10px; overflow: hidden">
        <div style="padding:2px; overflow: auto; background-color: grey; border: 1px solid black">
            <span style="float: left; text-align: left" ng-bind="pane.title"></span><span style="float: right; text-align: right" ng-click="closeWindow(pane.objID)">X</span>
        </div>
        <div compile="pane.content" style="position: ablsolute; background-color: white; height: 10px; padding: 5px; border: 1px solid black; overflow: auto;"></div>
    </div>
</div>

So whenever a user loads a view, the html goes into $scope.panes[].content. That html is then compiled via the compile directive. Try clicking an icon in the link I gave. What happens is that the new content is added to the view, and the original content, the icons, remain. I can even load multiple views each with different data, to the same view, and as expected with a windowed system, all views remain on the screen. All this and no state provider. Now I'm sure your app is not windowed, my point is this:

Use an array to store all the data, when you return to view1, load the data from the previously loaded array, instead of reloading from the database or wherever.