AngularJS(一款优秀的前端框架)

前言

AngularJS是一款为了克服HTML在构建应用上的不足而设计的优秀的前端JS框架。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。它可通过
上面的示例我自己也不是很能理解，看下面的叙述:
- 对于$scope上的原生类型，如$scope.name="";
  - 子作用域获取变量时，会查找作用域本身，找不到就会查找父作用域
  - 修改时，若本作用域不存在，就会在本作用域创建一个变量，而不会向上查找并修改父作用域的变量
- 对于$scope上的对象，如$scope.name={};
  - 子作用域获取变量时，会查找作用域本身，找不到就会查找父作用域
  - 修改时，若本作用域不存在，会向上查找并修改父作用域的变量
4.AngularJS 中的过滤器

过滤器可以使用一个管道字符（|）添加到表达式和指令中。

系统内置的过滤器
- currency 将数字格式化为货币格式
- filter 从数组项中选择一个子集
- lowercase 格式化字符串为小写
- orderBy 根据某个表达式排列数组
- uppercase 格式化字符串为大写
```
    angular.module("app",[])
        .controller("ctrl",function($scope){
            $scope.classes=[
                {name:"张三",age:12,score:78},
                {name:"李四",age:12,score:66},
                {name:"王二麻子",age:12,score:98},
                {name:"赵六",age:12,score:54},
                {name:"李二狗",age:12,score:75},
            ]
        })
        /*
         * 自定义过滤器
         */
        .filter("showHello",function(){
            return function(text){
                return "Hello AngularJS";
            }
        })
        .filter("reverse",function(){
            return function(text){
                return text.split("").reverse().join("");
            }
        })
        /*
         * 自定义过滤器，同时需要传递过滤参数
         * 调用过滤器示例：{{12345678901| hideTel:4}}
         * 传入的参数4，将被过滤函数的num形参所接受
         */
        .filter("hideTel",function(){
            return function(text,num){
                num=num>0&&num<11?num:3;
                text=text+"";
                var newText=text.substring(0,11-num)
                          +text.substring(11-num,11).replace(/\d/g,"*");
                return newText;
            }
        })
        /*
         * 自定义过滤器，实现根据姓名筛选数据的功能。
         * >>> 调用示例：
         *             请输入姓名：
         *        
         */
        .filter("filterByName",function(){
            return function(items,search){
                if(!search) return items;
                var arr=[];
                for (var i=0;i-1) {
                        arr.push(items[i]);
                    }
                }
                return arr;
            }
        })
```
5.AngularJS中的服务

5.1服务Service

1、内置服务：

要使用服务，必须要把服务名通过controller的构造函数的参数注入进来！！！

系统内置的服务，统一使用$开头，服务中的属性和方法统一使用$$开头！！！

自定义服务时，需注意与系统服务的写法区分开；

$location：返回当前页面的URL地址信息，是一个对象；
```
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});
```
$http：向服务器发送请求，类似于JQuery中的Ajax;
```
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("welcome.htm").then(function (response) {
        $scope.myWelcome = response.data;
    });
});
```
$timeout:相当于setTimeout()
```
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
    $scope.myHeader = "Hello World!";
    $timeout(function () {
        $scope.myHeader = "How are you today?";
    }, 2000);
});
```
$interval:相当于setInterval()
```
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
    $scope.theTime = new Date().toLocaleTimeString();
    $interval(function () {
        $scope.theTime = new Date().toLocaleTimeString();
    }, 1000);
});
```
2、自定义服务

接收两个参数：
第一个参数是服务名：
第二个参数是自定义服务的构造函数。我们自定义的服务，本质是一个对象。

对象的属性，可以在构造函数中，使用this.属性表示；
对象的方法，可以在构造函数中，使用this.方法表示；
```
.service("hexafy",function  () {
            this.gongneng="将十进制数转化为16进制";
            this.func=function (num) {
                return num.toString(16);
            }
        })
```
使用过滤器实现同样功能：
```
.filter("filter1",function(){
            return function  (num) {
                return num.toString(16);
            }
        })
```
在过滤器中调用服务！！！
也必须在声明过滤器的外层构造函数中，注入服务名称！！！
```
.filter("filter2",function(hexafy,$location){
            return function  (num) {
                return hexafy.func(num);
            }
        })
```
5.2服务Factory

factory服务在使用上与service服务没有太大差距。

唯一的不同点，是声明服务时，factory服务是在函数中先声明好一个对象，然后使用return将对象返回。

而service服务，则是直接在函数中使用this将属性和方法添加到对象上面。
```
        angular.module("app",[])
        .controller("ctrl",function  ($scope,hexafy) {
            $scope.gongneng=hexafy.gongneng;
            $scope.num1=hexafy.func(10);
        })
        .factory("hexafy",function  () {
            var obj={
                gongneng:"将十进制数转化为16进制",
                func:function (num) {
                return num.toString(16);
                }
            }
            return obj;
        })
```
5.3provider

1、在AngularJs中，service服务、 factory服务都是基于provider服务实现的
2、在定义provider时，可以使用this.$get方法，接受一个函数，函数里面采用与factory完全相同的写法
```
.provider("hexafy",function(){
            this.$get=function(){
                var obj={
                gongneng:"将十进制数转化为16进制",
                func:function(num){
                    return num.toString(16);
                }
            }
            return obj;
            }
        })
```
3、在三种服务中，provider服务是唯一可以写进config配置阶段的服务。

