2

我有一个使用 Angularjs 的带有 Header 和 Content 的 MVC 应用程序。

我在 Content 中定义了一个 ng-app 并使用 $routeProvider 加载内容页面。这工作正常。

我在标题中有一个链接，我想在内容区域中显示一个页面 - 这是在 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'
        });
}]);
4

1 回答 1

1

如果我正确理解你的问题，你希望你的角度路线模块化，你可以使用 ui 路由器来实现这一点，我基本上创建了一个名为的主应用程序app，然后创建了两个名为app1and的子应用程序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彼此完全独立，您可以在每个子模块中添加或删除更多子模块或子路由

于 2015-12-03T06:30:58.607 回答