页面中的多个 ng-app

我刚刚开始学习角 JS，并创建了一些基本的样本，但我被困在下面的问题。

我已经创建了2个模块和2个控制器。

shoppingCart -> ShoppingCartController
namesList -> NamesController

每个控制器都有相关联的视图。第一个视图呈现良好，但第二个视图不呈现。没有错误。

Http://jsfiddle.net/ep2sq/

请帮我解决这个问题。

此外，是否有可能在 View 中添加控制台，以检查从 Controller 传递的值。

例如，在下面的 div 中，我们可以添加 console.log 并输出控制器值

<div ng-app="shoppingCart" ng-controller="ShoppingCartController">
</div>
244475 次浏览
小开

要在 HTML 文档中运行多个应用程序，必须使用 Angular bootstrap ()手动引导它们

超文本标示语言

<!-- Automatic Initialization -->
<div ng-app="myFirstModule">
...
</div>
<!-- Need To Manually Bootstrap All Other Modules -->
<div id="module2">
...
</div>

JS

angular.
bootstrap(document.getElementById("module2"), ['mySecondModule']);

原因是每个 HTML 文档只能自动引导一个 AngularJS 应用程序。文档中找到的第一个 ng-app将用于定义根元素，以自动引导为应用程序。

换句话说，虽然在技术上每个页面可以有多个应用程序，但是 Angular 框架只会自动实例化和初始化一个 ng-app 指令。

小开
最佳答案

所以基本上就像 Cherniv 提到的那样，我们需要引导这些模块，以便在同一个页面中包含多个 ng-app。非常感谢所有的投入。

var shoppingCartModule = angular.module("shoppingCart", [])
shoppingCartModule.controller("ShoppingCartController",
function($scope) {
$scope.items = [{
product_name: "Product 1",
price: 50
}, {
product_name: "Product 2",
price: 20
}, {
product_name: "Product 3",
price: 180
}];
$scope.remove = function(index) {
$scope.items.splice(index, 1);
}
}
);
var namesModule = angular.module("namesList", [])
namesModule.controller("NamesController",
function($scope) {
$scope.names = [{
username: "Nitin"
}, {
username: "Mukesh"
}];
}
);
angular.bootstrap(document.getElementById("App2"), ['namesList']);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>


<div id="App1" ng-app="shoppingCart" ng-controller="ShoppingCartController">
<h1>Your order</h1>
<div ng-repeat="item in items">
<span>\{\{item.product_name}}</span>
<span>\{\{item.price | currency}}</span>
<button ng-click="remove($index);">Remove</button>
</div>
</div>


<div id="App2" ng-app="namesList" ng-controller="NamesController">
<h1>List of Names</h1>
<div ng-repeat="_name in names">
<p>\{\{_name.username}}</p>
</div>
</div>

小开

您可以直接使用 angular.bootstrap()... 问题是您失去了指令的好处。

首先，您需要获得对 HTML 元素的引用，以便引导它，这意味着您的代码现在耦合到您的 HTML。

其次，这两者之间的联系并不明显。使用 ngApp，您可以清楚地看到哪些 HTML 与哪个模块相关联，并且知道在哪里查找这些信息。但是可以从代码中的任何地方调用 angular.bootstrap()。

如果你打算这样做，最好的方法是使用一个指令。我就是这么做的。叫做 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>

你可以从以下网址获得它的源代码:

Http://www.simplygoodcode.com/2014/04/angularjs-getting-around-ngapp-limitations-with-ngmodule/

它的实现方式与 ngApp相同，只是在后台调用 angular.bootstrap()。

小开

您可以将多个模块合并到一个 rootModule 中，并将该模块分配为 N- 应用程序到一个更高级的元素 ex: body 标记。

代号:

    <!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="namesController.js"></script>
<script src="myController.js"></script>
<script>var rootApp = angular.module('rootApp', ['myApp1','myApp2'])</script>
<body ng-app="rootApp">


<div ng-app="myApp1" ng-controller="myCtrl" >
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: \{\{firstName + " " + lastName}}
</div>


<div ng-app="myApp2" ng-controller="namesCtrl">
<ul>
<li ng-bind="first">\{\{first}}
</li>
</ul>
</div>


</body>
</html>
小开

您可以定义一个 Root ng-App，在这个 ng-App 中，您可以定义多个 nd-Controller

    <!DOCTYPE html>
<html>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>


<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}


table tr:nth-child(odd) {
background-color: #f2f2f2;
}


table tr:nth-child(even) {
background-color: #ffffff;
}
</style>


<script>
var mainApp = angular.module("mainApp", []);


