【前端】我的angularjs使用记录

阅读数: 2022-03-30

ui-router路由

【ionic+angularjs】angularjs ui-router路由简介（$urlRouter、$state、$stateProvider、ui-sref….）

reloadOnSearch

/* @param {boolean=} [stateConfig.reloadOnSearch=true]
   * <a id='reloadOnSearch'></a>
   *
   * If `false`, will not retrigger the same state
   *   just because a search/query parameter has changed (via $location.search() or $location.hash()). 
   *   Useful for when you'd like to modify $location.search() without triggering a reload.
   * <pre>reloadOnSearch: false</pre>
*/
const app = angular.module('myAPP', ['ui-router'])
app.config(['$stateProvider', function($stateProvider) {
    $stateProvider.state('login', {
        url: '/login',  // url: '/login?index'
        templateUrl: 'views/login/login.html',
        controller: 'LoginCtrl',
        reloadOnSearch: false
    })
}])
app.controller(['$timeout', '$location', function($timeout,  $location) {
    console.log($state.current)
    const index = parseInt($location.search().index || '0')
    $timeout(_ => $location.search({index: ++index}), 3000)
}])

补充：像上面列子情况无论reloadOnSearch是true还是false都没有影响，因为路由没有定义参数 index, index的变化不会触发路由刷新

$stateProvider的when和otherwise写法

const stateResolve = function(stateName) {
  return function ($injector) {
    const $state = $injector.get('$state')
    $state.go(stateName)
  }
}
// $urlRouterProvider.when('', '/login')
$urlRouterProvider.when('', stateResolve('login'))
// $urlRouterProvider.when('', '/404')
$urlRouterProvider.otherwise(stateResolve('404'))

$stateProvider
    .state('login', {
        url: '/login',
        template: require('views/login/login.html'),
        controller: 'loginCtrl'
    })
	.state('404', {
        url: '/404',
        template: require('views/error/404.html'),
        controller: 'errorCtrl'
    })

参考：https://github.com/angular-ui/ui-router/issues/1699#issuecomment-144310960

路由跳转前做异步操作

angular-ui-router === v0.3.1

注意这里如果url中存在未定义的参数，$state.go会丢失这些参数

const cancelStateChangeStart = $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
    // 已登录
    if (localStorage.getItem('AUTH')) return cancelStateChangeStart()
    
    // 未登陆获取accessToken进行登录(这个过程用$timeout代替,实际过程自己实现)
    event.preventDefault();
    $timeout(function() {
        cancelStateChangeStart()
        $state.go(toState, toParams);
    }, 3000);
});

window.onbeforeunload = function (e) {
    localStorage.removeItem('AUTH')
}

参考：https://github.com/angular-ui/ui-router/issues/1699#issuecomment-111457570(需要注意浏览器返回键的影响，这里如果只是第一次进入的判断即可使用，作为第一次进入的判断，为了防止影响，这里只运行一次后取消事件监听)

问题：上述方案需要路由参数全部有定义，如果没有定义的参数会在$state.go的时候丢失。如果不希望如此的话除了通过路由的resolve阻止想不到其他方法了（路由resolve使用的话需要提前设计好路由，否则可能要添加好几个resolve）

**页面缓存及动态刷新解决方案 **

不缓存可以使用下面方式设置

// 路由跳转的时候强制reload（会导致所有路由缓存失效，慎用）
$state.go('app.home',{},{reload：true})
// 设置路由的时候不缓存
$stateProvider.state('app.home', {
    cache: false,
    ...
})
// ionic的一些方式
$ionicConfigProvider.views.maxCache(0);
<ion-view class="home-view" cache-view="false">

动态刷新

1
2
3

$scope.$on('$ionicView.enter', function() {
  //每次进入页面都会执行enter钩子
});

$cacheFactory服务

https://www.shuzhiduo.com/A/mo5kg26L5w/

$q 服务

$q.catch() method fails in IE8

promise.then(function(response) {
  // success
})
["catch"](function(response) {
  // error
})
["finally"](function(response) {
  // finally
});

$q增加allSettled方法

app.run(['$q', function ($q) {
  $q.allSettled = function(promiseList) {
    const defer = $q.defer
    const results = []
    let counter = 0
    for (let i = 0; i < promiseList.length; i++) {
      const pInstance = promiseList[i]
      pInstance.then(res => {
        results[i] = {
          status: 'fulfilled',
          value: res
        }
      }).catch(err => {
        results[i] = {
          status: 'rejected',
          reason: err
        }
      }).finally(_ => {
        counter += 1
        counter === promiseList.length && defer.resolve(results)
      })
    }
    return defer.promise
  }
}])

