MEANJS : URL에 대한 db 확인 및 동적 각도 상태로의 경로

Question

컨텍스트 사용자는 자신의 페이지를 식별하는 고유 URL slug로 등록 할 수 있습니다. 'http://example.com/slug'.

현재 상태 내 Express.js 파일에서 , 나는 성공적으로 슬러그 사용자에 존재하는지 내 데이터베이스를 확인, 다음을 활용하는 'http://example.com/#!/slug'에 'http://example.com/slug'에서 사용자 리디렉션 Angular의 라우팅 경로입니다.

그러나 Angular를 사용하면 라우터 파일에서 $ http 또는 $ location 서비스를 사용할 수 없습니다 (자세한 내용은 this Stack Overflow explanation 참조).

욕망 기본적으로 제가하고 싶은 것은 경로가 그렇지 않은 경우에 유효한 슬러그가 발견, 또는 가정하는 '기본'보기로 사용자입니다. 어떤 제안이라도 대단히 감사 할 것입니다.

참고로, 내 module.config 코드는 여기에서 찾을 수 있습니다 (I 사용할 '기본'상태가 '검색'이다) :

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

바로이 경로를 사용하는 것입니다 무엇을 원하는 귀하의 질문에 대답하려면 "해결 "종속성을 확인하고 해당보기로 리디렉션 :

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에서 슬러그를 잡아 내고 있습니다.보기가 post init 일 수있는 경로가 아닌 경우 보기로 라우팅 할 때 잡아야합니다.
4. 일반적으로 쓰기 작업을 위해 의도 된 POST를 사용하는 대신 GET 요청을 사용하여이 요청에 대한 데이터를 가져 오거나 읽는 것을 고려할 수 있습니다 (그러나 다른 이야기입니다)