I'm trying to add multiple components to the same viewport, if possible, with the new router and using angular 1.4. Here's my example
var module = angular.module("CougsApp", ["ngNewRouter", "CougsApp.nav", "CougsApp.headlines", "CougsApp.social", "CougsApp.relatedstories", "CougsApp.footer"]);
module.controller("MainController", function ($scope, $router) {
$scope.title = "This is demo of application";
$router.config([
{
path: "/",
component: {
navViewPort: "nav",
contentViewPort: "headlines",
contentViewPort: "social",
bottomContentViewPort: "relatedstories",
footerViewPort: "footer"
}
}
]);
});<body ng-app='CougsApp' ng-controller="MainController">
<nav class="navbar navbar-default top-main-menu navbar-fixed-top" ng-viewport="navViewPort"></nav>
<div class="container home-stream">
<div class="row">
<div class="headlines-stream col-md-9">
<div ng-viewport="contentViewPort"></div>
<div ng-viewport="bottomContentViewPort"></div>
</div>
<div class="social-stream feed col-md-3">
<div ng-viewport="rightsideViewPort"></div>
</div>
</div>
</div>
<div class ="container-fluid footer footer_image" id="footer_image" ng-viewport="footerViewPort">
</div>
</body>Is this even possible with the new router in Angular? We want to be able to slip in new components without having to add more viewports into the index.html. Not a huge pain to do but I would think it's more efficient.