Friday, May 6, 2016

Angular Template Engineering with DOTnet..


This will show how we can stringify template from CSHTML & pass as a JS variable to leverage:

============== cshtml ====================

<body>

    <header id="mainHeader" ui-view="mainHeader" class="rcorners2"></header>

    <section ui-view="container" class="rcorners2"></section>
    <footer id="mainFooter" ui-view="mainFooter" class="rcorners2"></footer>
    <script src="../../../Resources/Scripts/base/myApp.js"> </script>
    <script type="text/javascript" language="javascript">
    window.onload = function () {
        angular.element(document).ready(function () {
            angular.bootstrap(document, ['myApp']);
        });
    };
@{
    var _htmlHeader = Html.Partial("Header", null);
    var _htmlRawHeader = _htmlHeader.ToString().Replace("\n", String.Empty).Replace("\t", String.Empty).Replace("\r", String.Empty);
    var _htmlFooter = Html.Partial("Footer", null);
    var _htmlRawFooter = _htmlFooter.ToString().Replace("\n", String.Empty).Replace("\t", String.Empty).Replace("\r", String.Empty);
    }
    var _headerTemplate = '@_htmlRawHeader';

    var _footerTemplate = '@_htmlRawFooter';

    </script>


</body>

======================= js ============================


    var app = angular.module("myApp", ['ui.router', 'ngResource']);
               app.controller("DefaultController", function($scope) {
                 $scope.message = "Hello, welcome global";       
               })
    .controller("HeaderController", function($scope) {   
                              $scope.instanceName = 'Core';
                              $scope.Pages = ['1','2','3'];
               })
    .controller("FooterController", function($scope) {$scope.datetime= new Date();});

        $stateProvider
                    .state('home', {
                        url: '',
                        cache: false,
                        views: {              
                            'mainHeader@': {
                                template: $('< div / >').html(_headerTemplate).text(),

                                controller: 'HeaderController'
                            },
                            'mainFooter@': {
                                template: $('< div / >').html(_footerTemplate).text(),

                                controller: 'FooterController'
                            }                           
                        }
                    });
               });
                             

Cooking HTML , its morphology..


1.    Static structures: Cooked HTML fragments from server with data prepopulated (sections rendered on-load)
a.     Quote header
b.    Customer data
c.     DCC
d.    Device summary

2.    Semi Dynamic structures: With data on-load from Server; Browser will cook the HTML (sections rendered on-load)
a.     Location list
b.    Device pricing table

3.    Full Dynamic structures: Browser will pull data & cook the HTML (sections rendered after-load & need an ajax)
a.     Device Import
All the fields are data-bind, so that any point of time, we can leverage it during data postback to server or updating the already rendered structure thru a pure DATA (json) response.

Semi & Full dynamic structures will reduce initial payload significantly..

What sections will go to Semi or Full dynamic structures; has to be chosen with utmost care to reduce concurrent ajax calls on-load.