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风格布局

回答

相关问题