You can move a user from a server-rendered MVC page to an AngularJS page in MDriven Turnkey while preserving work performed by the MVC action; this page is for developers implementing that MVC-to-Angular navigation flow.
Before you begin
Read Documentation:Turnkey MVC Controllers before implementing this flow. It describes the controller classes used by Turnkey, including EcoController, ModelDrivenControllerBase, and TurnkeyController_Base.
This page concerns navigation from an MVC request to an AngularJS streaming page. It does not describe how to build an MVC page or render a ViewModel in a standalone MVC application. For those subjects, see Documentation:MVC and Documentation:Render MVC ViewModel without turnkey.
MVC renders data on the server and returns a complete page response. An AngularJS page uses Turnkey's streaming interface to work with its ViewModel after the page is loaded.
An EcoSpace is the persistence context used by the controller and ViewModel. When an MVC action has performed work that must still be available after navigation, the AngularJS side must continue with that state. For example, an MVC action may create or update business-object data before redirecting the user to an AngularJS ViewModel that displays or edits that data.
MVC-to-Angular navigation therefore uses two EcoSpaces:
- The MVC EcoSpace serves the MVC request and contains the state used while the MVC action runs.
- The AngularJS streaming EcoSpace serves the AngularJS page through the streaming API.
The existing MVC EcoSpace is handed over to the streaming API so that work done during the MVC action is available in the AngularJS EcoSpace. This handover provides action continuity: the user does not arrive at the AngularJS page with an unrelated state after the MVC action has changed or prepared data.
Request and redirect sequence
Use an MVC redirect as the transition between the MVC page and the AngularJS page. The browser, not the server, makes the request for the redirected page.
- The browser requests the current MVC page.
- The MVC controller receives the request and runs its action using the MVC EcoSpace.
- The MVC action performs any required work that the next page depends on.
- The MVC controller returns a redirect response to the browser for the target MVC route or page.
- The browser requests that new MVC page.
- That MVC page redirects the browser to the AngularJS page.
- The AngularJS page connects through the streaming API and continues with the handed-over EcoSpace state.
| Stage | Request handler | Result |
|---|---|---|
| Current page | MVC controller | Runs the MVC action in the MVC EcoSpace. |
| First redirect | Browser follows the MVC redirect | Requests the target MVC page. |
| Angular transition | Target MVC page | Redirects the browser to the AngularJS page. |
| Angular page | Streaming API and AngularJS client | Uses the continued state made available from the MVC action. |
Implementation guidance
Keep the MVC action focused on preparing the state that the AngularJS ViewModel needs. Then return the redirect rather than attempting to render the AngularJS interaction as part of the original MVC response.
For example, if an MVC action prepares data that a user must edit in an AngularJS ViewModel:
- Let the MVC controller receive the request.
- Perform the preparation in the MVC action.
- Redirect the browser to the MVC page that performs the AngularJS redirect.
- Let that page redirect to the AngularJS page.
- Verify that the AngularJS page receives the state prepared by the MVC action through the streaming flow.
Use the Turnkey controller support rather than treating this as an ordinary unrelated MVC redirect. Turnkey MVC Controllers documents the controller support for persistence, ViewModels, actions, navigation, and the streaming API. In particular, EcoController provides an EcoSpace-based MVC controller and includes a mechanism for storing the EcoSpace on TempData during a redirect.
MVC and AngularJS are different rendering modes
Choose the rendering mode based on the interaction that follows navigation:
| Rendering mode | How data is bound | Use it when |
|---|---|---|
| MVC | The server renders the page with data bound on the server. | You need a server-rendered page; MVC can render large amounts of data quickly. |
| AngularJS | The page contains AngularJS binding commands and the client communicates with the Turnkey streaming interface. | Users need detailed editing feedback and a more responsive interaction. |
Turnkey uses MVC for its index and login pages and defaults to AngularJS for other pages. A ViewModel can be rendered with MVC by setting its MVC=true tagged value. See Documentation:MVC for MVC behavior and its differences from AngularJS, including row-click action behavior.
Do not confuse MVC-to-Angular navigation with serverside actions. Serverside actions delegate work to MDrivenServer and can run without a logged-in user. MVC-to-Angular navigation is a browser-driven flow: the browser follows redirects and the AngularJS client initiates communication with the streaming layer.
Also account for client connection behavior when the AngularJS page starts using streaming. See Documentation:Turnkey Client Timeout for Turnkey client timeout guidance.