In our use of DNN, we often encounter the need to pass specific context values (such as page id or module-on-page-id) into an AngularJS application. While we have established our own conventions for achieving this, we are interested in hearing about how others approach this in order to determine best practices.
The core issue is that the server-side page possesses information required by the JavaScript. Utilizing WebAPI is not viable, as these values are only known within the page itself and not through a separate request. Some methods I have come across include:
- Utilizing in-view-razor like
href="@Tab.TabId/{{...}}"(although I am not fond of this approach) - Embedding the values in the ng-init attribute such as
ng-init="config = { prop1: '@Tab.TabId' }" - Creating a dynamic module within a separate
<script>tag which contains these values like so:angular.module("config", []).constant('prop1', '@Tab.TabId') - Generating a JSON with razor within the page, and then injecting it as a module into the app using a generic code similar to #3, but with cleaner code re-use
I have encountered all of these methods and have tested them all. Currently, we shy away from option #1 due to concerns about mixing templating languages and the inability to externalize parts of the view. Our current practice involves utilizing #2 for quick-and-simple tasks (albeit somewhat messy), and implementing #3/#4 for larger projects.
Do you have a more effective approach, or which method do you prefer?