Angularjs與多個基地的HTML/NG應用程序模板

嘿，
經過相當多的研究，我沒有找到任何好的解決方案，我的問題。Angularjs與多個基地的HTML/NG應用程序模板

在Angular應用程序中，似乎有基礎index.html導入所有腳本和標題等。這還包含ng-app的聲明，它還包含ng-view，它將與$ routeProvider一起使用。我的問題是，我想有不同的基本視兩個獨立的index.html樣的HTML頁面與$ routeProvider加載不同的腳本中使用。

讓我們想象一下我的web應用程序包括兩個主要部分。
1.首頁：標題在頂部，一些選擇，頁腳。頁眉和頁腳將包含在每個視圖中，因此我們將它們放到index.html中。
2.聊天畫面。完全不同的風格，我們希望它沒有現在在index.html中的頁眉和頁腳。

的index.html

<html> 
<head> *Headers be here* </head> 
<body ng-app="MainApp"> 
    <!--header--> 
    <div ng-view></div> 
    <!--footer--> 
    <script> *Scripts be here* </script> 
</body> 
</html>

chatView.html

<html> 
<head> *Headers be here* </head> 
<body ng-app="Chat"> 
    <div ng-view></div> 
    <script> *Scripts be here* </script> 
</body> 
</html>

app.js

angular.module('App', ['ngRoute','MainApp','Chat']) 
    .config(function ($routeProvider) { 
     $routeProvider... 
    }); 
}); 
angular.module('MainApp', ['ngRoute']) 
    .config(function ($routeProvider) { 
     $routeProvider... 
     //Routes to mainApp views. 
    }); 
}); 
angular.module('Chat', ['ngRoute']) 
    .config(function ($routeProvider) { 
     $routeProvider... 
     //Route to chat view. 
    }); 
});

所以這裏的主要問題是，我不知道怎麼了NG-應用程序分成兩個不同的頁面（NG-應用程序），我可以作爲渲染視圖的基本模板使用。我一直在閱讀棱角大多是用於單頁面應用程序，但我相信這應該是可行的，沒有討厭的黑客。
代碼在我app.js例子也並不在我的電腦上，當我試圖運行類似的工作。我不知道如何執行注入 - 我讀了可能無法在整個應用程序中的多個模塊中定義$ routeParams。

，另外，不要把它太容易了，我需要的聊天之間的工作交流 - 主要 - 模塊。兩者都應該存在相同的認證登錄和會話，而這兩者之間的重定向也會出現在大多數時間。

來源

2015-11-02 user3622167

Okey，所以我終於找到了一個令人滿意的解決方案。

馬特指出：「角的一點是要創建單頁的應用程序，這意味着使用一個單一的NG-應用程序，單個的index.html」

這意味着我」 m不能有多個index.html-like文件，但只有一個。所以我需要一個新的方法來解決我的問題，我專注於更好地控制我的index.html文件。爲了做到這一點，我從ngRoutes切換到ui.routes。

將最終溶液以下：

的index.html

<html> 
    <head>***</head> 
    <body ng-app="App"> 

     <div ui-view="header"></div> 
     <div ui-view="content"></div> 
     <div ui-view="footer"></div> 

     <!-- Scripts --> 
    </body> 
</html>

app.js

angular.module('App', [ 
    'ui.router' 
    ]) 
    .config(function ($stateProvider, $urlRouterProvider) { 
     $urlRouterProvider.otherwise('/home'); 

     $stateProvider 
      .state('home', { 
       url: '/home', 
       views: { 
        'header' : { templateUrl: 'views/header.html' }, 
        'content': { templateUrl: 'views/home.html' }, 
        'footer' : { templateUrl: 'views/footer.html' } 
       } 
      }) 
      .state('chat', { 
       url: '/chat', 
       views: { 
        'header' : {}, 
        'content': { templateUrl: 'views/chat.html' }, 
        'footer' : {} 
       } 
      }); 
    });

這樣，我可以保持模板的清潔和乾淨，因爲我的路由器在需要時負責注入頁眉和頁腳。
唯一的問題是index.html仍然加載所有的主頁視圖的聊天腳本，反之亦然，但我想我只需要忍受這一點。

來源

2015-11-02 23:21:21 user3622167

Angular的要點是創建單頁面應用程序，這意味着使用單個的ng-app和單個的index.html。你讓你的最後一段，無論你模塊需要間的通信，這意味着有絕對應該只使用單個ng-app清楚。

你解決這個問題的方法是使用路由來確定哪個模板，控制器此時使用。我更喜歡ui-router，但根據您的要求，$routeProvider也可以。

本質上，在安裝的路線，如/home和/chat，其中，當請求的原因的角加載不同的模板。例如：

$routeProvider 
.when('/home', { 
    templateUrl: 'home.html', 
    controller: 'HomeController', 
}) 
.when('/chat', { 
    templateUrl: 'chat.html', 
    controller: 'ChatController' 
});

如果要分拆的主聊了不同的模塊，都注入$routeProvider，並建立自己的路線，這應該是很好，但你將需要處理的加載父應用模塊其他一切（你在ng-app中的實際東西）。看起來您已經嘗試了這一點，除了您需要將index.html僅作爲您的模板包裝（即不包含任何模板信息本身，不包括加載路由模板的點）。所以你保持同一個主要和聊天。

來源

2015-11-02 00:35:58

謝謝你的回答。它爲我澄清了一些事情。我想將聊天和其他應用程序分解爲不同模塊的原因是，在大多數視圖中，在聊天視圖中會有一個頁眉/頁腳，而在整個設計中它們會有很大的不同。所以最好的方法就是將index.html視圖中的header + footer移出，並在注入的模板中放入更多代碼並在那裏進行壓裂？我希望能夠保留templateUrls的重要輪廓。 – user3622167

Angularjs與多個基地的HTML/NG應用程序模板

回答

相關問題