AngularJS 模块-慕源网

AngularJS 模块，AngularJS模块定义了应用于整个HTML页面的应用程序的功能。它有助于连接许多组件。所以它只是一组相关的组件。它是一个容器，由控制器、服务、指令等不同部分组成。

注意：此模块应在普通的HTML文件（如index.HTML）中创建，无需在VisualStudio中为此创建新项目。

如何创建模块：

var app = angular.module("Module-name", []);

在这个[]中，我们可以添加所需组件的列表。通过将创建的模块添加到模块列表中，可以将其与任何标签（如DIV、body等）绑定。

<div ng-app = "module-name">
	The code in which the module is required.
</div>

添加控制器：

app.controller("Controller-name", function($scope) {
    $scope.variable-name= "";
});

在这里，我们可以在控制器中添加任意数量的变量，并在HTML文件中使用它们，在标签的主体中，通过写入以下内容将控制器添加到该标签：

<body>
<div ng-app="Module-name">
	<div ng-controller="Controller-name">
		{{variable-name}}
	</div>

<!-- This wont get printed since its
not part of the div in which
controller is included -->
{{variable-name}}
</div>
</body>

文件中的模块和控制器：虽然我们可以在同一个文件中创建模块和控制器，以及需要它的HTML文件，但是我们可能希望在其他文件中使用这个模块。这将导致代码冗余，所以我们更倾向于分别创建模块，控制器和HTML文件。模块和控制器将使用.JS文件存储，为了在HHTML文件中使用它们，我们必须以这种方式包含它们：

例子：

DemoComponent.js

// Here the Component name is DemoComponent
// so saving the file as DemoComponent.js
app.controller('DemoController', function($scope) {
	
	$scope.list = ['A', 'E', 'I', 'O', 'U'];
	$scope.choice = 'Your choice is: GeeksforGeeks';
	
	$scope.ch = function(choice) {
		$scope.choice = "Your choice is: " + choice;
	};
	
	$scope.c = function() {
		$scope.choice = "Your choice is: " + $scope.mychoice;
	};
});

模块名称：DemoApp.js

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

index.html 文件

<!DOCTYPE html>
<html>

<head>
	<title>
		Modules and Controllers in Files
	</title>	
</head>

<body ng-app="DemoApp">
	<h1>
		Using controllers in Module
	</h1>
	
	<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
	</script>
	
	<script src="DemoApp.js"></script>
	<script src="DemoController"></script>
	
	<div ng-app="DemoApp" ng-controller="DemoController">
		Vowels List : <button ng-click="ch('A')" >A</button>
		
		<button ng-click="ch('E')" >E</button>
		<button ng-click="ch('I')" >I</button>
		<button ng-click="ch('O')" >O</button>
		<button ng-click="ch('U')" >U</button>
		
		<p>{{ choice }}</p>
	
		Vowels List :
		<select ng-options="option for option in list"
			ng-model="mychoice" ng-change="c()">
		</select>
		
		<p>{{ choice }}</p>
	</div>
</body>

</html>

输出：

注意：它确保模块和组件文件在同一个文件夹中，否则提供它们保存和运行的路径。

模块中的指令：要在模块中添加指令，请执行以下步骤：

创建一个模块：

var app = angular.module("DemoApp", []);

创建指令：

app.directive("Directive-name", function() {
    return {
        template : "string or some code which is to be executed"
    };
});

例子：

<!DOCTYPE html>
<html>

<head>
	<title>
		Modules and Controllers in Files
	</title>	

	<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
	</script>
</head>
	
<body>

<div ng-app="GFG" w3-test-directive></div>

<script>
var gfg_app = angular.module("GFG", []);
gfg_app.directive("w3TestDirective", function() {
	return {
		template : "Welcome to GeeksforGeeks!"
	};
});
</script>

</body>
</html>

输出：

Welcome to GeeksforGeeks!

注意：在这里，任何要打印的内容都不应该放在调用指令的DIV中，因为它会被模板中的代码覆盖。

AngularJS 模块

常见问题FAQ

慕源网普通

发表评论取消回复

常见问题FAQ

慕源网 普通

发表评论 取消回复

相关推荐

慕源网普通

发表评论取消回复