Angular JS

例子1： 在输入框中输入信息并动态显示出来：展示它的功能：数据绑定

<input type="text" ng-app ng-model="name">
hi:{{name}} 

例子2：

<div ng-app ng-controller="hi">
       {{one}}
</div>  

<script type="text/javascript">
   function hi($scope){
    $scope.one='你好';
     }
</script>    

例子3：创建一个模块（创建控制器）

注意点1：使用ng-controller指令可以将一个控制器对象附加到DOM元素上

注意点2，当我们创建了模块之后我们的ng-app不需要放到全局上面去

<div ng-app="myapp" ng-controller="mycontroller">{{say}}</div>  

<script type="text/javascript">
   var myapp=angular.module('myapp',[]);
       myapp.controller('controller',function($scope){
           $scope.say='你好Angular js!';
       })
</script>   

例子4：内置指令ng-click 可以将按钮、链接等其他任何DOM元素同点击事件进行绑定 ng-click指令将浏览器中的mouseup事件，同设置在DOM元素上的事件处理程序绑定在一起

<div ng-app="appone" ng-controller="mycontroller">
    <button ng-click="jia(1)">+</button>
    <button ng-click="jian(1)">-</button>
    <h4>提示：{{counter}}</h4>
</div>   


<script>
    var app=angular.module('appone',[]);
        app.controller('mycontroller',function($scope){
            $scope.counter=0;
            $scope.jia=function(a){
                if($scope.counter<9){
                    $scope.counter+=a
                }
               else{
                    window.location.reload(); //刷新页面
                }
            };
            $scope.jian=function(a){
                if($scope.counter>0){
                    $scope.counter-=a
                }   
            }
        })
</script>  

例子5: $watch进行监听时， AngularJS会对表达式或函数进行运算。

这里涉及到一个新的是知识点：$watch——我们根据名字就知道他是做什么用的:
监视——在这里它的作用是对模型中的数据进行监视，并且当数据发生改变的时候做
相应的响应AngularJS为我们提供了一个非常方便的$watch方法， 
它可以帮助我们在每个scope中监视其中的变量

<div ng-app="app">
    <input type="text" ng-model="name">
    <h4>共计：{{coun}}  字</h4>
</div>  

<script>
    angular.module('app',[]).run(['$rootScope',function($scope){
        $scope.coun=0;
        $scope.name='';
        $scope.$watch('name',function(){
            $scope.coun=$scope.name.length;
        })
    }])
</script>    

重要

ng-repeat用来遍历一个集合或为集合中的每个元素生成一个模板实例。
集合中的每个元素都会被赋予自己的模板和作用域。同时每个模板实例的作用域中都会暴露一些特殊的属性。

参数： $index：遍历的进度（ 0...length-1 ）。

$first：当元素是遍历的第一个时值为true。

$middle：当元素处于第一个和最后元素之间时值为true。

$last：当元素是遍历的最后一个时值为true。

$even：当$index值是偶数时值为true。

$odd：当$index值是奇数时值为true。

例子6:ng-repea

<div ng-app="myApp">
    <ul ng-controller="myController">
        <li ng-repeat="stu in people">
            {{stu.name}}
        </li>
    </ul>
</div>  

<script>
    angular.module('myApp',[]).controller('myController',function($scope){
        $scope.people=[
            {name:'张三',age:18},
            {name:'李四',age:19},
            {name:'万物',age:20}
        ]
    })
</script>  

例子7:点击删除按钮，删除数据 
例子8：按照 例子7 ，动态增加一个增加按钮，使数据增加在原数据的后面

<table ng-app="myApp" ng-controller="myController">
        <tr>
            <td>姓名</td>
            <td>年龄</td>
        </tr>
        <tr ng-repeat="stu in people" >
            <td>{{$index}}</td>
            <td>{{stu.name}}</td>
            <td>{{stu.age}}</td>
            <td><button ng-click="del($index)">删除</button></td>
        </tr>  
例子8：      <td><button ng-click="zj()">更多</button></td>
    </table>  
        <input type="text" ng-model="name">

<script>
    angular.module('myApp',[]).controller('myController',function($scope){
        $scope.people=[
            {name:'张三',age:18},
            {name:'李四',age:19},
            {name:'万物',age:20}
        ]
        $scope.del=function(i){
          /*  alert(i);*/
            $scope.people.splice(i,1)
        }   
例子8：  $scope.zj=function(){
          $scope.tianjia={name:$scope.name}
        $scope.people.push($scope.tianjia)
    }
    })
</script>