Question

我使用Angularjs获得了带有Header和Content的MVC应用程序。

我在内容中定义了一个ng-app，并使用$ routeProvider加载内容页面。这很好。

我在Header中有一个链接，我想在内容区域显示一个页面 - 这是在ng-app之外。如果不在顶部设置ng-app，我该怎么办呢？还建议是否有其他方法可以实现相同的目的，因为许多主页面网站仅围绕此UI设计构建。

下面是我的代码，显示了Master.cshtml和app.js.让我知道，我需要提供更多代码 -

Master.cshtml -

@inherits WebViewPage

<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org">
<head>
    <title>@ViewBag.PageTitle</title>

    <script src="~/Scripts/jquery-1.11.1.min.js"></script>
    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/angular-route.js"></script>
    <script src="~/Scripts/angularjs/app.js"></script>

</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <li><a ng-href="#/headerLinkPage1">View cart</a></li>
            </div>
        </div>
    </nav>

    <div class="container-fluid" ng-app="rootApp">
        <div ng-view></div>
    </div>

</body>
</html>

app.js -

var serviceBaseAddress = 'http://localhost/MyWebApi/api/';

var rootApp = angular.module('rootApp', ['ngRoute', 'contentPage1', 'headerLinkPage1'])

.config(['$routeProvider',
function ($routeProvider) {
    $routeProvider.
        when('/contentPage1', {
            templateUrl: '../ContentPage1/Index'
        }).
        when('/headerLinkPage1', {
            templateUrl: '../HeaderLinkPage1/Index'
        }).
        otherwise({
            redirectTo: '/contentPage1'
        });
}]);

Answer 1

如果我理解你的问题是正确的，你想要在角度路线中实现模块化，你可以使用ui路由器实现这一点，我基本上创建了一个名为app的主应用程序，然后是两个名为app1的子应用程序和app2，试试http://plnkr.co/edit/sk5EmMWQgcIfYlOteWtt，如果那不是您想要的，请告诉我

(function() {

  angular.module('app1', [])
    .config(function($stateProvider) {
      $stateProvider
        .state('app1', {
          url: '/app1',
          abstract: true,
          template: '<div ui-view="app1View"></div>'
        })
        .state('app1.child1', {
          url: '/child1',
          views: {
            'app1View' : {
              template: '<div>child 1, app 1</div>'
            }
          }
        })
    })

})();


(function() {

  angular.module('app2', [])
    .config(function($stateProvider) {
      $stateProvider
        .state('app2', {
          url: '/app2',
          abstract: true,
          template: '<div ui-view="app2View"></div>'
        })
        .state('app2.child1', {
          url: '/child1',
          views: {
            'app2View' : {
              template: '<div>child 1, app 2</div>'
            }
          }
        })
    })

})();

因此，您的子模块app1和app2完全相互独立，您可以在每个子模块中添加或删除更多子模块或子路径

多个ng-app共享ng-view和$ route

1 个答案: