angualr 基础

angular表达式

---

定义（作用）：

    angular表达式是angular基本概念之一，将数据绑定视图的方式（手段）

形式：

1. {{值}} （包括花括号在内才是完整的表达式）
2. js语法，按照js来解析，双花括号；

定义一个控制分俩步：

     1. HTML通过ng-controller="控制器名字"限定控制器的作用范围
     2. JS负责控制的定义；

方法：

     app.controller("控制器名称",[])方法定义,第二个参数是关于控制器的回调函数的写法，或者说是依赖注入的设置；

注意：

$scope：作用域对象；：1. 主要作为限定范围的实现手段
                   2. 作为变量以及方法的依存环境；
                   3. 继承的作用。。。。。

 app.controller("myCtrl1",function($scope){
        $scope.personMan = "JackChen";  //在控制器里面定义了一个变量
     })

scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。

1. ng-app: 指令用于限定以及配合定义angular应用程序；
2. ng-model: 用于把文本输入框的输入值（value）绑定到
   angular的变量（变量的本质实际就是数据）
   注意：文本输入框是代词：a. input常见类型
   b. textarea;
   特点：双向绑定（v-vm-m,m-vm-v）;

<div>
    <input type="text" ng-model='aaa' />
    <p>{{aaa}}</p>
</div>

1. ng-bind: 将数据绑定到视图的一个指令；其作用跟表达式
   基本一致

ng-bind=’a*b’

eg: <p ng-bind="name"></p>

扩充：表达式的作用主要是将数据绑定视图（view,html）

1. ng-init: 初始化一个angular变量(数据)；（作用于html）
   eg:ng-init=”person={name:”LBJ”,age:”31”,teChange:”pangxiebu”}”使用的实行 ng-init=”变量名字=值”；

2. ng-class: 用来动态绑定类名;
   ng-class={“active”:boolean};

   1. ng-show,ng-hide:控制元素的显示与隐藏；
      使用形式： ng-show=”布尔值”； ng-hide相反；

<input type="checkbox" ng-model="key">
        <p ng-show="key">
            //华仔不见了你来找我吧
            <img src="boshu.jpg" alt="">
        </p>
        <div class="cute3" ng-hide="key">

            <img src="huazai.jpg" alt="">

        </div>

1. ng-controller: 这个定义一个控制器的指令；
   控制器：1.（C/VM）负责数据的业务逻辑处理（数据的运算）；
   2. 负责连接M与V；
2. ng-repeat:根据数据源实现遍历；（双向绑定的）

ng-repeat=’ i in var’ $index 索引

 ng-repeat="x in arrs track by $index"

按照索引遍历

function Aaa($scope){

    $scope.dataList = [
        'aaaaa' , 'bbbbb' , 'cccccc' , 'ddddd'
    ];

};
<li ng-repeat=" x in dataList " ng-click=" x=$index ">{{x}}</li>

9.ng-事件=‘处理方式’
关于事件：ng-click,ng-mousemove,ng-mouseenter…..比如窗口事件就不是ng-事件 定义；
ng-事件
使用：

 1. 先在目标元素所在的控制器里面定义相应的方法
 2. 在给目标元素加上ng-事件=“处理方法（）”

<p ng-controller='mas' ng-mousemove='ss()'>cccccccccccccc</p>
app.controller('mas',function($scope){
            $scope.ss=function(){
                alert('s')
            }
        })