Javascript angularjs SPA-MVC风格布局

好的，我对AngularJS是个新手，学习曲线非常陡峭

我正在开发一个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>

---

但是在angularjs中，任何关于如何实现这一点的建议都会被广泛接受。根据您的需要，有两种方法可以检测何时

ng include

完成加载：

1） 通过onload属性-用于内联表达式。例：

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

或

使用指令修复此问题

HTML

或：

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

我更新了我的问题，更详细地说明了我想要什么，我基本上希望能够在每个路由

模板URL

中指定一个

布局，您可以通过ng include添加外部html，或者编写一些指令，通过使用angular模块ngSanitize将外部html添加到代码快照中。
<div ng-include="'template.html'" onload="loaded = true"></div>

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

<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);
                    });
                }
            }
        };
    }

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