ng- : 指令
    ng-app : 指定angular使用的区域    (一般加在html标签中   <html lang="en" ng-app="myApp">)
    ng-init : 初始化数据
    ng-model : 绑定了标签的值  
双向数据绑定实现:  HTML中呈现的view与AngularJS中的数据是一致的. 修改其一, 则对应的另一端也会相应地发生变化.
    请输入:<input type="text" ng-model="value">
    <h1 ng-bind="value"></h1>   或者  <h1> {{value}} </h1>      后者有闪烁,前者没有
表达式:
      ng-init: 定义多个数据模型,中间使用 ; 隔开  (很少这样使用)
      <div ng-init="price=10;count=5;firstName='张三';name='zs';a={name:'123'}"><div>
     表达式使用要求:       {{表达式}} : 表达式,表示在网页中原样输出
               1.不能在表达式里面定义变量
               2.不能有if操作
               3.不能定义函数
               4.不能在里面循环
              <!--在表达式中不能使用这些类似于parseInt这样的方法-->
     表达式的绑定是单向绑定的
            例如:
         {{name}}
         <input type="text" value={{name}}>
         <input type="text" ng-value="name">
模块:    在<script></script>中创建
     注册创建模块:
      第一个参数:模块名    <html lang="en" ng-app="myApp">  与之对应
      第二个参数:放置需要依赖的模块
      例如 :  
        var app = angular.module('myApp',[]);
    通过模块创建控制器:
     第一个参数:控制器的名字
     第二个参数:控制器的执行函数
     $scope是一种服务,服务里面有自己的属性方法,可以直接调用
     $scope可以看成是数据模型
     scope是作用域
   例如 :   
//数组构造控制器来解决依赖注入的压缩问题
app.controller('firstController',['$scope',function ($scope) { 
          //属性
          $scope.title = '张三';
          //方法
          $scope.fun = function () {
              $scope.age = 18;
          }
          //处理业务逻辑
       }]);
no-repeat:   用于循环输出指定次数的 HTML 元素。
<!DOCTYPE html>
<html lang="en" ng-app = "myApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div ng-controller="firstCtrl">
        <ul>
            <!--作用于数组 当有重复数据的时候,根据下标遍历数组,后面接track by $index-->         
            <!--ng-class: 设置类 "{类名:true/false}"-->
            <!--ng-repeat 自带的属性值$index,$event(下标为偶数,从0开始),$odd(下标为奇数),$first,$last-->
 <li ng-repeat="key in datatrack by $index" ng-class="{pink: $even,magenta:$odd}">
{{key}}
</li>
<!--作用于对象数组 每个key指的是每个元素-->
<li ng-repeat="key in data1" ng-class-even="'pink'" ng-class-odd="'magenta'">
{{key.name+','+key.age}}
</li> 
<!--作用于对象--> 
<li ng-repeat="(key,value) in person">{{key+','+value}}
<!--子标签也会克隆一次-->
<span>abc</span> 
</li>
       <p ng-class="classNames">类名添加</p>
  </ul>
</div>
</body>
</html>
<script src="angular.js"></script>
<script> 
//创建模块 
var app = angular.module('myApp',[]); 
app.controller('firstCtrl',function ($scope) { 
//属性 
$scope.data = [1,2,3,4,5,5,6]; 
$scope.data1 = [{name:'zs',age:15},{name:'ls',age:18},{name:'ww',age:20}]; 
$scope.person = {name:'张三',age:18};
// 添加类名
       $scope.classNames = {red:true,frame:true};   
 })
</script>

链式编程:
       注入一般指的是:在执行函数里面注入一个服务($scope,$http)或者对象,对象和服务是系统提供的
                                 有自己的属性方法,我们不需要管他从哪里来,直接调用就可以了
方法一:
 var app = angular.module('myApp',['ngSanitize']);
    app.controller('firstCtrl',function ($scope) {
        $scope.title = '张三';
    });
方法二:
 angular.module('myApp',[]).controller('firstCtrl',function ($scope) {
       $scope.title = '张三';
   })
方法三:
 var app = angular.module('myApp',[]);
   angular.module('myApp').controller('firstCtrl',function ($scope) {
       $scope.title = '张三';
   })
