多NG-應用程序共享NG-視圖和$路線

我有標題和內容使用Angularjs MVC應用程序。

我已經定義在內容的NG-應用程序並加載使用$ routeProvider內容的網頁。這工作正常。

我有我想要的顯示內容區中的頁頁眉的鏈接 - 這是NG-應用程序之外。如何在不在頂部設置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' 
     }); 
}]);

來源

2015-01-13 Amanpreet Singh

的添加或刪除多個子模塊或子路線爲什麼你不想設置ng-app在html頁面的頂部？這樣，您可以使用指令在每個頁面上創建一個標題，並將每個頁面的某些信息提供給標題指令。 – Ricconnect

因爲我的網站將有5個模塊，每個模塊10頁。我想創建5 ng-app來分別處理和加載它們。我想在現有的ng-app ng-view中加載Header中的一些鏈接，而不是創建一個新的ng-app。這回答了你的問題了嗎？ –

閱讀ngApp的文檔：每個HTML文檔只能自動引導一個AngularJS應用程序。在文檔中找到的第一個ngApp將用於定義根元素作爲應用程序自動引導。那麼你想做什麼。 – Ved

如果我理解你正確地問，你想在你的模塊化角路線，你可以使用路由器的用戶界面來實現這一點，我基本上創建了一個名爲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是完全相互獨立的，你可以在每個子模塊

來源

2015-12-03 06:30:58

我想要一個設置，其中我的主角應用程序分爲5個不同的子應用程序，根據功能。我想在它們的.config（）方法中分別爲每個子應用定義路由信息，以便routeConfig信息。的一個應用程序不與其他應用程序衝突，代碼易於維護，而不是將所有routingConfig信息放入myApp。此外，我無法訪問您提供的plnkr鏈接。 Jsfiddle將不勝感激。 –

我已更新答案以反映該功能。 –

通俗地說，你能解釋一下stateprovider和routeProvider的區別嗎？何時使用它們中的每一個？每個的優缺點？ –

多NG-應用程序共享NG-視圖和$路線

回答

相關問題