前端讲义59_AngularJS模块与控制器

最新推荐文章于 2024-04-22 03:29:22 发布

木生火

最新推荐文章于 2024-04-22 03:29:22 发布

阅读量192

点赞数

分类专栏： Angular

本文链接：https://blog.youkuaiyun.com/msh2016/article/details/90743219

版权

Angular 专栏收录该内容

19 篇文章

订阅专栏

我们知道在HTML中使用ng-app指令，即可定义一个Module（模块）。
日常我们把应用拆分为一个个的小模块，模块之间相互依赖，这样各个功能可以非常方便重用和测试。

模块有两种：
匿名模块
<div ng-app>...</div> AngularJS可自动加载并创建AngularJS模块
命名模块
<div ng-app=" HR_emp">...</div>
此时必须调用Angular对象的module()方法来创建AngularJS模块，如下
<script>
var app = angular.module("HR_emp", []);
</script>

模块添加全局变量与常量
value（name,value）全局变量
constant(name,calue) 全局常量
<script>
app.value("empid", "C10094207");
app.value("name", "木生火");
</script>

一个模块可以包含多个控制器，模块调用controller()方法来注册控制器，可在控制器传入的函数中声明多个参数---所有在控制器内使用的对象都必须在函数参数中声明，如下：
<script>
app.controller("HRCtrl",initEmp);
function initEmp($scope,empid,name) {
$scope.name = name;
$scope.empid = empid;
};
</script>

如果一个页面包含多个模块，默认启动第一个。我们可以调用bootstrap()方法来启动指定模块。该方法需传入两个参数(DOM对象，模块名称)
DOM对象，指将哪个HTML元素启动为AngularJS应用；
模块名称，angular.module（）；方法创建模块
<div id=” div_HR_emp”>
<div ng-controller="HRCtrl">
       员工工号：<input type="text" ng-model="empid" ><p>
   </div>
</div>
<script>
   var app =angular,module(“HR_emp”,[]);
   angular.bootstrap(document.getElenmentById(“div_HR_emp”),[“HR_emp”]);
</script>
启动指定模块的方法一般放在最后，

为便于理解以上要点，演示代码如下

<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<!-- 匿名模块 -->
<div ng-app>
	<div  ng-init="company='日善'">
		公司名称：<input type="text" ng-model="company">
	</div>
</div>
	
	
<p>
<!--命名模块-->
<div id="div_HR_emp" >
	<div ng-controller="HRCtrl">
	员工工号：<input type="text" ng-model="empid" ><p>
	员工姓名：<input type="text" ng-model="name" ><p>
	工号：{{empid}}
	姓名：{{name}}
	</div>
</div>


<script>
var app = angular.module("HR_emp" , []); 
	app.value("empid", "C10094207");
	app.value("name", "木生火");
	app.controller("HRCtrl",initEmp);
	function initEmp($scope,empid,name) {
    $scope.name = name;
	$scope.empid = empid;
    };
angular.bootstrap(document.getElementById("div_HR_emp"), ["HR_emp"]);

</script>

</body>
</html>