AngluarJS - 多模块开发

angularJS中的多模块开发是指多个module模块开发,步骤为:

1. 确定主模块 var app=angular.module('myApp',[]);
2. 其他的子模块添加到主模块后面的中括号中 
　 var app=angular.module('myApp',['myApp1','myApp2']);
3. 创建子模块 var app1=angular.module('myApp1',[]);
   注意:子模块所在的标签必须写在主模块标签的内部

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
	</head>
	<body ng-app="myApp" ng-controller="myCtrl">
		<input type="text" ng-model="text"/>
		{{text}}
		<div ng-app="myApp1" ng-controller="myCtrl2">
			<input type="text" ng-model="text1"/>
			{{text1}}
		</div>
		<runoob-directive></runoob-directive>
		<script>
		var myApp1 = angular.module("myApp1",[]);
		myApp1.controller('myCtrl2', function($scope){
			$scope.text1="这是子模块myApp1"
		})
		myApp1.directive("runoobDirective", function() {
			return {
				template : "<h1>自定义指令!</h1>"
			};
		});
		var app = angular.module("myApp",['myApp1']);
		app.controller("myCtrl",function($scope){
			$scope.text="这是主模块myApp";
		});
		</script>
	</body>
</html>

显示：

注意 ：如果只需要指令功能，不需要和页面进行交互，则可以不配置ng-app，直接使用模块即可：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
	</head>
	<body ng-app="myApp" ng-controller="myCtrl">
		<runoob-directive></runoob-directive>
		<script>
		var myApp1 = angular.module("myApp1",[]);
		myApp1.directive("runoobDirective", function() {
			return {
				template : "<h1>自定义指令!</h1>"
			};
		});
		var app = angular.module("myApp",['myApp1']);
		</script>
	</body>
</html>

另参考:https://www.cnblogs.com/trustnature/articles/9600116.html  通过路由 实现虚拟模块与页面交互。

posted on 2018-09-06 10:02  TrustNature  阅读(8)  评论(0)    收藏  举报