所以说，如果服务需要在配置阶段，也就是在声明controller之前执行的话，则可以使用provider，否则一般使用service或者factory。
```
angular.module("app",[])
        /*.config()表示配置阶段，在声明controller之前执行。可以用于声明一些在controller中
         * 需要使用的全局变量、方法、服务等
         */
        .config(function($provide){
            // 在配置阶段声明provider服务，需要在config中注入系统对象$provide
            $provide.provider("hexafy",function(){
                this.$get=function(){
                    var obj={
                        gongneng:"444"
                    }
                    return obj;
                }
            });
        })
        .controller("ctrl",function($scope,hexafy){
            $scope.gongneng=hexafy.gongneng;
        })
```
6. AngularJS 中的select与表格

(一)使用数组作为数据源

1、item表示数组中的每一项
2、循环出的option中，value的值，默认为item
3、option显示出的内容（标签中的文字）是由item.site for决定的！
```
            
        
```
ng-options 和 ng-repeat

1、
- ng-options使用时，是将指令添加在select上；
- ng-repeat使用时，是将指令添加在option上。
2、
- ng-options使用时，必须同步给select标签绑定ng-model；
- ng-repeat使用时，不一定需要绑定ng-model；
3、
- ng-options使用时，我们只需要关心for前面的部分，即option标签中显示的文字；而option的value会自动分配，不由我们决定。(使用数组作为数据源时，value就是数组的每一项；使用对象作为数据源时，value永远都是对象的值)
- ng-repeat使用时，除了要指定option标签中显示的文字，还需要手动指定value中的内容，如果没有指定，则默认没有value；
```
  
                
        {{$index + 1}}
        {{item}}
  
```
7.AngularJS中的DOM与事件

1、ng-disabled="true/false";

传入true表示禁用，传入false表示可用
```
    
        
    
        是否同意！
    
    {{myCheck}}    
```
图1

图2

2、ng-show 是否显示

传入true表示显示，传入false表示隐藏
```
    是否显示！

我显示出来啦！！！
```
3、ng-hide 是否隐藏
```
    是否隐藏！

我显示出来啦！！！
```
4、ng-if：是否移除元素

当传入true显示，传入false时移除。
效果与ng-show相同，但是ng-show和ng-hide只是隐藏元素，而ng-if是将元素从DOM中直接移除！
```
   是否移除！

移除！！！
```
5、ng-bind-html : 相当于 innerHTML

而ng-bind 相当于 innerText

注意：要使用ng-bind-html，必须导入angular-sanitize.js文件进行安全验证。
同时需要在声明模块的时候，在数组中注入安全验证模块'ngSantize'
6、ng-checked 设置复选框或单选框的选中状态。

传入true设置当前复选框被选中。
```
 Check all


 123

 456

 789
```
7、ng-class：用于设置给元素添加class类。

可选值有以下几种情况：
① 可以是字符串。表示直接给元素添加对应的class。多个class之间，用空格分隔。
② 可以是对象。对象的键表示class名字，对象的值为true或false，当值为true时表示添加对应的class。
③ 可以是数组，数组中的值可以是字符串或对象，判断规则同上。
```
这是一个div

    给div添加样式？

这是一个div
这是一个div
```
8、ng-switch 根据变量的值

选择不同的ng-switch-when来显示，当没有合适的选项时，显示ng-switch-default

8、AngularJS中的表单和输入验证

1、表单中，常用的验证操作：
$dirty 表单有填写记录
$valid 字段内容合法的
$invalid 字段内容是非法的
$pristine 表单没有填写记录
$error 表单验证不通过的错误信息

2、验证时，必须给form和input，设置name属性。

给form和input设置name后，会自动将表单信息绑定到$scope作用域中。
所以可以直接使用formName.inputName.$验证操作得到验证结果。

例如：
formName.inputName.$dirty = "true"；表示表单被填写过！
formName.inputName.$invalid = "true"；表示表单输入内容不合法！
formName.inputName.$error.required = "true"；表示设置了必填，但是没有输入！

注意：$error支持的验证：required/minlength/maxlength/partten/eamil/num/date/rul等

3、为了避免AngularJS的验证与HTML5的表单验证冲突！！比如说 type="email" required等，H5也会进行验证，那么可以给form添加"novalidate"属性，禁用HTML5的验证功能。
```
        
            
                
                    用户注册
                
            
            
                
                    
                        用户名
                        
                            
                            
                                用户名必须填写
                                用户名长度最小为6位
                                用户名长度最大为16位
                            
                        
                    
                    
                        邮箱：
                        
                            
                            
                                邮箱必须填写
                                邮箱不合法
                            
                        
                    
                    
                        密码：
                        
                            
                            
                                密码只能由6-18位的字母、数字、下划线
                            
                        
                    
                    
                        确认密码：
                        
                            
                            
                                两次密码输入不一致
                            
                        
                    
                    
                        
                            
                        
                        
                            
                        
                    
                
            
        
    
```
9.AngularJS中的动画

在AngularJS中使用动画：

1、导入angular-animate.js
2、如果页面中没有自定义的app模块，则可以直接绑定系统模块ng-app="ngAnimate"
如果页面中有自定义的app模块，则可以在自定义模块的数组中，注入ngAnimate。
　　　　 angular.module
3、当使用ng-show、ng-hide显示或者隐藏元素的时候，系统会自动添加或者移除，ng-hide这个class类。
4、当使用ng-if/ng-switch/ng-repeat等其他指令，需要分别设置显示后和隐藏后的两种class样式；

显示后的class： .ng-enter-active,.ng-leave{}
隐藏后的class： .ng-enter,.ng-leave-active{}

AngularJS(一款优秀的前端框架)

前言

4.AngularJS 中的过滤器

5.AngularJS中的服务

5.1服务Service

5.2服务Factory

5.3provider

6. AngularJS 中的select与表格

7.AngularJS中的DOM与事件

8、AngularJS中的表单和输入验证

9.AngularJS中的动画

你可能感兴趣的:(AngularJS(一款优秀的前端框架))