1

上下文 用户可以注册一个唯一的 URL slug 来标识他们的页面，例如“ http://example.com/slug ”。

当前状态 在我的 Express.js 文件中，我成功检查了我的数据库以查看用户是否存在 slug，然后将用户从“ http://example.com/slug ”重定向到“ http://example.com/ #!/slug ' 以利用 Angular 的路由。

但是，对于 Angular，我不能在我的路由器文件中使用 $http 或 $location 服务（因为它发生在 module.config 中......有关更多详细信息，请参阅此 Stack Overflow 说明）。

欲望 基本上我想做的是在找到有效的 slug 时将用户路由到“默认”视图，或者如果没有，则将用户路由到“默认”视图。任何建议将不胜感激。

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

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'
        });
    }
]);
4

1 回答 1

2

要直接回答您的问题，您要做的是使用路由“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>

但是，您可能希望在示例中重新审视一些事情：

  1. 如果您已经通过 express 验证和重定向服务器端，是否需要执行此检查客户端？
  2. 你似乎有点超载 / 路由，如果 home 失败，它会重定向到自己
  3. 您在应用程序初始化时从 $location 抓取 slug，而不是当视图被路由到可能是 post init 时，您需要在路由到视图时抓取它
  4. 您可能需要考虑使用 GET 请求来获取/读取此请求的数据，而不是使用通常用于写入操作的 POST（但那是另一回事）
于 2014-12-16T02:18:58.390 回答