angularJs的作用域对象和控制器，依赖对象，依赖注入

需要注意的是使用$scope，需要使用以下版本

<script src="https://cdn.staticfile.org/angular.js/1.2.29/angular.min.js"></script>

　　

 

 

 代码部分

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>angular作用域对象</title>

	</head>

	<body ng-app="" ng-init="age=20">
      
      
      <!--ng-controller用于指定控制器构造函数，同时会自动创建一个新的域对象$scope,它是$rootScope的子对象-->
      <div ng-controller="MyController">
      	<input type="text" placeholder="姓" ng-model="firstName" />
      	<input type="text" placeholder="名" ng-model="lastName" />
      	
      	<p>第一个输入的姓名为:{{firstName+'-'+lastName}}</p>
      	<p>第二个输入的姓名为:{{getName()}}</p>
      	<p>年龄:{{age}}</p>
      	
      </div>
		
	</body>
	<script src="https://cdn.staticfile.org/angular.js/1.2.29/angular.min.js"></script>
	<script>
		//形参必须是$scope
		  function MyController($scope){
		  	//这里的this就是创建的实例对象
		  	console.log(this);
		  	console.log(this instanceof MyController)
		  	   console.log($scope);
		  	   $scope.firstName='a';
		  	   $scope.lastName='b';
		  	   $scope.getName=function(){
		  	   	return this.firstName+'-'+this.lastName;
		  	   }
		  }
	</script>

</html>

　　依赖对象:完成某个特定的功能需要某个特定的对象才能实现

       

 

 同时上图也叫作声明式依赖注入，即采用函数的形式返回数据，而这些更多的是封装好的方法

代码部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>angularJs依赖注入</title>
	</head>
	<body>
		<button id="btn">点赞</button>
	</body>
	
	<script src="https://cdn.staticfile.org/angular.js/1.2.29/angular.min.js"></script>
	<script>
		window.onload=function (){
			document.getElementById('btn').onclick=function (event){
				alert(event.clientX);
			}
		}
	</script>
</html>

　　

这里对开发的两种方式进行说明，命令式更加注重开发的过程，声明式更加注重执行的结果

 下面举例说明

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>命令式和声明式区别</title>
	</head>
	<body>
	</body>
	<script src="https://cdn.staticfile.org/angular.js/1.2.29/angular.min.js"></script>
	<script>
		var attr=[1,2,3,4];
		var newAttr=[];
		//命令式
		for (var i=0;i<attr.length;i++) {
			var value=attr[i]+10;
			newAttr.push(value);
		}
		console.log("newAttr="+newAttr);
		//声明式
		var firstAttr=attr.map(function(item,index){
			var value=item+20;
			return value;
		})
		console.log("firstAttr="+firstAttr);
	</script>
</html>

　　

 

posted @ 2023-03-06 22:47  板凳哲学家  阅读(28)  评论(0)    收藏  举报