控制器 : 一个控制器应用中包含另一个控制器,内部的控制器会继承上一级控制器
   <div ng-controller="parentCtrl">
        <!-- 分别定义的两个控制器 firstCtrl 继承了 parentCtrl -->
        <div ng-controller="firstCtrl">
            {{name}}
        </div>
    </div>   
rootScope:根作用域
    app.controller('secondCtlr',['$scope','$rootScope',function (s,r) {
        s.name = '神马';
        r.title = '改变全局';    //同样也能改变全局变量
    }]);
    
    //run方法用于初始化全局的数据，仅对全局作用域起作用。
    app.run(['$rootScope',function (rootScope) {
        rootScope.title = '根作用域';     //定义全局
    }]);


过滤器应用:
<!DOCTYPE html>
<html lang="en" ng-app="myApp" ng-controller="firstCtrl">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--字符串大小写-->
    {{'we are family' | uppercase}}
    {{'We Are Family' | lowercase}}
    <!--将json对象格式化为json字符串-->
    {{{name:'张三',age:18} | json}}
    <!--时间格式化-->
    <p>{{1478917631176 | date}}</p>
    <p>{{date | date}}</p>
    <p>{{date | date:'MM/dd/yyyy @ h::mma'}}</p>
    <p>{{date | date: 'yyyy-MM-dd hh:mm:ss'}}</p>
    <!--number 格式化-->
    <p>{{123456 | number}}</p>
    <!--保留三维小数,并且四舍五入-->
    <p>{{1.23456 | number}}</p>
    <p>{{1.23456 | number:2}}</p>
    <!--货币格式化-->
    <p>{{250 | currency}}</p>
    <p>{{250 | currency:'¥'}}</p>
    <!--字符串的截取--> 
    <p>{{'I love you' | limitTo:6}}</p>   <!-- 截取顺数6个  结果为:I love -->
    <p>{{'I love you' | limitTo:-6}}</p>  <!-- 截取倒数6个 结果为:ve you -->
    <!--数组的截取:返回值还是数组-->
    <p>{{[1,2,3,4] | limitTo: 2}}</p>    <!-- 表示截取2个 结果为:[1,2] -->
    <!--查找 filter -->
    <!--查找含有某个字符-->
    <p>{{[{name:'哪吒',age:3},{name:'西门',age:40},{name:'金莲',age:18}] | filter:8}}</p>
    <!--查找名字为哪吒的对象,最后面应该加上空格  person是个对象数组 -->
    <p>{{person | filter:{'name':'哪吒'} }}</p>
    <!--排序 orderBy :默认是从小到大,升序-->
    <p>{{person | orderBy:'age' }}</p>
    <!-- orderBy为true的时候是降序排列-->
    <p>{{person | orderBy:'age':true }}</p>
    <!--几个过滤器一起使用-->
    <p>{{person | orderBy:'age':true | filter:8 }}</p>

    <!--在指令中添加过滤器-->
    <ul><li ng-repeat="x in person | orderBy: 'age' ">{{x.name + ',' + x.age}}</li></ul>

    <!-- 控制器添加过滤器的调用 -->
    <p>{{up}}</p>
    <p>{{time}}</p>  
    <p>{{filter}}</p>

    <!-- 自定义的过滤器调用 -->
    <p>{{'hello everybody' | replace:2 }}</p>
    <p>{{'hello everybody' | replace:3 }}</p>

</body>
</html>
<script src="angular.js"></script>
<script> 
//创建模块 
var app = angular.module('myApp',[]);
//如果要在控制器中使用过滤器,必须注入服务: $filter 
app.controller('firstCtrl',['$scope','$filter',function ($scope,$filter) { 
var date = new Date(); 
console.log(date.getTime()); 
$scope.date = date; 
$scope.person = [{name:'哪吒',age:3},
{name:'西门',age:17},
{name:'金1',age:38},
{name:'金2',age:18},
{name:'金3',age:8}]; 

$scope.up = $filter('uppercase')('hello');
$scope.time = $filter('date')($scope.date,'yyyy-MM-dd hh:mm:ss');
$scope.filter = $filter('filter')($scope.person,{'name': '西门'});
}]);

