Javascript 一个页面上有多个ng应用程序指令_Javascript_Angularjs_Angularjs Directive

Javascript 一个页面上有多个ng应用程序指令

javascript angularjs

Javascript 一个页面上有多个ng应用程序指令,javascript,angularjs,angularjs-directive,Javascript,Angularjs,Angularjs Directive,我希望能够在一个页面上使用多个ng app=“{angular.module}”指令。我想这样做是为了让我的应用程序更加模块化。我想，如果我能创建angular模块并将其中几个插入到一个文档中，我就可以轻松地将这些模块插入到其他项目中我看到有人说你只能在你的页面上使用一个ng应用程序指令。。。这是真的吗？说“每个视图一个ng应用程序指令”最准确吗我希望不是这样，或者如果是这样的话，仍然有实现高度抽象模块化的最佳方法以下是我的模块/应用程序及其控制器 var searchModj = ang

我希望能够在一个页面上使用多个ng app=“{angular.module}”指令。我想这样做是为了让我的应用程序更加模块化。我想，如果我能创建angular模块并将其中几个插入到一个文档中，我就可以轻松地将这些模块插入到其他项目中

我看到有人说你只能在你的页面上使用一个ng应用程序指令。。。这是真的吗？说“每个视图一个ng应用程序指令”最准确吗

我希望不是这样，或者如果是这样的话，仍然有实现高度抽象模块化的最佳方法

以下是我的模块/应用程序及其控制器

var searchModj = angular.module('searchModule', []);


var controllers = {};

controllers.SearchList = function ($scope){

    $scope.coworkers = [
            {name: 'Joe Bob', city: 'Ukrainia'},
            {name: 'Adam Blobnovski', city: 'Logan' },
            {name: 'Carlos Sanchez', city: 'Deerbushle'},   
            {name: 'Martin Kellerweller', city: 'Uptown'},
            {name: 'John Doe',  city: 'New York City'}
        ];
};

searchModj.controller(controllers);



var fruitModj = angular.module('fruiter', []);



controllers.SomeFruit = function ($scope) {

    $scope.fruits = ['apple', 'banana', 'pear'];

};

fruitModj.controller(controllers);

好的，现在这是我的标记的相关部分

<div ng-app="searchModule">

    <div ng-controller="SearchList">

        Name: 
        <br/>
        <input type="text" ng-model="name" /> 
        <br/>
        <ul>
            <li ng-repeat="coworker in coworkers | filter:name">{{ coworker.name }} - {{ coworker.city }}</li>
        </ul>

        <p>You are searching for <em>{{ name }}</em></p>


    </div>


</div>

<div ng-app="fruiter">
    <div ng-controller="SomeFruit">

        <ul>
            <li ng-repeat="fruit in fruits">{{ fruits }}</li>
        </ul>

    </div>

</div>


姓名：





{{{coworker.name}-{{coworker.city}

您正在搜索{{name}

{{fruits}

我认为，因为它在文档中是第一个，所以我的“searchModule”应用程序工作，而第二个应用程序不工作。当我对第一个应用程序进行注释时，第二个应用程序可以工作。看来我正在证实我最不幸的怀疑。不管如果是这样的话，那么我能记住的使我的项目上的功能尽可能模块化的最佳方法是什么

一个页面上只需要一个

ng应用程序

，但您可以将其他模块作为主

ng应用程序

模块的依赖项插入

var app=angular.module('myNgAppName', ['searchModule']);

这将公开您在

'searchModule'

中的任何指令、控制器等。是的，您每页只需要一个ng应用程序，但您可以创建其他模块并将它们声明为主应用程序的依赖项

var app=angular.module('appModule'); //resuable module

var app=angular.module('myApp', ['appModule']); //in the HTML ng-app="myApp"

因此，您可以将可重用的内容放入appModule中，并在其他项目中使用它。例如，我喜欢将我的路由逻辑（即根据用户的访问级别重新路由用户）放在我在其他项目中重用的模块中

注意：您可能需要查看$provider。$如果您想在ng应用程序（“myApp”）模块的配置方法中使用来自可重用（“appModule”）模块的数据，请提供。

ngApp指令的限制只是该指令的限制，而不是AngularJS本身。Angular允许您将模块与页面中的多个元素关联，甚至允许您将多个模块与每个元素关联

从您的模块中引用其他模块将起作用。另一种可行的方法是使用

angular.bootstrap（）

方法。见：

最后，您可以创建一个类似于

ngApp

的指令，而不受其限制。它的工作方式与标记代码中的工作方式完全相同。我就是这么做的你可以在这里找到代码：

该指令称为

ngModule

。下面是一个代码示例：

<!DOCTYPE html>
<html>
    <head>
        <script src="angular.js"></script>
        <script src="angular.ng-modules.js"></script>
        <script>
          var moduleA = angular.module("MyModuleA", []);
          moduleA.controller("MyControllerA", function($scope) {
              $scope.name = "Bob A";
          });

          var moduleB = angular.module("MyModuleB", []);
          moduleB.controller("MyControllerB", function($scope) {
              $scope.name = "Steve B";
          });
        </script>
    </head>
    <body>
        <div ng-modules="MyModuleA, MyModuleB">
            <h1>Module A, B</h1>
            <div ng-controller="MyControllerA">
                {{name}}
            </div>
            <div ng-controller="MyControllerB">
                {{name}}
            </div>
        </div>

        <div ng-module="MyModuleB">
            <h1>Just Module B</h1>
            <div ng-controller="MyControllerB">
                {{name}}
            </div>
        </div>
    </body>
</html>


var moduleA=angular.module（“MyModuleA”，[]）；
moduleA.controller（“MyControllerA”，函数（$scope）{
$scope.name=“Bob A”；
});
var moduleB=角度模块（“MyModuleB”，[]）；
moduleB.controller（“MyControllerB”，函数（$scope）{
$scope.name=“史蒂夫B”；
});
模块A、B
{{name}}
{{name}}
就模块B
{{name}}

您在一个页面上只需要一个

ng应用程序

，但您可以将其他模块作为主

ng应用程序

模块的依赖项插入。您的应用程序中只需要一个

ng应用程序

。如果要在运行时决定应用程序模块，应使用

angular.bootstrap

。有关详细信息，请参阅。这是正确答案。理想情况下，你应该根据你的需求将你的应用程序分解成多个模块，并将这些模块作为依赖项注入到你的应用程序中