angular

时间 2019-11-29

原文原文链接

1、什么是angularjs 001

angularjs诞生于2009年，由Misko Hevery等人建立，后为Google所收购。是一款优秀的前端JS框架。已经被用于Google的多款产品中。 angularjs有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。目前AgularJS应用很是普遍国内比较大型的公司如阿里云、腾讯都在使用。php

2、AngularJS下载地址 001

http://angularjs.org 文档查看 http://docs.angularjs.cn/api 调试工具 batarang 主要功能：查看做用域、输出调试信息、性能监控安装：https://pan.baidu.com/s/1jGILtzgcss

3、基本angular程序（模块、控制器、视图模型、双向数据绑定） 002

    <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="../../org/angular.min.js"></script> </head> <body> <div ng-app="app" ng-controller="ctrl"> {{name}} <!--双向数据绑定--> <input type="text" name="" id="" ng-model="name"> </div> <script> // 注册模块m var m = angular.module('app', []); //注册控制器ctrl m.controller('ctrl', ['$scope', function($scope) { //$scope 视图模型 $scope.name = '老周'; }]) </script> </body> </html>

4、MVVM 002

5、依赖注入 003

<script>
    //          模块名      依赖的模块
    var m = angular.module('app', []);
    // 规范依赖注入写法-避免代码压缩后出问题
    // m.controller('ctrl', ['$scope', function($scope) {
    //     $scope.name = '老周';
    // }])
    //              a能够随便变，由于是按前面$scope注入的，由于字符串是不会被压缩的
    m.controller('ctrl', ['$scope', function(a) {
        a.name = '周宇翔';
    }])
</script>

6、scope基本使用方法 004

7、ng-bind、ng-cloak解决闪屏问题 005

原理：页面会先解析css样式，而后angular在进行处理。因此内容会被先隐藏，angular解析完以后才会显示 display:block。这个过程angular自动处理。html

样式表中增长样式 .ng-cloak前端
```
.ng-cloak{
    display:none;
}
```
标签上增长 ng-cloak属性和 ng-cloak的classjquery
```
<div ng-cloak class="ng-cloak">{{name}}</div>
```

8、ng-model在表单中双向数据绑定实例分析 007

9、angular中的单选框 008

10、angular中复选框的使用 009

11、angular中select下拉框的使用 010

12、函数的使用大小写转化与对象深拷贝 011

version
lowercase
uppercase
copy

十3、函数使用之对象扩展与数据遍历 012

extend
forEach

十4、angularjs中的json数据转换与本地存储及$scope数据序列化提交到后台 013

toJson ： json对象转json格式的字符串
fromJson ： json格式字符串转json对象

十5、数据类型判断函数与数据比较方法的使用 014

isArray
isDate
isDefined
isUndefined
isFunction
isNumber
isObject
isElement

* equals

十6、ng-init与ng-trim及表单中value及$scope提交 015

ng-init

* ng-trim: ng-model写了自带 ng-trim

当点击submit提交的时候，提交的是value中的数据，仍然会有空格，可是$scope中的数据通过 trim处理以后，没有空格了。

十7、ng-if、ng-show、ng-disable、ng-init实现网站注册协议设置 016

ng-show : 使用css display:none display:block 控制

ng-if: 移除和添加dom节点的方式控制显示隐藏

十8、ng-repeat实例讲解 017

$first
$last
$middle
$odd
$evengit
```
<li ng-repeat="(k,v) in data">
```

重复数据出错--track by $indexangularjs

$scope.data = ['qq','百度','qq']
<li ng-repeat="(k,v) in data track by $index">

十9、ng-selected、ng-disabled、ng-readonly实例 018

readonly:不能修改能够提交
disabled:不能修改也不能提交
selected：默认被选中的

二10、全选与取消全选 019

二11、设置数据同步更新时机 020

ng-model-optionsweb

失去焦点更新：chrome

<input type="text" ng-model="data" ng-model-options="{updateOn:'blur'}"/> {{data}}

