angular中的多模块处理

最新推荐文章于 2023-11-14 08:59:54 发布

原创最新推荐文章于 2023-11-14 08:59:54 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angular

IT类专栏收录该内容

6 篇文章

订阅专栏

这篇博客介绍了如何在 Angular 中处理多个模块的定义和使用。通过创建`demoApp1`和`demoApp2`两个独立的模块，并分别定义各自的控制器，然后在`demoApp`模块中注入这两个模块，实现了在HTML中通过`ng-app`指令声明并使用这些模块。示例中展示了如何在不同的控制器中定义按钮点击事件，并在浏览器控制台输出相应信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ng-app指令</title>
/**
* 导入angularJs库
* @type {String}
*/
<script src="bower_components/angular/angular.js"></script>
</head>
/**
* 我们一般这样处理angular中的多个模块的定义
* @type {String}
*/
<body ng-app="demoApp">

<div ng-controller="App1Controller">
<input type="button" value="按钮1" ng-click="click1()">
</div>
<div ng-controller="App2Controller">
<input type="button" value="按钮2" ng-click="click2()">
</div>


<script>
//定义模块一
let demoApp1 = angular.module('demoApp1', []);
demoApp1.controller('App1Controller',['$scope', function($scope){
$scope.click1 = function(){
console.log('click1...');
};
}]);
//定义模块二
let demoApp2 = angular.module('demoApp2', []);
//注意此处的 $scope 是 angular 内置的（而非自定义的）。
demoApp2.controller('App2Controller',['$scope', function($scope){
$scope.click2 = function(){
console.log('click2...');
};
}]);
//定义模块三（将在该模块中注入模块一和模块二方便在html中的ng-app边界的声明）
angular.module('demoApp', ['demoApp1', 'demoApp2']);

</script>
</body>
</html>