Here is the situation I encountered: I have a MVC application, in layout.cshtml file, I have a header logo and footer logo and I want the logos to be dynamic based on the client information passed in.
Here is my layout page:
In content view, I have another angular controller defined.
However, I always got 'headerCtrl' is not a function error. After google, I found out if in one page, there are more than one Angular apps, you have two options to make it work:
1. Manually bootstrap each app in Angular:
In content view, add manual bootstrap code:
Since we are bootstrapping them manually, make sure to remove all the
2. Inject header and footer apps to main app:
In content view page, using following code to declare the myApp Angular app:
Enjoy coding!
Here is my layout page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>For your security - Mercer.MFA.SharedUI</title>
<base href="~/" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/magic-check.css" />
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<div class="container">
<header ng-app="headerApp" ng-controller="headerCtrl">
<div class="row">
<div class="col-md-6 header_left"><img ng-src="{{headerLogo}}" alt="logo"></div>
<div class="col-md-6 header_right"><!-- Nothing goes in here --></div>
</div>
</header>
<main>
<div class="page">
<div #alertPlaceholder id="alert_placeholder"></div>
@RenderBody()
</div>
</main>
<footer ng-app="footerApp" ng-controller="footerCtrl">
<div class="row">
<div class="col-md-6 footer_left"><p>© 2017 ALL RIGHTS RESERVED.</p></div>
<div class="col-md-6 footer_right"><img ng-src="{{footerLogo}}" alt="logo"></div>
</div>
</footer>
</div>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="~/lib/angular.1.3.6.min.js"></script>
<script>
var headerApp = angular.module('headerApp', []);
headerApp.controller('headerCtrl', ['$scope', function ($scope) {
var customImageUrl = baseUrl + "images/" + sessionStorage.client + "/logo.png";
$.ajax({
url: customImageUrl,
success: function (data) {
$scope.headerLogo = customImageUrl;
},
error: function (data) {
$scope.headerLogo = "images/logo.png";
}
});
}]);
var footerApp = angular.module('footerApp', []);
footerApp.controller('footerCtrl', ['$scope', function ($scope) {
var customImageUrl = baseUrl + "images/" + sessionStorage.client + "/footer.png";
$.ajax({
url: customImageUrl,
success: function (data) {
$scope.footerLogo = customImageUrl;
},
error: function (data) {
$scope.footerLogo = "images/footer.png";
}
});
}]);
</script>
@RenderSection("scripts", required: false)
</body>
</html>
In content view, I have another angular controller defined.
<script>
var myApp= angular.module('myApp', [])
homeApp.controller('homeCtrl', ['$scope', '$http', function ($scope, $http) { ... }]);
</script>
<div id="homePage" ng-app="myApp" ng-controller="homeCtrl" ng-init="init()">
However, I always got 'headerCtrl' is not a function error. After google, I found out if in one page, there are more than one Angular apps, you have two options to make it work:
1. Manually bootstrap each app in Angular:
In content view, add manual bootstrap code:
<script>
var myApp= angular.module('myApp', [])
homeApp.controller('homeCtrl', ['$scope', '$http', function ($scope, $http) { ... }]);
var elHeader= document.getElementByTagName('header');
var elFooter= document.getElementByTagName('footer');
var homeDiv = document.getElementById('homePage');
angular.element(document).ready(function() {
angular.bootstrap(elHeader, ['headerApp']);
angular.bootstrap(elFooter, ['footerApp']);
angular.bootstrap(homeDiv, ['myApp']);
})
</script>
Since we are bootstrapping them manually, make sure to remove all the
ng-app attribute from the HTML page.2. Inject header and footer apps to main app:
In content view page, using following code to declare the myApp Angular app:
<script>
var myApp= angular.module('myApp', ['headerApp','footerApp'])
myApp.controller('homeCtrl', ['$scope', '$http', function ($scope, $http) { ... }]);
</script>
<body ng-app="myApp">
Enjoy coding!
Comments