Question

鉴于

Angular的绝对新手谁想要使用＆＃34;组合的概念＆＃34;主页面包含许多小网页部分。

我开始只创建一个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-app声明，所以我删除了标题页的HTML和Body以及ng-app声明。

<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拆分为文件，但仍希望引用页面（单一责任主体）...

这样做的最佳方式是什么？

以下是我迄今为止所做的尝试：

使用HTML5导入（webcomponents）我已成功拉入Header页面，但Angular无法在那里找到控制器逻辑。如果我在标题页中提取了ng-app声明，我就不知道如何创建一个能够让人感觉舒服的控制器了。＆＃34;进入主要的ng-app（应用程序）......

请指教。

Answer 1

Angular只会自动引导它找到的第一个ng-app。之后，您需要手动引导页面上的ng-app。

对于一个工作示例，see this 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并将角度控制器与Directives和Components一起使用来实现您想要的目标可能更好。

Answer 2

通过随机发现找到您的其他问题。问题是您要实例化两个不同的应用程序。您有angular.module('TestResultsApp', [])和angular.module('HeaderModule', [])。您应该为两个部分使用相同的应用程序。如果您首先获得应用的证据，请使用angular.module('TestResultsApp', [])，然后在您的控制器中使用angular.module('TestResultsApp').controller(...)。这将把控制器分配给适当的应用程序。请注意第二个中没有括号。无论何时添加括号，都要再次实例化Angular。

Answer 3

老实说，如果你想要一个模式，你可以将一个组件的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或有权使用反引号，你可以很容易地创建一个多行字符串，它看起来非常类似于你想要的，它只是将html模板放在一个字符串中。

然后你只需将所有内容组合成一个大文件并提供一个入口点。

Angular：用它自己的控制器分解页面

3 个答案: