AngularJS文字笔记

1. **表达式**
    * {{js表达式}}
    * 从作用域对象中读取对应的属性数据来显示数据
    * 不支持if/for/while
    * 支持三目表达式
2. **指令**
    * 什么指令 ： 自定义标签属性/标签
    * 常用的指令：
        * ng-app: 指定模块名，angular管理的区域
        * ng-model： 双向绑定，输入相关标签
            * ng-model-options="{updateOn: 'blur'}"  控制光标移开就展示
        * ng-init： 初始化数据
        * ng-click： 调用作用域对象的方法（点击时）
          可以传$event
        * ng-controller: 指定控制器构造函数名，内部会自动创建一个新的子作用域（外部的）
        * ng-bind： 解决使用{{}}显示数据闪屏（在很短时间内显示{{}}）
            * ng-bind-template: 可以实现多个{{}} 如 <div ng-bind-template="{{text}}, {{text}}"></div>
        * ng-cloak: 也是解决数据闪屏  他使用的是 css中的 display:none  解析之后就是block
        * ng-non-bindable: 不去解析
        * ng-repeat： 遍历数组显示数据， 数组有几个元素就会产生几个新的作用域
            * $index, $first, $last, $middle, $odd, $even
            * 可以通过ng-repeat-start 和 ng-repeat-end实现兄弟之间的循环
        * ng-show: 布尔类型， 如果为true才显示
        * ng-hide: 布尔类型， 如果为true就隐藏
        * ng-class: 动态引用定义的样式  {aClass:true, bClass:false}
    * ng-style: 动态引用通过js指定的样式对象   {color:'red', background:'blue'}
    * ng-mouseenter: 鼠标移入监听, 值为函数调用, 可以传$event
    * ng-mouseleave: 鼠标移出监听, 值为函数调用, 可以传$event
    * ng-fours/blur: 获取和失去焦点
    * ng-submit: 提交
    * ng-selected: 默认是false  被选择就是true
    * ng-change: 输入框发生改变就会触发 要配合ng-model
    * ng-copy: 输入框出现复制就会触发
    * ng-cut: 输入框出现剪切就会触发
    * ng-paste: 输入框出现粘贴就会触发
    * ng-disabled: 禁用标签
    * ng-readonly: 输入框不能输入 但不是灰色的禁用
    * ng-checked: 是true就是选中状态  不是就不是选中状态
    * ng-value: 相比于value  用户体验会比较好
    * ng-attr-title: 可以让鼠标移出显示提示文字
    * ng-switch   之后的是 ng-switch-default是默认显示的  ng-switch-when是false就是显示切换的
    * ng-open: 打开和关闭  h5上有个details标签
    * ng-include: 可以引入其他的页面 ng-include="index.html"
    * ng-controller: ng-controller="Fnarr as a1"    {{a1.text}}
    * novalidate: 阻止表单默认的样式
    * ng-attr-id: ng-attr-id="div{{id}}"  {{id}}
3. **过滤器**
    * 作用: 在显示数据时可以对数据进行格式化或过滤
        * 单个--->格式化（将别的类型的数据转换为特定格式的字符串）
        * 多个----》格式化/过滤
        * 不会真正改变被操作数据
    * {{express | 过滤器名：补充说明}}
    * 常用过滤器：
        * currency 货币格式化(文本)
        * number数值格式化(文本)
        * date 将日期对象格式化(文本)
        * json: 将js对象格式化为json(文本)
        * lowercase : 将字符串格式化为全小写(文本)
        * uppercase : 将字符串格式化全大写(文本)

        * limitTo 从一个数组或字符串中过滤出一个新的数组或字符串
            * limitTo : 3  limitTo : -3
        * orderBy : 根据指定作用域属性对数组进行排序
            * {{[2,1,4,3] | orderBy}}  升序
            * {{[2,1,4,3] | orderBy：‘-’}}  降序
            * {{[{id:2,price:3}, {id:1, price:4}] | orderBy:'id'}  id升序
            * {{[{id:2,price:3}, {id:1, price:4}] | orderBy:'-price'} price降序
        * filter : 从数组中过滤返回一个新数组
            * {{[{id:22,price:35}, {id:23, price:45}] | filter:{id:'3'}} //根据id过滤
            * {{[{id:22,price:35}, {id:23, price:45}] | filter:{$:'3'}} //根据所有字段过滤
4. **location**
    * $location的一些方法
        * absUrl(): 获取到绝对地址，加参数也会显示出来
        * path(): 可以设置也可以获取，是一个路径，$location.path('aa');  之后获取就是 http://xxxxx#/aaa
        * replace(): 设置了可以location历史管理的操作。没有前进后退  $location.path('aa').replace()
        * hash(): 设置获取哈希值 $location.hash('hello')
        * search(): $location.search({'age': 20})
        * url(): 得到路径 不是全部的 path是全部的
        * host(): 得到location
        * port(): 得到端口
        * protocol(): 得到协议
    * $anchorScroll 锚点调整
        * 需要配合$location.hash()配合就可以使用 $anchorScroll
        * 原本hash是div4 之后你上下滚动再点击div4想跳转到div4的位置 就需要重新调用一次 $anchorScroll()    
    * $cacheFactory 缓存
        * put() 添加缓存
        * get() 获取缓存
        * info() 获取缓存的信息 size
        * capacity() 设置缓存的长度   在$cacheFactory('myCache', {capacity: 2})
    * $log 调试
        * $log.log()
        * $log.info()
        * $log.warn()
        * $log.erro()
    * 供应商服务   必须是config然后在 $anchorScroll后面加 Provider  可以对自定义服务进行修改
        * angular.module('myapp', [])
                        .config(['$anchorScrollProvider', function($anchorScrollProvider){
                            $anchorScrollProvider.disableAutoScrolling()
                        }])
        -----------------------------------------------------------------------------------
            m1.provider('myService', function(){
                return{
                    name: 'hello',
                    $get: function(){
                        return{
                            name: this.name,
                            show: function(){
                                return this.name + ':angular'
                            }
                        }
                    }
                }
            })
            
            m1.config(['myServiceProvider', function(myServiceProvider){
                console.log(myServiceProvider);
                myServiceProvider.name = 'hi'
            }])


            m1.controller('a1', ['$scope','myService', function($scope, myService){
                console.log(myService.show());
            }])
        -----------------------------------------------------------------------------------
        // 在m1模块引入自定义服务 myService服务 在后面添加   
        // 也可以把这个自定义服务进行模块化的引入在多个文件中引入，和插件的方法差不多
        var m1 = angular.module('myApp', ['module1'])
        m1.controller('a1', ['$scope','myService', function($scope, myService){
            console.log(myService.show());
        }])

        var m2 = angular.module('module1', [])
        m2.factory('myService', function(){
            return{
                name: 'tom',
                show: function(){
                    return this.name + ':angular'
                }
            }
        })
        -----------------------------------------------------------------------------------
    * factory