三秒后更新：json

<input type="text" ng-model="data" ng-model-options="{debounce:3000}"/> {{data}}

三秒后更新或失去焦点更新：

<input type="text" ng-model="title" ng-model-options="{updateOn:'default blur',debounce:{default:3000,blur:0}}"/> {{title}}

二12、ng-class动态改变样式 021

ng-class
ng-class-odd ng-class-even

二十3、ng-style动态改变样式 022

二十4、事件处理指令 023

ng-click: 单击事件
ng-dblclick: 双击事件
ng-change:改变触发必须同时有ng-model
ng-blur:失去焦点
ng-focus: 获取焦点
ng-keyup: 键盘抬起
ng-keydown: 按下键盘
ng-keypress: 按下抬起
ng-mousedown:按下鼠标
ng-mouseenter:鼠标进入
ng-mouseleave:鼠标离开
ng-mousemove:鼠标移动

二十5、微信菜单实例 024

二十6、filter变量调节器与货币变量调节器 025

过滤器：对数据进行二次处理

currency：金钱修饰符，四舍五入

<span>{{price|currency:'￥':1}}</span>

number：数字处理，保留几位小数点，四舍五入
```
<span>{{price|number:2}}</span>
```
lowercase:转小写
```
<p>{{city|lowercase}}</p>
```
uppercase：转大写
```
<p>{{name|uppercase}}</p>
```
limitTo: 截取几个字符
```
<p>{{title|limitTo:3}}</p>
```
date: 日期过滤器
```
<p>{{time|date:'yy-MM-dd HH:mm:ss'}}</p>
```
二十7、orderBy排序与filter过滤 026
orderBy:'排序字段':升降序 true/false
```
<div>{{data|orderBy:'id':true}}</div>
```

filter:过滤字符:是否彻底匹配

<!-- 不传第二个参数，无论哪一个值含有3都算 -->
<div>{{data|filter:'3'}}</div>
<!-- 第二个参数true彻底匹配 -->
<div>{{data|filter:3:true}}</div>

二十8、控制器中使用过滤服务 027

二十9、callee与过滤器结合制做表格升降序排序 028

$scope.orderBy = function(field) {
    if (arguments.callee[field] == undefined) {
        arguments.callee[field] = false;
    }
    arguments.callee[field] = !arguments.callee[field];
    $scope.data = $filter('orderBy')($scope.data, field, arguments.callee[field]);
}

三10、使用scope处理升降序 029

    $scope.status = {
        id: false,
        title: false,
        age: false
    };
    $scope.orderBy = function(field) {
        $scope.status[field] = !$scope.status[field];
        $scope.data = $filter('orderBy')($scope.data, field, $scope.status[field]);
    }

三11、$scope.$watch监听数据变化 030

监听普通变量

                                新数据    旧数据
$scope.$watch('title', function(newData, oldData) {
    $scope.error = $scope.title.length > 3 ? '标题长度不能超过三个' : '';
})

监听对象:第三个参数true必须写

$scope.data = {
    title: ''
};
$scope.$watch('data', function(newData, oldData) {
    $scope.error = newData.title.length > 3 ? '标题长度不能超过三个' : '';
}, true)

* 监听函数 030-3.html

三12、$scope.$watch结合filter过滤器制做数据筛选实例 031

    //排序显示数据临时变量
    $scope.lists = $scope.data;
    $scope.$watch('search', function(n, o) {
        $scope.lists = $filter('filter')($scope.data, n);
    })

三十3、自定义过滤器之手机加星过滤器 032

        /html
        <td>{{u.phone|truncate:3}}</td>
        /js
        var m = angular.module('app', []);
        m.filter('truncate', function() {
            return function(str, len) {
                return str.substr(0, 11 - len) + new String('*').repeat(3);
            }
        })

三十4、自定义指令directive的restrict属性说明 033

shiy

    /html
    <div zyx></div>
    <zyx></zyx>
    <div class="zyx"></div>
    /js
    var m = angular.module('app', []);
    m.directive('zyx', [function() {
        return {
            restrict: 'AEC',//A attr-属性 E-element 元素标签 C-class 类名
            template: 'angular学习'
        }
    }])

三十5、自定义指令命名规范 034

angular自有指令都是 ng-开头的，那咱们自定义的指令也保持这种风格，但不要使用ng-，可使用如 zyx- jy-等。那么在命名的时候须要使用驼峰命名法。代码以下

        /html
        <zyx-show></zyx-show>
        /js
        var m = angular.module('app', []);
        m.directive('zyxShow', [function() {
            return {
                restrict: 'E',//A attr-属性 E-element 元素标签 C-class 类名
                template: 'angular学习'
            }
        }])

三十6、自定义template函数式操做 035

    <body ng-app="app" ng-controller="ctrl">
        <jy-show color="red">这里是文字</jy-show>
        <script>
            var m = angular.module('app', []);
            m.directive('jyShow', [function() {
                return {
                    restrict: 'E',
                    template: function(elem, attr) { //elem是当前元素标签的angular对象能够引入jquery用$()包裹，而后用jquery中的方法，attr是属性集合
                        // console.log(elem, attr);
                        //return 123; //返回什么内容就是什么；
                        // return $(elem).html();
                        return "<span style='color:" + attr.color + "'>" + $(elem).html() + "</span>"
                    }
                }
            }])
            m.controller('ctrl', ['$scope', function($scope) {
                $scope.name = '老周';
            }])
        </script>
    </body>

三十7、自定义指令replace属性详解 036

    var m = angular.module('app', []);
    m.directive('jyShow', [function() {
        return {
            restrict: 'E',
            template: '<span>这是模板内容</span>',
            replace: true //true:将template中的内容替换指令所在位置，false嵌入指令内
        }
    }])

三十7、自定义指令之transclude和templateUrl 037

transclude/ng-transclude

<jy-cms>这里是指令标签内的内容</jy-cms>
<script>
    var m = angular.module('app', []);
    m.directive('jyCms', [function() {
        return {
            restrict: 'E',
            template: '<div><p ng-transclude=""></p>今每天气不错</div>',
            transclude: true //true时，会将标签指令中的内容替换掉 ng-transclude所在标签的位置
        }
    }])
    m.controller('ctrl', ['$scope', function($scope) {
        $scope.name = '老周';
    }])
</script>

templateUrl

/view/jsCms.html
<div>
    这里是templateUrl指定的模板内容
</div>

/2.html
<jy-cms>这里是指令标签内的内容</jy-cms>
<script>
    var m = angular.module('app', []);
    m.directive('jyCms', [function() {
        return {
            restrict: 'E',
            templateUrl: './view/jyCms.html', //想要正常打开，须要在localhost的方式访问（启动phpstudy），不能直接打开静态文静的方式引入
            replace: true //使用replacetrue的前提是，templateUrl模板中的内容，必须包在一个块标签内
        }
    }])
    m.controller('ctrl', ['$scope', function($scope) {
        $scope.name = '老周';
    }])
</script>

三十8、controller控制器scope父子集做用域讲解 038

做用域分析 038-1
继承隔离： 038-2 子集继承父级的变量，可是子集改变不影响父级
继承不隔离：038-3 利用对象传址的特性，实现继承继承不隔离，子集改变，也影响父级

三十9、指令scope做用域分析 039

scope:false 默认是false，继承而且不隔离。外面会影响里面，里面也影响外面
scope:true 继承隔离，能够继承父级的，可是继承以后，本身用本身的。
scope:{} 彻底独立。不继承隔离。
scope:{color:'@color'} 单向文本绑定
scope:{color:'=color'} 双向文本绑定也能够绑定引用类型的数据（对象）

四10、scope做用域之=&调用父级做用域中的函数 040

总结：用 = 能够调用父级做用域中的变量。用&符能够调用父级做用域中的方法。

