angular 学习笔记

最新推荐文章于 2025-02-05 11:13:10 发布

aimyxmu

最新推荐文章于 2025-02-05 11:13:10 发布

阅读量158

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/aimyxmu/article/details/52265822

本文介绍了一个使用AngularJS创建包含两个独立模块的应用示例。通过不同的模块实现页面间的解耦，并展示了如何利用$parse服务解析表达式的具体实现。

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

1. 多个module，需要调用angular.bootstrap(document.documentElement, ['myApp','myApp1']);

<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8" />

<title>??</title>

<!--<script type="text/javascript" src="http://s.zys.me/js/jq/jquery.js"></script>-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

</head>
<body>

<div ng-app='myApp'>
<div ng-controller="MyController">
<input ng-model="expr" type="text" placeholder = "Enter an expression"/>
<h2>{{parsedValue}}</h2>
</div>
</div>

<div ng-app='myApp1'>
<div ng-controller="MyController">
<input ng-model="expr" type="text" placeholder = "Enter an expression"/>
<h2>{{parsedValue}}</h2>
</div>
</div>

<script type="text/javascript">
angular.module('myApp', []).controller('MyController',function($scope,$parse){
	$scope.$watch('expr', function(newVal, oldVal, scope){
		if(newVal !=oldVal){
			var parseFun = $parse(newVal);
			$scope.parsedValue = parseFun(scope);
		}
	})
});
angular.module('myApp1', []).controller('MyController',function($scope,$parse){
	$scope.$watch('expr', function(newVal, oldVal, scope){
		if(newVal !=oldVal){
			var parseFun = $parse(newVal);
			$scope.parsedValue = parseFun(scope);
		}
	})
});
 angular.bootstrap(document.documentElement, ['myApp','myApp1']);

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