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'
}
}
});
});
No comments:
Post a Comment