2

Angularjs を使用してヘッダーとコンテンツを含む MVC アプリケーションがあります。

Content で ng-app を定義し、$routeProvider を使用してコンテンツ ページを読み込みます。これはうまくいっています。

コンテンツ領域にページを表示したい場所からヘッダーにリンクがあります-これはng-appの外にあります。一番上に ng-app を設定せずにこれを行うにはどうすればよいですか? また、多くのマスター ページ Web サイトはこの 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

あなたの質問が正しく理解できたら、Angular ルートにモジュール性が必要です。これを実現するために ui ルーターを使用appできapp1ます。 sk5EmMWQgcIfYlOteWtt、それがあなたが探しているものでない場合はお知らせくださいapp2

(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 に答える