标签: angular-ui-router

我希望防止在rails设置超时时发生的一些闪烁,但是角度在资源的下一个授权错误之前不会知道.

发生的是模板被渲染,一些ajax调用资源发生,然后我们被重定向到rails设计登录.我宁愿在每次状态更改时对rails进行ping操作,如果rails会话已经过期,那么在呈现模板之前我会立即重定向.

ui-router有解决方案,可以放在每条路线上,但看起来根本不干.

我拥有的就是这个.但是,在国家已经过渡之前,这个承诺并没有得到解决.

$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
        //check that user is logged in
        $http.get('/api/ping').success(function(data){
          if (data.signed_in) {
            $scope.signedIn = true;
          } else {
            window.location.href = '/rails/devise/login_path'
          }
        })

    });

在呈现新模板之前,如何根据承诺的结果中断状态转换？

有没有办法看到所有已经开启的州$stateProvider？

在这种情况下,我希望我的状态分配分布在许多文件中.我想在不同的文件中run或config在不同的文件中检查构建的状态.

例如:

# component1.coffee
angular.module('zoo').config ($stateProvider) ->
  $stateProvider.state 'component1',
    url: '/component1'
    template: _template
    controller: 'Component1Ctrl'

# component2.coffee
angular.module('zoo').config ($stateProvider) ->
  $stateProvider.state 'component2',
    url: '/component2'
    template: _template
    controller: 'Component2Ctrl'

# componentNavigation.coffee
angular.module('zoo').run ($state) ->
  console.log 'All configured states:', $state.configuredStates # doesn't exist.

有什么东西会列出这两个州,component1并且component2？

我试图调用一个控制器,它应该与home.category 路由链接,但它没有被调用.这有什么不对？

$stateProvider    
  .state("home", {
    // Use a url of "/" to set a states as the "index".
    url: "/",
    templateUrl: APP_CONFIG.baseUrl +
      'partials/layouts/home.html',
    controller: 'MainCtrl'
  })
  .state("home.category", {
    // Use a url of "/" to set a states as the "index".
    url: "c/:categoryId/:categorySlug",
    controller: function($stateParams) {
      alert($stateParams.categoryId);
    }
  })

这是一个具有提交功能的控制器:

$scope.submit = function(){   

 $http.post('/api/project', $scope.project)
      .success(function(data, status){
        $modalInstance.dismiss(true);
      })
      .error(function(data){
        console.log(data);
      })
  }
}

这是我的考验

it('should make a post to /api/project on submit and close the modal on success', function() {
    scope.submit();

    $httpBackend.expectPOST('/api/project').respond(200, 'test');

    $httpBackend.flush();

    expect(modalInstance.dismiss).toHaveBeenCalledWith(true);
  });

我得到的错误是:

Error: Unexpected request: GET views/appBar.html

views/appBar.html是我的templateUrl:

 .state('project', {
    url: '/',
    templateUrl:'views/appBar.html',
    controller: 'ProjectsCtrl'
  })

所以不知何故,ui-router正在使我的$ httpBackend指向此而不是我的提交功能.在使用$ httpBackend的所有测试中,我遇到了同样的问题.

这有什么解决方案吗？

我正在使用角度UI-Router.我的路由配置中有以下内容

.config(function config($stateProvider) {
  $stateProvider.state('newsFeedView', {
      url: '/newsFeed',
      controller: 'newsFeedController',
      templateUrl: '../src/app/bulletinBoard/views/newsFeed.part.html',
      data: {
        pageTitle: 'News Feed'
      }
    })
    .state('tradeFeedView', {
      url: '/tradeFeed',
      controller: 'tradeFeedController',
      templateUrl: '../src/app/bulletinBoard/views/tradeFeed.part.html',
      data: {
        pageTitle: 'Trade Feed'
      }
    })
    .state('bulletinBoard', {
      url: '/bulletinBoard',
      views: {
        'tradeFeed': {
          url: "",
          controller: 'tradeFeedController',
          templateUrl: '../src/app/bulletinBoard/views/tradeFeed.part.html'
        },
        'newsFeed': {
          url: "",
          controller: 'newsFeedController',
          templateUrl: '../src/app/bulletinBoard/views/newsFeed.part.html'
        }
      },
      templateUrl: '../src/app/bulletinBoard/views/bulletinBoard.part.html'
    });
})

在我的索引页面中,我只使用以下方法调用视图:

<div class="container" ui-view></div>

在我的bulletinBoard.html中,我希望有一个嵌套视图:

<div ui-view="tradeFeed"></div>
<div ui-view="newsFeed"></div>

对于/ newsFeed页面和/ tradeFeed页面,这非常有效,但对于公告板,我无法在页面上看到任何内容.我哪里错了？

我正在使用angular-ui-router resolve来从服务器获取数据,然后再转到状态.有时,对服务器的请求失败,我需要通知用户有关失败的信息.如果我从控制器调用服务器,我可以在then其中调用我的通知服务,以防呼叫失败.我将调用放入服务器,resolve因为我希望后代状态在服务器启动之前等待服务器的结果.