//自定义过滤器 
    //第一个参数:过滤器的类型(名字)
    //第二个参数:函数,相当于执行函数
    app.filter('replace',function () {
//直接return
        //第一个参数相当于要过滤的数据
        //第二个参数是:后面的数据
        return function (input,n1) {
            if(n1 ==2){
                return input.replace(/hello/,'你好');
            }else if(n1==3){
                return input.replace(/hello/,'你不好');
            }
        }
    })
 </script>

刷新数据  $apply
            $scope.$apply(function () {
                //需要刷新的内容
            });
监听数据的变化 $watch  以及 定时器的使用
        //定时器的使用注入  超时定时器/间歇定时器$interval   延迟定时器$timeout
app.controller('firstCtrl',['$scope','$interval',function ($scope,$interval) {
        $scope.count = 10;
        //定时器使用
        //第一个参数:执行函数
        //第二个参数:间隔时间(ms)
        var timer = $interval(function () {
            $scope.count--;
        },1000);

        //第一个参数:要监听的对象,对象是属性则以字符串的形式去写,对象是方法则以$scope.方法名
        //第二个参数:执行函数
        //newVal:变化后的值,oldVal:变化以前的值
        $scope.$watch('count',function (newVal,oldVal) {
            if (newVal == 0) {
                //关闭定时器
                $interval.cancel(timer);
            }
        })
 }])