四11、指令directive中的controller属性 041

详见 041用法

四12、directive的link属性(对指令标签的dom操做时使用) 042

四十3、自定义指令的tab面板 043

四十4、$scope.$apply进行数据脏检查 044

    // 原生方法会触发angular的脏检查机制，让修改后的数据更新，不是绑定在$scope下的方法虽然数据已经被修改了，可是没有触发脏检查机制，致使视图没有更新，想要更新视图，须要单独调用$scope.$apply() 触发脏检查机制更新视图
    $scope.change = function() {
        $scope.name = '积云教育';
    }
    $('#jq').click(function() {
        $scope.name = 'jquery修改生效';
        $scope.$apply();

四十5、timeout、interval服务 045

四十6、window服务 046

就是对原生window对象的angular封装，目的跟timeout等同样，触发视图更新

四十7、sce服务安全的处理html数据 047

带有元素标签的数据，标签不能再页面正常解析，都会自动转实体。因此要想正常解析须要两点

使用 ng-bind-html=“数据” 的方式绑定数据
使用$sce.trustAsHtml('<标签></标签>');方法来处理数据

四十8、cacheFactory缓存实例 048

建立缓存仓库
```
var store = $cacheFactory('store');
```
获取建立的缓存仓库
```
var obj = $cacheFactory.get('store');
```
销毁缓存仓库
```
store.destroy();
```

缓存数据

store.put('web', {
    'title': '腾讯能视频',
    url: 'www.qq.com'
});

读取缓存数据
```
    store.get('web')
```

删除缓存数据

// store.remove('web');//按名删
// store.removeAll();//全删
// store.destroy();//把缓存仓库也删掉

四十9、$http服务获取后台数据 049

    $http({
        url: '1.php',
        method: 'get'
    }).then(function(res) {
        $scope.data = res.data;
    }).then(function(error) {
        console.log(error)
    })

五10、$http请求缓存处理 050

在配置中加入 cache: true 那么就会将上次请求回来的数据缓存，不会重复发请求。查看chrome浏览器的network能够看到之请求了一次1.php

五11、$http简写

    $http.get('1.php',{cache:true}).then(function(res) {
        $scope.data = res.data;
    }).then(function(error) {
        console.log(error)
    })

五12、$http服务向后台post数据的两种方式 052

五十3、factory建立服务，利用promise获取后台数据 053

五十4、多个控制器共享服务处理实例 054

利用对象引用指向同一个内存空间的特性，删除数据

五十5、使用service建立自定义服务 055

    m.service('webService', ['$http', function($http) {
        this.get = function() {
            return $http.get('1.php', {
                cache: true
            }).then(function(res) {
                return res.data;
            })
        }
    }])

五十6、uirouter默认路由规则操做 056

    <div ui-view></div>
    ===js===
    var m = angular.module('app', ['ui.router']);
    m.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
        //默认路由
        $urlRouterProvider.otherwise('/index');
        //定义路由规则
        $stateProvider.state('default', {
            url: '/index',
            template: '<h1>laozhou</h1>'
        })
    }])

五十7、uirouter路由跳转方式 057

    ====html====
    <a ui-sref="index">首页</a>
    <a ui-sref="home">家目录</a>
    <a href="#/list">列表页</a>
    <div ui-view>访问不存在的路由时，显示以下提示信息</div>
    ====js=====
    var m = angular.module('app', ['ui.router']);
    m.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
        //默认路由
        $urlRouterProvider.otherwise('/index');
        //定义路由规则
        $stateProvider
            .state('default', {
                url: '/index',
                template: '<h1>首页</h1>'
            })
            .state('home', {
                url: '/home',
                template: '<h1>家目录</h1>'
            })
            .state('list', {
                url: '/list',
                template: '<h1>列表页</h1>'
            })
    }])

五十8、uirouter路由模板设置方式 058

    .state('home', {
        url: '/home',
        templateUrl: './view/home.html'
    })