【总结】angularJs

最新推荐文章于 2019-10-20 18:25:13 发布

YIYIYI1205

最新推荐文章于 2019-10-20 18:25:13 发布

阅读量172

点赞数

分类专栏：前端学习 angularJs

本文链接：https://blog.csdn.net/weixin_40326021/article/details/84023978

版权

前端学习同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

angularJs

10 篇文章 0 订阅

订阅专栏

1、表单验证(只适合校验type存在的类型，不存在的类型要用指令的require:ngModal进行验证)

form标签，定义name

input标签，设置type类型（email、name等），name 和ng-modal和required（必填就要有required）

1:未修改的表单
这是一个布尔类型的属性，用来判断用户是否修改了表单，如果未修改，值为true否则为false
formName.inputfieldName.$pristine
2:修改过的表单
只要用户修改过表单无论输入是否验证通过都返回true
formName.inputfieldName.$dirty
3:合法的表单
这个布尔属性用来判断表单的内容是否不合法，如果当前的表单内容是合法的。该属性就返回为true
formName.inputfieldName.$valid
4：不合法的表单
这个布尔属性用来判断表单的内容是否不合法，如果当前的表单内容是不合法的，该属性就返回为true
formName.inputfieldName.$invalid
5：错误
这是angular提交的另一个非常有用的属性：$error对象，她包含当前表单所有的验证内容。以及它们是否合法的信息，可以这样来访问formName.inputfieldName.$error,如果验证失败这个属性值为true，如果值为false说明通过了验证。

必填项：验证表单输入是否已经添加之前在dom元素上加上required标记即可

<input type="text" required/>

最大/小长度：验证表单输入的文本是否小/大于某个最小值，可以在输入的字段上使用指令 ng-maxlength="{number}"/ng-minlength="{number}"

<input type="text" ng-minlength="5" ng-maxlength="15"/>

电子邮件:验证输入的文本是否是电子邮箱可以使用 type=email来实现

<input type="email" name="email" ng-model="user.email" />

是否数字:验证输入的文本是否是为数字可以使用 type=number来实现

<input type="number" name="age" ng-model="user.age" />

URL:验证输入的文本是否是为url可以使用 type=url来实现

<input type="url" name="homepage" ng-model="user.homepage" />

angular内置的验证指令

匹配模式：使用ng-pattern="/PATTERN/"来确保输入能匹配指定的正则表达式

<input type="text" ng-pattern="[a-zA-Z]"/>

<form name="signup_form" novalidate ng-submit="signupForm()">
        <div>
            <label>用户名</label>
            <input type="text" placeholder="Name" name="name" ng-model="signup.name" ng-minlength=3 ng-maxlength=20 required />
            <div class="error" ng-show="signup_form.name.$dirty && signup_form.name.$invalid">
                <small ng-show="signup_form.name.$error.required">姓名必填</small>
                <small ng-show="signup_form.name.$error.minlength">姓名最少三个字符</small>
                <small ng-show="signup_form.name.$error.maxlength">姓名最多20个字符</small>
            </div>
        </div>

        <div>
            <label>密码</label>
            <input type="text" placeholder="Name" name="name" ng-model="signup.name" ng-minlength=3 ng-maxlength=20 required />
            <div class="error" ng-show="signup_form.name.$dirty && signup_form.name.$invalid">
                <small ng-show="signup_form.name.$error.required">密码必填</small>
                <small ng-show="signup_form.name.$error.minlength">密码最少三个字符</small>
                <small ng-show="signup_form.name.$error.maxlength">密码最多20个字符</small>
            </div>
        </div>
        <button type="submit" ng-disabled="signup_form.$invalid" class="button radius">提交</button>
    </form>

2、$q.deferred

