Question

上下文 用户可以使用标识其页面的唯一URL slug进行注册，例如＆＃39; http://example.com/slug＆＃39;

当前状态 在我的Express.js文件中，我成功检查了我的数据库以查看用户是否存在slug，然后重定向用户来自＆＃39; http://example.com/slug＆＃39; 至＆＃39; http://example.com/#!/slug＆＃39;利用Angular的路由。

但是，使用Angular，我无法在路由器文件中使用$ http或$ location服务（因为它发生在module.config中...有关详细信息，请参阅this Stack Overflow explanation ）。

欲望基本上我想要做的是将用户路由到一个默认的＆＃39;找到有效的slug时查看，如果找不到则查看home。任何建议都会非常感激。

作为参考，我的module.config代码可以在这里找到（注意我想要使用的＆＃39;默认＆＃39;状态是＆＃39;搜索＆＃39;）：

core.client.routes.js

'use strict';

// Setting up route

    angular.module('core').config(['$stateProvider', '$urlRouterProvider', 
        function($stateProvider, $urlRouterProvider) {

            // Redirect to home when route not found.
            $urlRouterProvider.otherwise('/');

            // Home state routing
            $stateProvider.
            state('home', {
                url: '/',
                templateUrl: 'modules/core/views/home.client.view.html'
            }).
            state('search', {
                url: '/search',
                templateUrl: 'modules/core/views/search.client.view.html'
            });
        }
    ]);

我想做什么，是这样的......

'use strict';

// Setting up route
angular.module('core').config(['$stateProvider', '$urlRouterProvider', '$http', '$location',
    function($stateProvider, $urlRouterProvider, $http, $location) {

        // Get current slug, assign to json.
        var slug = $location.path();
        var data = {
            link: slug
        };

        // Check db for slug
        $http.post('/my/post/route', data).success( function(response) {
            // Found slug in db
        }).error( function(response) {
            // Route to home
            $location.path('/');
        });

        // Home state routing
        $stateProvider.
        state('home', {
            url: '/',
            templateUrl: 'modules/core/views/home.client.view.html'
        }).
        state('search', {
            // Set URL to slug
            url: '/' + slug,
            templateUrl: 'modules/core/views/search.client.view.html'
        });
    }
]);

Answer 1

要直接回答您的问题，您要做的是使用路线“resolve”来检查依赖关系并重定向到相应的视图：

angular.module('app', ['ui.router','ngMockE2E'])

  .run(function ($httpBackend) {
    $httpBackend.whenGET(/api\/slugs\/.*/).respond(function (method, url) {
      return url.match(/good$/) ? [200,{name: 'john doe'}] : [404,''];
    });
  })

  .config(function ($stateProvider) {
    $stateProvider
      .state(
        'search',
        {
          url: '/search?terms=:slug',
          template: '<h1>Search: {{vm.terms}}</h1>',
          controllerAs: 'vm',
          controller: function ($stateParams) {
            this.terms = $stateParams.slug;
          }
        }
      )
      .state(
        'slug',
        {
          url: '/:slug',
          template: '<h1>Slug: {{vm.user.name}}</h1>',
          controllerAs: 'vm',
          controller: function (user) {
            this.user = user
          },
          resolve: {
            user: function ($q, $http, $stateParams, $state) {
              var defer = $q.defer();
              $http.get('http://somewhere.com/api/slugs/' + $stateParams.slug)
                .success(function (user) {
                  defer.resolve(user);
                })
                .error(function () {
                  defer.reject();
                  $state.go('search', {slug: $stateParams.slug});
                });
              return defer.promise;
            }
          }
        }
      );
  });

<div ng-app="app">
    <script data-require="angular.js@*" data-semver="1.3.6" src="https://code.angularjs.org/1.3.6/angular.js"></script>
    <script data-require="ui-router@*" data-semver="0.2.13" src="//rawgit.com/angular-ui/ui-router/0.2.13/release/angular-ui-router.js"></script>
    <script data-require="angular-mocks@*" data-semver="1.3.5" src="https://code.angularjs.org/1.3.5/angular-mocks.js"></script>
    <a ui-sref="slug({slug: 'good'})">Matched Route</a>
    <a ui-sref="slug({slug: 'bad'})">Redirect Route</a>
    <div ui-view></div>
  </div>

但是，在您的示例中，您可能需要重新审视一些事项：

如果您已经通过快递验证和重定向服务器端，是否需要执行此检查客户端？
你似乎有点超载/ route，如果home失败，它会重定向到自己
你正在app init上从$ location抓取slug，而不是当视图被路由到post init时，你需要在路由到视图时抓住它
您可能需要考虑使用GET请求来获取/读取此请求的数据，而不是使用通常用于写入操作的POST（但这是一个不同的故事）。

MEANJS：检查db是否为url并路由到动态Angular状态

1 个答案: