在angularjs路线中使用resolve

时间:2015-08-20 10:01:33

标签: javascript angularjs

我正在开发angularjs app,我的配置如下:

.config(function($stateProvider,$urlRouterProvider, $localStorage){
  $stateProvider
  .state('Login',{
    url:'/login',
    templateUrl:'templates/login.html',
    controller:'LoginCtrl',
    resolve: {
    /*   if($localStorage.userInfo === null || $localStorage.userInfo === undefined){
          }else{
           $scope.signInUser();
  }*/
    }
  })

我的login.html看起来像这样:

<form name="loginform"></form>

我希望如果$ localstorage.userInfo存在,请不要显示login.html,而是调用$ scope.signInUser函数来显示表单。

如何使用路线解析来做到这一点?我可以请一些指示吗?

我尝试过更简单的方法,但我最终遇到了10个消化周期错误,所以我被建议使用解决方案。

我的完整路线如下:

.config(function($stateProvider,$urlRouterProvider, $localStorage){
  $stateProvider
  .state('Login',{
    url:'/login',
    templateUrl:'templates/login.html',
    controller:'LoginCtrl',
    resolve: {
       if($localStorage.userInfo === null || $localStorage.userInfo === undefined){
          }else{
           $scope.signInUser();
  }
    }
  })

  .state('Deployment',{
    url:'/deployment',
    templateUrl:'templates/deployment.html'
  })
  .state('Bill',{
    url:'/bills',
    templateUrl:'templates/bills.html'
  })
//$urlRouterProvider.otherwise('/login');

$urlRouterProvider.otherwise(function ($injector) {
           var $state = $injector.get('$state');
            $state.go('Login');
        });

2 个答案:

答案 0 :(得分:0)

我是如何实现的

routes.js

app.config(["$routeProvider", "$locationProvider", function($routeProvider, $location) {
    $routeProvider.when("/home", angularAMD.route({
        templateUrl: "templates/pages/home.html",
        controller: "HomeController",
        controllerUrl: "app/controllers/home_controller",
        resolve: {
            weekendTypes: function(WeekendTypes) {
                return WeekendTypes.getAll()
            }
        }
    }));
}]);

factory.js

app.factory("WeekendTypes", ["$http", function($http) {
    return {
        getAll: function() {
            var _apiurl = config_data.GENERAL_CONFIG.AJAX_URL + "weekend/getAll",
                promise = $http({
                    method: "GET",
                    url: _apiurl
                }).success(function(data, status, headers, config) {
                    return data
                });
            return promise
        }
    }
}])

你应该使用这样的东西

getData: function(){
   var deferred = $q.defer();
   $timeout(function(){
     var data=localStorageService.get('description'),
     deferred.resolve(data);
   },3000);
   return deferred.promise;
}

答案 1 :(得分:0)

在共享代码之前必须自己尝试一下。

从设置的本地存储值中删除resolve函数,如下面的数据

state('Login',{
   url:'/login',
   templateUrl:'templates/login.html',
   controller:'LoginCtrl',
   data : {userIfno : $localStorage.userInfo}
  })

然后使用.run函数

.run($rootScope, $state) {
    $rootScope.$on('$stateChangeStart', function(toState) {
        if (toState.data.userIfno === '') {
            $state.go('Login', {}); //here set proper state
        }
    });
}

希望这会对你有所帮助。