mainApp.controller('studentController1', function ($scope) {
$scope.student = {
firstName: "MUKESH",
lastName: "Paswan",


fullName: function () {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});


mainApp.controller('studentController2', function ($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
fees: 500,


subjects: [
{ name: 'Physics', marks: 70 },
{ name: 'Chemistry', marks: 80 },
{ name: 'Math', marks: 65 },
{ name: 'English', marks: 75 },
{ name: 'Hindi', marks: 67 }
],


fullName: function () {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});
</script>


<body>
<div ng-app = "mainApp">
<div id="dv1"  ng-controller = "studentController1">
Enter first name: <input type = "text" ng-model = "student.firstName"><br/><br/> Enter last name: <input type = "text" ng-model = "student.lastName"><br/>
<br/>
You are entering: \{\{student.fullName()}}
</div>


<div id="dv2" ng-controller = "studentController2">
<table border = "0">
<tr>
<td>Enter first name:</td>
<td><input type = "text" ng-model = "student.firstName"></td>
</tr>


<tr>
<td>Enter last name: </td>
<td>
<input type = "text" ng-model = "student.lastName">
</td>
</tr>


<tr>
<td>Name: </td>
<td>\{\{student.fullName()}}</td>
</tr>


<tr>
<td>Subject:</td>


<td>
<table>
<tr>
<th>Name</th>.
<th>Marks</th>
</tr>


<tr ng-repeat = "subject in student.subjects">
<td>\{\{ subject.name }}</td>
<td>\{\{ subject.marks }}</td>
</tr>


</table>
</td>


</tr>
</table>


</div>
</div>


</body>
</html>
小开 
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="shoppingCartParentModule" >
<div ng-controller="ShoppingCartController">
<h1>Your order</h1>
<div ng-repeat="item in items">
<span>\{\{item.product_name}}</span>
<span>\{\{item.price | currency}}</span>
<button ng-click="remove($index);">Remove</button>
</div>
</div>


<div ng-controller="NamesController">
<h1>List of Names</h1>
<div ng-repeat="name in names">
<p>\{\{name.username}}</p>
</div>
</div>
</div>
</body>
<script>
var shoppingCartModule = angular.module("shoppingCart", [])
shoppingCartModule.controller("ShoppingCartController",
function($scope) {
$scope.items = [
{product_name: "Product 1", price: 50},
{product_name: "Product 2", price: 20},
{product_name: "Product 3", price: 180}
];
$scope.remove = function(index) {
$scope.items.splice(index, 1);
}
}
);
var namesModule = angular.module("namesList", [])
namesModule.controller("NamesController",
function($scope) {
$scope.names = [
{username: "Nitin"},
{username: "Mukesh"}
];
}
);
angular.module("shoppingCartParentModule",["shoppingCart","namesList"])
</script>
</html>
小开

在我的例子中，我必须将我的第二个应用程序的引导包装在 angular.element(document).ready中，这样它才能工作:

angular.element(document).ready(function() {
angular.bootstrap(document.getElementById("app2"), ["app2"]);
});
小开 

         var shoppingCartModule = angular.module("shoppingCart", [])
shoppingCartModule.controller("ShoppingCartController",
function($scope) {
$scope.items = [{
product_name: "Product 1",
price: 50
}, {
product_name: "Product 2",
price: 20
}, {
product_name: "Product 3",
price: 180
}];
$scope.remove = function(index) {
$scope.items.splice(index, 1);
}
}
);
var namesModule = angular.module("namesList", [])
namesModule.controller("NamesController",
function($scope) {
$scope.names = [{
username: "Nitin"
}, {
username: "Mukesh"
}];
}
);




var namesModule = angular.module("namesList2", [])
namesModule.controller("NamesController",
function($scope) {
$scope.names = [{
username: "Nitin"
}, {
username: "Mukesh"
}];
}
);




angular.element(document).ready(function() {
angular.bootstrap(document.getElementById("App2"), ['namesList']);
angular.bootstrap(document.getElementById("App3"), ['namesList2']);
});
<!DOCTYPE html>
<html>


<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>


</head>


<body>


<div id="App1" ng-app="shoppingCart" ng-controller="ShoppingCartController">
<h1>Your order</h1>
<div ng-repeat="item in items">
<span>\{\{item.product_name}}</span>
<span>\{\{item.price | currency}}</span>
<button ng-click="remove($index);">Remove</button>
</div>
</div>


<div id="App2" ng-app="namesList" ng-controller="NamesController">
<h1>List of Names</h1>
<div ng-repeat="_name in names">
<p>\{\{_name.username}}</p>
</div>
</div>
<div id="App3" ng-app="namesList2" ng-controller="NamesController">
<h1>List of Names</h1>
<div ng-repeat="_name in names">
<p>\{\{_name.username}}</p>
</div>
</div>




</body>


</html>

小开

下面是一个 HTML 页面中的两个应用程序和一个应用程序中的两个控制器的示例:

    <div ng-app = "myapp">
<div  ng-controller = "C1" id="D1">
<h2>controller 1 in app 1 <span id="titre">\{\{s1.title}}</span> !</h2>
</div>


<div  ng-controller = "C2" id="D2">
<h2>controller 2 in app 1 <span id="titre">\{\{s2.valeur}}</span> !</h2>
</div>
</div>
<script>
var A1 = angular.module("myapp", [])


A1.controller("C1", function($scope) {
$scope.s1 = {};
$scope.s1.title = "Titre 1";
});


A1.controller("C2", function($scope) {
$scope.s2 = {};
$scope.s2.valeur = "Valeur 2";
});
</script>


<div ng-app="toapp" ng-controller="C1" id="App2">
<br>controller 1 in app 2
<br>First Name: <input type = "text" ng-model = "student.firstName">
<br>Last Name : <input type="text" ng-model="student.lastName">
<br>Hello : \{\{student.fullName()}}
<br>
</div>


<script>
var A2 = angular.module("toapp", []);
A2.controller("C1", function($scope) {
$scope.student={
firstName:"M",
lastName:"E",
fullName:function(){
var so=$scope.student;
return so.firstName+" "+so.lastName;
}
};
});
angular.bootstrap(document.getElementById("App2"), ['toapp']);
</script>
<style>
#titre{color:red;}
#D1{ background-color:gray; width:50%; height:20%;}
#D2{ background-color:yellow; width:50%; height:20%;}
input{ font-weight: bold; }
</style>

小开

只有一个应用程序被自动初始化，其他应用程序必须手动初始化如下:

句法:

angular.bootstrap(element, [modules]);

例如:

<!DOCTYPE html>
<html>


<head>
<script src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8" data-require="angular.js@1.5.8"></script>
<script data-require="ui-router@0.2.18" data-semver="0.2.18" src="//cdn.rawgit.com/angular-ui/ui-router/0.2.18/release/angular-ui-router.js"></script>
<link rel="stylesheet" href="style.css" />
<script>
var parentApp = angular.module('parentApp', [])
.controller('MainParentCtrl', function($scope) {
$scope.name = 'universe';
});






var childApp = angular.module('childApp', ['parentApp'])
.controller('MainChildCtrl', function($scope) {
$scope.name = 'world';
});




angular.element(document).ready(function() {
angular.bootstrap(document.getElementById('childApp'), ['childApp']);
});
    

</script>
</head>


<body>
<div id="childApp">
<div ng-controller="MainParentCtrl">
Hello \{\{name}} !
<div>
<div ng-controller="MainChildCtrl">
Hello \{\{name}} !
</div>
</div>
</div>
</div>
</body>


</html>

AngularJS API

小开

我已经修改了您的 jsfiddle，可以将顶部的大多数模块作为其余模块的 rootModule。 下面是 jsfiddle 的更新。

  1. 第二个模块可以注入 RootModule。
  2. 在放置在 Root ng-app 中的 Html 第二个定义的 ng-app 中。

Updated JsFiddle: Http://jsfiddle.net/ep2sq/1011/

小开

使用 angular.bootstrap(element, [modules], [config])手动启动 AngularJS 应用程序(有关更多信息，请参见 引导装置)。

请看下面的例子:

// root-app
const rootApp = angular.module('root-app', ['app1', 'app2']);


// app1
const app1 = angular.module('app1', []);
app1.controller('main', function($scope) {
$scope.msg = 'App 1';
});


// app2
const app2 = angular.module('app2', []);
app2.controller('main', function($scope) {
$scope.msg = 'App 2';
});


// bootstrap
angular.bootstrap(document.querySelector('#app1'), ['app1']);
angular.bootstrap(document.querySelector('#app2'), ['app2']);
<!-- angularjs@1.7.0 -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.min.js"></script>


<!-- root-app -->
<div ng-app="root-app">


<!-- app1 -->
<div id="app1">
<div ng-controller="main">
\{\{msg}}
</div>
</div>


<!-- app2 -->
<div id="app2">
<div ng-controller="main">
\{\{msg}}
</div>
</div>


</div>

小开 

// root-app
const rootApp = angular.module('root-app', ['app1', 'app2E']);


// app1
const app11aa = angular.module('app1', []);
app11aa.controller('main', function($scope) {
$scope.msg = 'App 1';
});


// app2
const app2 = angular.module('app2E', []);
app2.controller('mainB', function($scope) {
$scope.msg = 'App 2';
});


// bootstrap
angular.bootstrap(document.querySelector('#app1a'), ['app1']);
angular.bootstrap(document.querySelector('#app2b'), ['app2E']);
<!-- angularjs@1.7.0 -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.min.js"></script>


<!-- root-app -->
<div ng-app="root-app">


<!-- app1 -->
<div id="app1a">
<div ng-controller="main">
\{\{msg}}
</div>
</div>


<!-- app2 -->
<div id="app2b">
<div ng-controller="mainB">
\{\{msg}}
</div>
</div>


</div>


提交答案