给定
绝对是Angular的新手，他想使用"合成"的概念，其中主页包含许多小网页部分。
我一开始只创建了一个Header部分，如下所示，它可以完美绑定。
<html>
<body >
<div class="row" ng-app="HeaderModule" ng-controller="HeaderController">
<div class="col-lg-12">
<h1 class="page-header">
{{header.Title}}
</h1>
<ol class="breadcrumb">
<li class="active">
<i class="fa fa-dashboard">Some Data Here</i>
</li>
</ol>
</div>
</div>
</body>
</html>
<script src="../../lib/angular/angular.min.js"></script>
<script>
angular.module('HeaderModule', [])
.controller('HeaderController', ['$scope',
function ($scope) {
$scope.header = { "Title": "Pretty Good, We see the binding work if this page is alone, by itself" }
}])
</script>
但是Angular不希望有多个ng应用程序声明，所以我删除了HTML和Body以及首页的ng应用程序的声明。
<div class="row" ng-controller="HeaderController">
主页面看起来是这样的，并且在没有页眉的情况下运行良好。第一位Div宣布申请如下。
<div id="wrapper" ng-app="TestResultsApp">
JavaScript逻辑如下所示。
angular.module('TestResultsApp', [])
.controller('CardsController', ['$scope',
function ($scope) {
$scope.results = {
'FirstCard': '12',
'SecondCard': '3',
'ThirdCard': '5',
'CardsSummary': '20'
}
}
])
现在我想添加Header页面，但如果可能的话，请将控制器逻辑保留在那里。或者，我也可以将JavaScript拆分为一个文件，但仍然希望由Header页面（单一责任主体）进行引用。。。
最好的方法是什么
以下是我迄今为止所尝试的：
使用HTML5导入（webcomponents），我已经成功地导入了Header页面，但Angular在那里找不到控制器逻辑。如果我在首页中拉出ng应用程序声明，我不知道如何创建一个控制器，它被"吸入"到主ng应用程序中。。。
请告知。
ng-app。之后，您需要手动引导页面上的ng-app。
有关工作示例，请参阅此Plunker
angular.module('app1', []).controller('ctrl1', ['$scope', function ($scope) {
$scope.title = 'This is app1 ctrl1';
}]);
angular.module('app2', []).controller('ctrl1', ['$scope', function ($scope) {
$scope.title = 'This is app2 ctrl1';
}]);
angular.module('app3', []).controller('ctrl3', ['$scope', function ($scope) {
$scope.title = 'This is app3 ctrl1 title';
$scope.title3 = 'This is app3 ctrl1 title3';
}]);
angular.bootstrap(document.getElementById("app1"), ['app1']);
angular.bootstrap(document.getElementById("app2"), ['app2']);
angular.bootstrap(document.getElementById("app3"), ['app3']);
但实际上，坚持使用一个ng-app并将角度控制器与指令和组件一起使用可能是一个更好的主意。
通过随机出现找到您的另一个问题。问题是你正在实例化两个不同的应用程序。您有angular.module('TestResultsApp', [])和angular.module('HeaderModule', [])。你应该对这两个部分使用相同的应用程序。在您首先验证应用程序的地方，使用angular.module('TestResultsApp', [])，然后在控制器中使用angular.module('TestResultsApp').controller(...)。这将把控制器分配给相应的应用程序。请注意第二个中没有括号。无论何时添加方括号，都是在再次实例化Angular。
老实说，如果你想要一种将组件的html模板及其javascript混合在一起的模式，你最好看看react和JSX。
也就是说，如果你将这些元素中的每一个声明为指令或组件，你就可以做一些类似的事情
angular.module('myApp') //note we're not declaring it here, just referencing it
.component('header', {
controller: function() { /* controller here */ }
template: '<div>{{$ctrl.foo}}</div>'
});
如果你正在使用babel或有权访问backtick，你可以很容易地创建一个多行字符串，它看起来与你想要的非常相似，它只是将html模板放在一个字符串中。
然后，您只需要将所有内容打包到一个大文件中，并提供一个入口点。