$q中的错误捕获

通过下面列子得出结论：

1. $q的同步错误try catch可以捕获（Promise是catch捕获，差异的地方，需要一致建议利用then可以被捕获的方式来模拟，如直接 $q.resolve().then().catch() ）

2. $q的异步错误无法捕获(Promise一样)

3. $q.then里面的错误$q.catch可以捕获(Promise一样)

4. $q.catch和$q.finally里面的错误无法捕获(Promise一样)

5. $q.finally里面的错误有个很大的问题就是无法打印出来，会被隐藏（具体原因可以见源码实现，因为finally里面的handleCallback没有exceptionHandler(e)，这时候要可以输出错误需要在finally的最后再加一个catch或者整体用try catch包裹起来，如直接 $q.resolve().finally().catch() ）

因此异步代码和catch finnally都需要使用try catch来包裹

如果希望$q和Promise完全一致，需要$q用Promise的写法，并且修改angularjs源码，给resolveFn执行的时候try catch处理下

综上所述，对于异常出错的情况考虑在内的话，最好用下面的写法

$q.resolve().then().finally().catch()

// const Q = angular.injector(['ng']).get('$q')
// function getNumber1() {
//   const defer = Q.defer()
//   setTimeout(_ => {
//     // throw new Error('err111111')
//     defer.resolve(111111)
//   }, 500)
//   return defer.promise
// }
// function getNumber2() {
//   const defer = Q.defer()
//   setTimeout(_ => {
//     // throw new Error('err222222')
//     defer.resolve(22222)
//   }, 500)
//   return defer.promise
// }

function getNumber1() {
  return new Promise((resolve, reject) => {
    setTimeout(_ => {
      // throw new Error('err111111')
      resolve(111111)
    }, 500)
  })
}
function getNumber2() {
  return new Promise((resolve, reject) => {
    setTimeout(_ => {
      // throw new Error('err222222')
      resolve(22222)
    }, 500)
  })
}
try {
  getNumber1().then(_ => {
    // throw new Error('err111111')
    return getNumber2()
  }).then(res => {
    // throw new Error('err222222')
    console.log(res)
  }).catch(err => {
    console.log('err', err)
    // throw new Error('err333333')
  }).finally(_ => {
    // throw new Error('err444444')
  })
} catch (e) {
  console.log('catch err', e)
}


var $Q = function Q(resolver) {
    if (!isFunction(resolver)) {
        throw $qMinErr('norslvr', "Expected resolverFn, got '{0}'", resolver);
    }

    var deferred = new Deferred();

    function resolveFn(value) {
        deferred.resolve(value);
    }

    function rejectFn(reason) {
        deferred.reject(reason);
    }

    // 需要改成这样子才能抛出错误，要改源码，很麻烦，建议利用then在defer的实现中有try...catch的实现
    // $q.resolve().then(_ => { 写你的promise方法 })
    try {
        resolver(resolveFn, rejectFn);
    } catch(e) {
        rejectFn(e)
        $exceptionHandler(e); // 注意抛出，否则被catch了，全局监听不到
    }

    return deferred.promise;
};

$translate

"commisionMessage": "BLA {{fee}} BLA BLA" 传参：

{{'commisionMessage' | translate : {fee:fee} }}|

<span data-translate="commisionMessage" data-translate-values="{ fee: fee }"></span>

$translate('commisionMessage', { fee: fee });

$compile

在 AngularJS 中动态编译 HTML 片段时如何绑定(bind)事件处理程序

https://www.coder.work/article/6027202

“计算属性”

https://deepinout.com/angularjs/angularjs-questions/238_angularjs_computed_properties_in_angularjs.html

<!DOCTYPE html>
<html lang="zh" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.3/angular.js"></script>
</head>
<body ng-controller="myCtrl">
    {{ person.fullName }}
    <button ng-click="changeFirstName()">修改</button>
    <script>
        var myApp = angular.module('myApp', [])
        myApp.controller('myCtrl', function($scope){
            $scope.person = {
                firstName: 'Johnny',
                lastName: 'Doe'
            };
            
            Object.defineProperty($scope.person, 'fullName', {
                get: function() {
                    return $scope.person.firstName + ' ' + $scope.person.lastName;
                }
            });
             
            
            $scope.changeFirstName = function(){
                $scope.person.lastName = Date.now()
            }
        })
    </script>
</body>
</html>

问题

Old values in $watchGroup’s callback is not correct

本文作者： ionluo
本文链接： http://www.ionluo.cn/blog/posts/cce553db.html
版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！