标签: angular-ui-router

我想要实现的目标

我想转换到某个状态(登录),以防$ http请求返回401错误.因此我创建了一个$ http拦截器.

问题

当我试图在拦截器中插入'$ state'时,我得到一个循环依赖.为什么以及如何解决它？

码

//Inside Config function

    var interceptor = ['$location', '$q', '$state', function($location, $q, $state) {
        function success(response) {
            return response;
        }

        function error(response) {

            if(response.status === 401) {
                $state.transitionTo('public.login');
                return $q.reject(response);
            }
            else {
                return $q.reject(response);
            }
        }

        return function(promise) {
            return promise.then(success, error);
        }
    }];

    $httpProvider.responseInterceptors.push(interceptor);

使用ui-router,可以将一个$state或两个$stateParams注入控制器以访问URL中的参数.但是,通过$stateParams仅公开属于由访问它的控制器管理的状态的参数及其父状态来访问$state.params参数,同时具有所有参数,包括处于任何子状态的参数.

给定以下代码,如果我们直接加载URL http://path/1/paramA/paramB,这是控制器加载时的方式:

$stateProvider.state('a', {
     url: 'path/:id/:anotherParam/',
     controller: 'ACtrl',
  });

$stateProvider.state('a.b', {
     url: '/:yetAnotherParam',
     controller: 'ABCtrl',
  });

module.controller('ACtrl', function($stateParams, $state) {
   $state.params; // has id, anotherParam, and yetAnotherParam
   $stateParams;  // has id and anotherParam
}

module.controller('ABCtrl', function($stateParams, $state) {
   $state.params; // has id, anotherParam, and yetAnotherParam
   $stateParams;  // has id, anotherParam, and yetAnotherParam
}

问题是,为什么差异？是否有关于何时以及为何使用或避免使用其中任何一种的最佳实践指南？

我有一个服务:

angular.module('cfd')
  .service('StudentService', [ '$http',
    function ($http) {
    // get some data via the $http
    var path = 'data/people/students.json';
    var students = $http.get(path).then(function (resp) {
      return resp.data;
    });     
    //save method create a new student if not already exists
    //else update the existing object
    this.save = function (student) {
      if (student.id == null) {
        //if this is new student, add it in students array
        $scope.students.push(student);
      } else {
        //for existing student, find this student using id
        //and update it.
        for (i …

在AngularJS中,我看到有时我们使用$state.transitionTo(),有时我们使用$state.go().任何人都可以告诉我他们的差异,以及何时应该使用另一个？

我正在迁移基于AngularJS的应用程序以使用ui-router而不是内置路由.我把它配置如下所示

.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
    .state('home', {
        url: '/home',
        templateUrl : 'views/home.html',
        data : { pageTitle: 'Home' }

    })
    .state('about', {
        url: '/about',
        templateUrl : 'views/about.html',
        data : { pageTitle: 'About' }
    })
     });

如何使用pageTitle变量动态设置页面标题？使用内置路由,我可以做到

$rootScope.$on("$routeChangeSuccess", function(currentRoute, previousRoute){
    $rootScope.pageTitle = $route.current.data.pageTitle;
  });

然后在HTML中绑定变量,如下所示

<title ng-bind="$root.pageTitle"></title>

是否有类似的事件,我可以使用ui-router挂钩？我注意到有'onEnter'和'onExit'函数,但它们似乎与每个状态绑定,并且需要我重复代码为每个状态设置$ rootScope变量.

这是我第一次尝试使用ui-router.

这是我的app.js

angular.module('myApp', ['ionic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider){
  $urlRouterProvider.otherwise("/index.html");

  $stateProvider.state('index', {
    url: '/'
    template: "index.html",
    controller: 'loginCtrl'
  });


  $stateProvider.state('register', {
    url: "/register"
    template: "register.html",
    controller: 'registerCtrl'
  });
})

如你所见,我有两个州.我正在尝试注册这样的状态:

<a ui-sref="register">
  <button class="button button-balanced">
    Create an account
  </button>
</a>

但我得到了

无法从州''解决'注册'

例外.这里有什么问题？

使用angular-ui-router,如何在$ stateProvider上使用其他方法或者我该如何使用它？

我正在处理的应用程序包含各种状态(使用ui-router),其中某些州要求您登录,其他州是公开可用的.

我创建了一个方法来有效地检查用户是否已登录,我当前遇到的问题实际上是在必要时重定向到我们的登录页面.应该注意的是,登录页面当前未放在AngularJS应用程序中.

app.run(function ($rootScope, $location, $window) {


    $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {

        if (toState.data.loginReq && !$rootScope.me.loggedIn) {
            var landingUrl = $window.location.host + "/login";
            console.log(landingUrl);
            $window.open(landingUrl, "_self");
        }
    });
});

console.log正确显示了预期的URL.在那之后,我几乎尝试了从$ window.open到window.location.href的所有内容,无论我尝试过什么都没有重定向发生.

编辑(已解决):

发现了这个问题.

var landingUrl = $window.location.host + "/login";
$window.open(landingUrl, "_self");

变量landingUrl设置为'domain.com/login',这不适用于$ window.location.href(这是我尝试过的事情之一).但是在将代码更改为之后

var landingUrl = "http://" + $window.location.host + "/login";
$window.location.href = landingUrl;

它现在有效.

我正在创建一个基于标签的页面,显示一些数据.我在AngularJs中使用UI-Router来注册状态.

我的目标是在页面加载时打开一个默认选项卡.每个选项卡都有子选项卡,我希望在更改选项卡时打开默认子选项卡.

我正在测试onEnter函数和内部我正在使用$state.go('mainstate.substate');但由于循环效果问题似乎无法工作(在state.go上,它调用它的父状态等等,然后它变成一个循环).

$stateProvider

.state('main', {
  url: '/main',
  templateUrl: 'main.html',
  onEnter: function($state) {
    $state.go('main.street');
  }
})

.state('main.street', {
  url: '/street',
  templateUrl: 'submenu.html',
  params: {tabName: 'street'}
})

在这里,我创建了一个plunker演示.

现在一切正常,除了我没有打开默认选项卡,这正是我需要的.

感谢您的建议,意见和想法.

我有一个Angular 2模块,我在其中实现了路由,并希望在导航时存储状态.用户应该能够:1.使用搜索公式搜索文档2.导航到其中一个结果3.导航回searchresult - 无需与服务器通信

这可能包括RouteReuseStrategy.问题是:如何实现不应存储文档？

那么应该存储路径路径"文档"的状态,并且不应存储路径路径"documents /:id"'状态？