如果对服务器的调用失败,我在哪里可以捕获错误？(我已经阅读了文档,但仍然不确定如何.另外,我正在寻找尝试这个新代码段工具的理由:).

"use strict";

angular.module('MyApp', ["ui.router"]).config([
  "$stateProvider",
  "$urlRouterProvider",
  function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("/item");
    $stateProvider
    .state("list", {
      url: "/item",
      template: '<div>{{listvm}}</div>' +
      	'<a ui-sref="list.detail({id:8})">go to child state and trigger resolve</a>' +
        '<ui-view />',
      controller: ["$scope", "$state", function($scope, $state){
          $scope.listvm = { state: $state.current.name };
      }]
    })
    .state("list.detail", {
      url: "/{id}",
      template: '<div>{{detailvm}}</div>',
      resolve: {
        data: ["$q", "$timeout", function ($q, $timeout) {
          var deferred = $q.defer();
          $timeout(function () {
            //deferred.resolve("successful");
            deferred.reject("fail");   // resolve fails …

我一直在努力寻找创建模块化,可扩展角度应用程序的最佳方法.我非常喜欢angular-boilerplate,angular-app等项目的结构,其中所有相关文件按部分和指令的特征组合在一起.

project
|-- partial
|   |-- partial.js
|   |-- partial.html
|   |-- partial.css
|   |-- partial.spec.js

但是,在所有这些示例中,模板URL相对于基本URL加载,而不是相对于当前文件:

angular.module('account', [])
.config(function($stateProvider) {
  $stateProvider.state('account', {
    url: '/account',
    templateUrl: 'main/account/account.tpl.html', // this is not very modular
    controller: 'AccountCtrl',
  });
})

这不是非常模块化的,并且可能难以在大型项目中维护.templateUrl每次移动任何这些模块时,我都需要记住改变路径.如果有一些方法可以相对于当前文件加载模板,那将是很好的,如:

templateUrl: './account.tpl.html'

有没有办法在角度做这样的事情？

您好我是angularJS的新手,并一直试图根据用户标准阻止访问某些状态.

这来自ui-router的常见问题解答中描述了我想要做的事情,但我无法让它正常工作.我需要做什么,但在数据对象中完全要做到这一点？

(我看到有人在一些博客文章教程中投入"真实"并像我一样使用它,但这似乎没有用,因为我得到一个错误,说明needAdmin没有定义)

这是我的代码:

angular.module('courses').config(['$stateProvider',
    function($stateProvider) {
        // Courses state routing
        $stateProvider.
        state('listCourses', {
            url: '/courses',
            templateUrl: 'modules/courses/views/list-courses.client.view.html'
        }).
        state('createCourse', {
            url: '/courses/create',
            templateUrl: 'modules/courses/views/create-course.client.view.html',
            data: {
                needAdmin: true
            }
        }).
        state('viewCourse', {
            url: '/courses/:courseId',
            templateUrl: 'modules/courses/views/view-course.client.view.html'
        }).
        state('editCourse', {
            url: '/courses/:courseId/edit',
            templateUrl: 'modules/courses/views/edit-course.client.view.html',
            data: {
                needAdmin: true
            }
        });     

    }
]);


angular.module('courses').run(['$rootScope', '$state', 'Authentication', function($rootScope, $state, Authentication) {
  $rootScope.$on('$stateChangeStart', function(e, to) {

    var auth = Authentication;

    console.log(auth.user.roles[0]);
    if (to.data.needAdmin && auth.user.roles[0] !== 'admin') {
      e.preventDefault();
      $state.go('/courses');
    }

  }); …

我试图在ui-router解决方案内重定向,并想知道是否有办法在路由器解析器中重新路由.目前,这并不像人们想象的那样有效.

resolver(auth, $state){
   if(!auth.isLoggedIn()){
       $state.go('noLoggedInPath');
   }
}

如何在旋转变压器中正确重定向？

我的临时黑客就是这个,但我对此并不满意.

resolver(auth, $state, $timeout){
   if(!auth.isLoggedIn()){
        $timeout(function () {

             $state.go('noLoggedInPath');
        }, 0);
   }
}

我正在使用Angular 5建立一个小型宣传册类型的网站.到目前为止,我已经设置了路由,页面标题会根据激活的路由动态变化.我使用此博客上的说明进行了此操作:https://toddmotto.com/dynamic-page-titles-angular-2-router-events

我目前正在app.module.ts中存储我的路线和标题:

imports: [
    BrowserModule,
    RouterModule.forRoot([
      { 
        path: '', 
        component: HomeComponent,
        data: {
          title: 'Home'
        }
      },
      { 
        path: 'about', 
        component: AboutComponent,
        data: {
          title: 'About'
        } 
      },
      { 
        path: 'products-and-services', 
        component: ProductsServicesComponent,
        data: {
          title: 'Products & Services'
        }  
      },
      { 
        path: 'world-class-laundry', 
        component: LaundryComponent,
        data: {
          title: 'World Class Laundry'
        }  
      },
      { 
        path: 'contact', 
        component: ContactComponent,
        data: {
          title: 'Contact'
        }  
      },
      { 
        path: '**', 
        component: NotFoundComponent,
        data: {
          title: 'Page Not Found' …