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

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

1	`<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>