.factory('userService', ['$http', '$q', function ($http, $q) {

var userService = {}; // 返回的服务

this.urlForRandomUser = "https://randomuser.me/api/";

var that = this; // 获取当前作用域，下面要用到

userService.getRandomUser = function () {

var defered = $q.defer();

$http.get(that.urlForRandomUser)

.success(function (data) {

defered.resolve(data.results[0]);

})

.error(function (err) {

defered.reject(err);

});

return defered.promise; // 把defered对象中的promise对象返回出来

};

angular.module('soc.simba').factory('Simba', [
    '$q',
    '$http',
   ,　function $q, $http){
     var simba={}
simba.send = function(method, url, params, data){
    var deferred = $q.defer();
    $http({
        url: url,
        method: method,
        params: params,
        data: data,
        headers: {
            "Accept-Language": "zh_CN",
            "Content-Type": "application/json;charset=UTF-8"
        }
    }).then(function(resp){
        deferred.resolve(resp.data);
    },function(resp){
        deferred.reject(resp.data);
    }).finally(function() {
       不管成功失败都要执行的
    });
    return deferred.promise;   返回promise对象
};
     return simba;    最后返回simba
}

使用：

angular.module("soc.app.event").service("eventRuleService", [
    "$q",
    "Simba",
    eventRuleService
]);

function eventRuleService($q,Simba){
    return {
        upLoad:upLoad //导入规则
    };
    function upLoad(filename){
        var deferred = $q.defer();
        Simba.post('/api/v1/events/rules/import',{},{filename:filename}).then(function(res){
            deferred.resolve(res);
        },function(res){
            deferred.reject(res);
        });
        return deferred.promise;
    }
}

再在外层使用：

angular.module('soc.app.event').controller('eventRuleController',[
    'eventRuleService',
    'WebUploader'，
    eventRuleController]);
function eventRuleController(eventRuleService) {
    //上传文件
    $scope.myUploader = WebUploader.create({
        server: "/storage/upload/",
        pick: '#selectLicFile',
        auto: true
    });
    $scope.myUploader.on('fileQueued', function (file) {
        let ext = file.ext;
        let size = file.size;
        if (ext !== 'dat') {
            serPNotify.error("规则格式不正确，请上传正确的规则");
            $scope.reUpload();
        } else {
            if (size >= 500 * 1024 * 1024) {
                serPNotify.error("规则大小不合法，请上传正确的规则");
                $scope.reUpload();
            }
        }
    });
    $scope.myUploader.on('uploadSuccess', function (file, resp) {
        eventRuleService.upLoad(resp.filename).then(function(resp){
            serPNotify.success('规则上传成功');
        },function (resp) {
            serPNotify.error('规则上传失败，请重新上传');
        });
    });
    $scope.myUploader.on('uploadError', function (file) {
        $scope.$apply(function () {
            serPNotify.error('规则上传失败，请重新上传');
            $scope.reUpload();
        });
    });
}

3、service和factory

定义服务

最好使用service：service是构造函数，不需要return

而factory是普通函数，所以要return

定义Service：app是模块 var app=angular.module("app");

app.service('MyService', function () {
  this.sayHello = function () {
    console.log('hello');
  };
});

.service()方法用来在我们模块里定义一个service服务,它接收一个字符串名字和一个方法作为参数。也就是说，当我们定义好一个service，就可以在我们的其他组件里注入和使用，比如controllers,directives和filters：

app.controller('AppController', function (MyService) {
  MyService.sayHello(); // logs 'hello'
});

用Factory进行同样的实现

app.factory('MyService', function () {
  return {
    sayHello: function () {
      console.log('hello');
    }
  }
});

　　.factory()方法一样，接收一个字符串名字和一个方法两个参数，来定义一个factory, 和service一样，在其他地方注入使用。

　　service在使用this指针，而factory直接返回了一个对象。

因为Service是一个构造函数，但Factory不是。在Angular的底层，当这段代码在Service构造函数初始化的时候，会去调用object.create()。而Factory就一个普通被调用的方法，所以它要显式地返回一个对象。

4、$http

$http({
    url: url,
    method: method,
    params: params,
    data: data,
    headers: {
        "Accept-Language": "zh_CN",
        "Content-Type": "application/json;charset=UTF-8"
    }
})

post请求的参数是data

get请求的参数是params

因为GET请求的参数都是在URL上的，服务器并不会读取http body里面的数据,这样我们传递的就是Params里的请求的参数了；如果想让服务器读取http body里面的数据那就需要用POST请求了，POST请求的参数就存放在body

angular的$http传值Content-Type默认是'application/json'

headers: {'Content-Type': 'application/x-www-form-urlencoded'}必须置于最后

5、ng-class满足判断条件

<span class="oringinal" ng-class="{false : 'disabled'}[checkedNum > 0 && dataRuleList.length > 0]" uib-tooltip="批量删除规则" ng-click="batchOperate('delete')">
    <i class="fa fa-trash"></i>
</span>

6、点击事件传参

<div class="col-md-3">
    <input type="text" class="form-control" ng-model="eventObject"/>
</div>
<button class="btn btn-primary" ng-click="eventConfigSearch('eventObject',eventObject)">查询</button>

$scope.eventConfigSearch=function(type,content){
  可以接收到input框输入的content
};

7、懒加载

8、指令校验ip

9、指令可模糊查询的选择框

10、

、ng-true-value

当我们点击checkbox 选中复选框时，ng-model 的绑定默认值是true，取消选中时为false.

<input ng-model="checkboxModel" type="checkbox" >//选中时，checkboxModel 等于 true

如果需要获取的值为字符串或者数字呢？

那么就需要用到 ng-true-value 和ng-false-value

选中checkbox 时：

<input ng-model="checkboxModel" type="checkbox" ng-true-value=" 'hello wolrd' " > //注意 ng-true-value 中的值如果需要显示字符串的话必须使用单引号

取消选中checkbox 时：

、双向数据绑定

YIYIYI1205

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录