1

コンテキスト ユーザーは、' http://example.com/slug ' など、自分のページを識別する固有の URL スラッグで登録できます。

現在の状態 Express.js ファイルで、ユーザーにスラッグが存在するかどうかをデータベースで確認し、ユーザーを「http://example.com/slug」から「http://example.com/ 」にリダイレクトすることに成功しました。 #!/slug ' Angular のルーティングを利用します。

ただし、Angular では、ルーター ファイルで $http または $location サービスを使用できません (module.config 内で行われているため、詳細については、このスタック オーバーフローの説明を参照してください)。

欲求 基本的に私がやりたいことは、有効なスラッグが見つかったときにユーザーを「デフォルト」ビューにルーティングするか、そうでない場合はホームにルーティングすることです。どんな提案でも大歓迎です。

参考までに、私の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

あなたの質問に直接答えるには、「解決」ルートを使用して依存関係を確認し、適切なビューにリダイレクトします。

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. エクスプレス経由でサーバー側をすでに検証およびリダイレクトしている場合、クライアント側でこのチェックを実行する必要はありますか?
  2. / ルートを少しオーバーロードしているようです。ホームに失敗すると、それ自体にリダイレクトされます
  3. ビューがポスト初期化にルーティングされるときではなく、アプリの初期化時に $location からスラッグを取得しています。ビューにルーティングするときはいつでもそれを取得する必要があります
  4. 一般に書き込み操作を目的とした POST を使用するのではなく、GET リクエストを使用してこのリクエストのデータをフェッチ/読み取りすることを検討することをお勧めします (ただし、それは別の話です)。
于 2014-12-16T02:18:58.390 に答える