简单的工具方法:  angular.方法
app.controller('firstCtrl',['$scope',function ($scope) {
        //判断是不是数组,返回值true或者false
        console.log(angular.isArray([1,2,3]));
        console.log(angular.isDate(123));
        //将字符串转化为大写
        console.log(angular.uppercase('we are friend'));
        //两个参数,是比较的数据
        console.log(angular.equals(1,2));

        //.toJson将json对象转化为字符串
        var json = {name:'zs'};
        console.log(angular.toJson(json));
        //.fromJson将字符串转化为json
        var stringJson = '{"name":"李四"}';
       console.log(angular.fromJson($scope.person));
    }]
复杂的工具方法: angular.方法   .forEach   .bind
        $scope.person = {name:'男神',age:18};
         $scope.data = [1,2,3,4];
  //第一个参数:要遍历的对象或者是数组
//第二个参数:执行函数,执行函数的第一个参数是value,第二个是key 
angular.forEach($scope.person,function (value,key) {
console.log(value,key); 
}); 
angular.forEach($scope.data,function (value,index) {
 console.log(value,index); 
}) 
//第一个参数相当于执行函数里面的this指向 
//p是个函数 
var p = angular.bind(person,function () { 
console.log(this); 
}); 
p();

多个模块需手动加载: angular.bootstrap(DOM元素,['模块名'])或者也可以通过添加依赖的方式来加载其他模块
    //创建app1,app2两个模块
    //angular 只会自动加载一次模块,如果要加载其他模块,需要手动加载
    var app1 = angular.module('myApp1',[]);
    app1.controller('firstCtrl',['$scope',function ($scope) {
        $scope.name = '老王';
    }])

    var app2 = angular.module('myApp2',[]);
    app2.controller('secondCtrl',['$scope',function ($scope) {
        $scope.title = '老宋';
    }]);

    //手动加载模块
    //第一种方式:通过添加依赖的方式来加载其他模块
    var app1 = angular.module('myApp1',['myApp2']);

    //第二种angular.bootstrap(DOM元素,['模块名'])
    //先拿到模块所在的元素
    var div = document.getElementById('box');
    //第一个参数是DOM元素
    //第二个参数是数组.数组里面的元素是需要手动加载的模块名
    angular.bootstrap(div,['myApp2']);

使用jQ创建内容 :
<body>
    <div id="box"></div>
    <div></div>
</body>

<script src="angular.js"></script>
<script src="jquery-3.1.0.js"></script>

<script>
    angular.module('myApp',[]).controller('firstCtrl',['$scope',function ($scope) {
        //第一中方式,使用jQuery方法调用,需导入jquery-3.1.0.js文件
        $('#box').html('这是jQ创建内容');
        //第二种方式,使用内置的jqLite调用jQuery的方法,不要导入jquery-3.1.0.js文件
        var div = document.getElementsByTagName('div')[1];
        angular.element(div).html('这是jqLite调用')
    }])
</script>


----------------------------------------------------------------------------------------------------------
ng- 常用指令集合:
ng-click/dbclick: 单击/双击事件
ng-mousedown/up: 鼠标在指定的 HTML 元素上按下/松开鼠标按钮时 要执行的操作
ng-mousemove/over/out: 鼠标移动/移入/移出
ng-keydown/up/press: 在指定 HTML 元素上按下/抬起/按下时要执行 的操作(一般用于输入框)
ng-focus/blur: 输入框获得/失去焦点需要执行的操作
ng-submit: 表单提交后执行的函数 
ng-copy: 按下复制键的时候执行的事件 
ng-cut: 按下剪切键的时候执行的事件
ng-paste: 按下粘贴键的时候执行的事件 
ng-cloak: 在 angular 中为我们提供了 
ng-cloak 来实现防止闪烁的方案, 我们只需 要在需要的地方加上 ng-cloak。同时对于 bing 文字
({{ express }} )我们也可以改为 ng-bind 来实现避免<p ng-bind="title"></p>        
<p ng-cloak>{{title}}</p>
ng-non-bindable: 如果我们就想要一个{{}} 这样的内容就可以使用 ng- non-bindable ,原型 ”输出 ”
ng-disabled: 设置表单输入字段的 disabled 属性(input, select, 或 textarea),如果 ng-disabled 中的表达式返回 true 则表单字段将被禁用
ng-readonly: 用于设置表单域(input 或 textarea) 的 readonly 属性
ng-checked: 用于设置复选框(checkbox)或单选按钮(radio)的 checked 属性
ng-value: 用于设置 input 或 select 元素的 value 属性
ng-class: 用于给 HTML 元素动态绑定一个或多个 CSS 类 
ng-class-even: 为表格的偶数行设置 class 
ng-class-odd: 为表格的奇数行设置 class (从1开始)
ng-style: 为 HTML 元素添加 style 属性<div ng-style="{color:'red'}">开始一个人</div>
ng-href: 覆盖了原生的 <a> 元素 href 属性
ng-attr-(suffix): html属性多了,AngularJS 提供了一种通用的写法<p ng-attr-title="'事实'">我是女生</p>
ng-show: 值设置为 true 的时候显示元素
ng-hide: 值设置为 true 的时候隐藏元素 
ng-if: 值设置为 false 的时候删除元素 
ng-switch:指令根据表达式显示或隐藏对应的部分。 对应的子元素使用ng-switch-when 指令,如果匹配选中选择显示, 其他为匹配的则移除。
你可以通过使用ng-switch-default 指令设置默认选项,如果都没有 匹配的情况,默认选项会显示
<input type="checkbox" ng-model="box1">{{box1}} 
<div ng-switch="box1">        
<p ng-switch-default>switch默认</p>        
<p ng-switch-when="true">ng-switch为true</p>       
<p ng-switch-when="false">ng-switch为false</p>    
</div>
ng-open: 设置 details 列表的 open 属性
<input type="checkbox" ng-model="box2">{{box2}}    
<details ng-open="box2">       
<summary>总结</summary>        
<p>12345</p>    
</details>
ng-bind: 防止闪烁效果 
     <p ng-bind="title"></p>
ng-bind-template: 解决 ng-bind 只能绑定一个的问题 
<p ng-bind-template="{{title}} {{title1}}"></p>
ng-bind-html: 解析 html 代码(得导入 sanitize.js 文件,并给 app 添加 ngSanitize 依赖) 
ng-include: 加载外部页面(传入文件路径就行)  
//方法一 : 引进外部文件<div ng-include="'hhh.html'"></div>
//方法二:  <div ng-include="'tpl'"></div>    
<script type="text/ng-template" id="tpl">       
<h1>诠释所有</h1>    
</script>
ng-model-options: 控制双向事件绑定的时候,触发事件的方式 
updateOn: ‘blur’ 失去焦点时触发 
debounce : 1000ms即1秒后触发 
<div ng-model-options="{updateOn:'blur'}">        
<input type="text" ng-model="na">{{na}}    
</div>        
<div ng-model-options="{debounce:1000}">        
<input type="text" ng-model="na1">{{na1}}    
</div>