Question

我尝试使用新路由器并使用angular 1.4将多个组件添加到同一视口中（如果可能）。这是我的例子

＆＃13;

 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" 
                }
        } 

               ]);
    });

＆＃13;

<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>

＆＃13;

使用Angular中的新路由器是否可以实现？我们希望能够在新组件中使用，而无需在index.html中添加更多视口。不是很痛苦，但我认为它更有效率。

具有新角度路由器的同一视口中的多个组件。

0 个答案: