angularjs SPA - MVC風格佈局

好吧，所以我對AngularJS非常新，而且學習曲線非常陡峭。angularjs SPA - MVC風格佈局

我正在開發一個AngularJS SPA，已經掌握了基礎知識，我使用ngRoute進行路由選擇，並有一個基本的應用框架。

我打我的下一個絆腳石，這可能是我缺乏AngularJS框架的知識，但我期待實現類似於我的SPA應用程序中的MVC佈局，我正在尋找的是類似於以下內容場景：

的login.html - 沒有佈局，該佈局將在此頁面 Home.html中被定義 - 使用layout.tpl.html和內容的其餘部分被定義在Home.html中

.. 。等等，你會得到一般的id，所以對於Homt.html我會尋找像

<div layout="layout.tpl.html"> 
... rest of content 
</div>

和layout.tpl.html將

<div class="container"> 
    ..layout content for header, left nav, whatever is required 
    <div class="content"> 
    <div layout-content></div> 
    </div> 
</div>

正如我上面說我使用ngRoute所以在我的模塊設置我的路線提供商，我希望達到的

@ { 
Layout = "_Layout.cshtml"; // or Layout = null; 
}

相當於

但在angularjs等如何實現，這將是任何建議大受接待

來源

2015-11-01 Neil Stevens

不存在任何選項，您可以通過NG-包括增加外部HTML或寫一些指令，將使用角模塊ngSanitize添加外部HTML到您的代碼卡。 – Shohel

有兩種方式，當ng-include加載完成後，根據您的需要檢測：

1）通過onload屬性 - 用於內聯表達式。例：

<div ng-include="'template.html'" onload="loaded = true"></div>

2）通過事件$includeContentLoaded該ng-include發射 - 爲應用範圍的處理。例如：

app.run(function($rootScope){ 
    $rootScope.$on("$includeContentLoaded", function(event, templateName){ 
    //... 
    }); 
});

使用指令來解決這個

HTML

<div custom-include url="{{url}}"></div>

指令

app.directive('customInclude', ['$http', '$compile', '$timeout', customInclude]); 
    function customInclude($http, $compile, $timeout) { 
     return { 
      restrict: 'A', 
      link: function link($scope, elem, attrs) { 
       //if url is not empty 
       if (attrs.url) { 
        $http({ method: 'GET', url: attrs.url, cache: true }).then(function (result) { 
         elem.append($compile(angular.element(result.data))($scope)); 
         //after sometime we add width and height of modal 
         $timeout(function() { 
          //write your own code 
         }, 1, false); 
        }); 
       } 
      } 
     }; 
    }

OR：

<div ng-include src="template.html"></div>

來源

2015-11-01 10:46:21 Shohel

我已經更新了我的問題，並詳細介紹了我想要的內容，我基本上希望能夠在每個路徑'templateUrl'中指定一個'佈局'，這怎麼可能與角度 –

angularjs SPA - MVC風格佈局

回答

相關問題