angularjs总结技巧你不得不佩服的实用方法

发布时间:2018-11-10 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了angularjs总结技巧你不得不佩服的实用方法脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

获取url中的网络后缀元素

 function getParam(paramName) {
        paramValue = "";
        isFound = false;
        if (this.location.search.indexOf("?") == 0 && this.location.search.indexOf("=") > 1) {
            arrSource = unescape(this.location.search).substring(1, this.location.search.length).split("&");
            i = 0;
            while (i < arrSource.length && !isFound) {
                if (arrSource[i].indexOf("=") > 0) {
                    if (arrSource[i].split("=")[0].toLowerCase() == paramName.toLowerCase()) {
                        paramValue = arrSource[i].split("=")[1];
                        isFound = true;
                    }
                }
                i++;
            }
        }
        return paramValue;
    }

等待DOM元素加载完毕

 $scope.$on("$viewContentLoaded", function () {
 
    })
angular.element(document).ready(function () {
 
 
    });

封装http服务

通过$q的服务 将成功的封装到defer.resolve()中,将错误的封装到defer.reject()中 这样即可
MainModel.factory("httpService",
    function ($http, $q) {
        return {
            post: function (suburl, params) {
                var defer = $q.defer();
                $http({
                    method: 'POST',
                    params: params,
                    url: jsapi.getDomain() + suburl,
                }).success(function (data) {
                    if (data.retcode == 0) {
                        defer.resolve(data.items);
                    }
                    else
                        defer.reject(data.message);
                }).error(function (data) {
                    defer.reject(data);
                });
                return defer.promise;
            },

 数据交互实用技巧

Promise的利用 ES6定义了Promise对象。这个对象挺好用的,特别是用在与后台交互的时候。既预防回调过深,又可以针对一些情况做统一处理,还提高了代码的可读性。在angularJs里面也封装了这样一个服务,就是$q。

$q是做为angularjs的一个服务而存在的,只是对promise异步编程模式的一个简化实现版。defer对象(延迟对象)可以通$q.defer()获取,该对象有三个方法:

     resolve(value):向promise对象异步执行体发送消息告诉他我已经成功完成任务,value即为发送的消息。

     reject(value): 向promise对象异步执行体发送消息告诉他我已经不可能完成这个任务了,value即为发送的消息。

     notify(value): 向promise对象异步执行体发送消息告诉他我现在任务完成的情况,value即为发送的消息。

  这些消息发送完promise会调用现有的回调函数。

promise即与这个defer对象的承诺对象。promise对象可以通过defer.promise获取,promise对象的一些方法:

  then(successCallback,errorCallback,notifyCallback):参数为不同消息下的不同回调函数,defer发送不同的消息执行不同的回调函数,消息作为这些回调函数的参数传递。返回值为回一个promise对象为支持链式调用而存在。当第一个defer对象发送消         息后,后面的promise对应的defer对象也会发送消息,但是发送的消息不一样,不管第一个defer对象发送的是reject还是resolve,第二个及其以后的都是发送的resolve,消息是可传递的。   catch(errorCallback):then(null,errorCallback)的缩写。   finally(callback):相当于then(callback,callback)的缩写,这个finally中的方法不接受参数,却可以将defer发送的消息和消息类型成功传递到下一个then中。

  defer():用来生成一个延迟对象 var defer =$q.defer();

  reject():参数接收错误消息,相当于在回调函数中抛出一个异常,然后在下一个then中调用错误的回调函数。

   all()参数接收为一个promise数组,返回一个新的单一promise对象,当这些promise对象对应defer对象全部解决这个单一promise对象才会解决,当这些promise对象中有一个被reject了,这个单一promise同样的被reject了。

   when():接收第一个参数为一个任意值或者是一个promise对象,其他3个同promise的then方法,返回值为一个promise对象。第一个参数若不是promise对象则直接运行success回调且消息为这个对象,若为promise那么返回的promise其实就是对这个promise      类型的参数的一个包装而已,被传入的这个promise对应的defer发送的消息,会被我们when函数返回的promise对象所接收到。

具体用法如下:

在angular中,定义一个专门用来交互的服务。

get: function (url, options) {            <br>   var deferred = $q.defer();    <br>   showTip();
        $http.get(url, options).success(function (data) {
           hideTip();
             if (data.Success) {
                 deferred.resolve(data);
             } else {
                deferred.reject(data.Message);
           }
        }).error(function (data) {
           hideTip();
          deferred.reject(data);
          });
        return deferred.promise;
 }
//controller里面的调用
 
get('url',params)
 
.then(function (data) {
 
      //这里是successCallback
    },function (data) {
       //这里是errorCallback
    });

去除url中总是默认带有"#"

在设置route的时候,开启HTML5模式.
angular.module('router', ['ngRoute'])
.config(['$routeProvider', '$locationProvider',
  function($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);   // 设置一下这句即可
  }
]);

ng-click="expression"以及类似的指令,如何在expression中书写多个表达式?

比如我在一个ng-click中想要给2个变量赋值,通过";"分号分割即可:

<a ng-click="obja=1;objb=2"></a>

 快速定位到某个位置

一般来讲页面内通过<a id="bottom"></a>这样的形式就可以结合js代码,实现快速定位.在angular中也是通过类似的原理实现,代码如下:
 var old = $location.hash();
          $location.hash('batchmenu-bottom');
          $anchorScroll();
          $location.hash(old);
觉得可用,就经常来吧!脚本宝典 欢迎评论哦!angularjs技巧,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的angularjs总结技巧你不得不佩服的实用方法全部内容,希望文章能够帮你解决angularjs总结技巧你不得不佩服的实用方法所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: