anglejsのURLにパラメータをプッシュ

Question

私はanglejsアプリを作っています。私はurlにユーザーの会社名をプッシュする必要があります。 たとえば、www.myapp.com/samsungまたはwww.myapp.com/toyota。

達成するための私の戦略は、まずユーザーの会社情報を取得し、会社の名前を取得し、ui-routerの$ stateParamsを使用してURLに名前をプッシュすることでした。

パラメータをプッシュすることはできますが、URLの形は変わりません。 URLはwww.myapp.comのように変わりません。

これを把握する方法を知っている人はいますか？あなたがしたいすべてがページをリロードせずにURLを変更する場合には感謝

//main controller 
$rootScope.$on('$stateChangeSuccess', function (e, toState, toParams, fromState, fromParams) { 
toParams = {company: $scope.user.company.nickname};//$scope.user.company.nickname contains company's name 
}); 

//$stateProvider configuration 
$stateProvider 
.$state('home', { 
    url: '/:company', 
    ... 
    ... 
}) 

Answer 1

あなたが使用することができます。

var nameOfCompany = "toyota"; 
$location.url('/nameOfCompany'); 

$locationが、観察とせずにURLを変更するために使用することができwindow.locationの角度のequvilantです再読み込み。詳細については、documentationを確認してください。

Answer 2

UI-Router 1.0以降では、onEnter Transition Hookでこれを達成できます。

フックは、パラメータ値が設定されているかどうかをチェックします。これが設定されていない場合（null）、遷移は同じ状態にリダイレクトされますが、パラメータ値は設定されています。私は、UI-ルータ0.3Xバージョンを望んでいたものを達成できhttp://plnkr.co/edit/aSJh6QyBUymKmaFNsOS8?p=info

Answer 3

：

$stateProvider.state({ 
    name: 'company', 
    url: '/:companyName', 
    params: { companyName: null }, // default to null 
    onEnter: function ($transition$, $state, company) { 
     let params = $transition$.params(); 
     if (params.companyName === null) { // check if null. Get resolve and redirect 
     return $state.target("company", { companyName: company.name }); 
     } 
    }, 
    resolve: { 
     company: ($http) => 
      $http.get('company.json').then(resp => resp.data) 
    }, 
    component: 'company', 
    }); 

はここで働いてplunkerです。コードは汚れて見えるかもしれませんが、私の想像通りに動作します。同じ機能を探している人を助けてくれることを願っています。

.state('home', { 
    url: '/:company', 
    params: {company: null}, 
    templateUrl: '/templates/home.html', 
    onEnter: ['error', 'auth', '$state', 'company', '$stateParams', function (error, auth, $state,  company, $stateParams) { 
     if (!auth.isLoggedIn()) { 
      return error.flash('Login is required.', 'login'); 
     } 
     try { 
      if ($stateParams.company === null || $stateParams.company !== company.nickname) { 
       $state.go('home', {company: company.nickname});  
      } 
     } catch (err) { 
      console.log('mop'); 
     } 
    }], 
    resolve: { 
     company: ['auth', 'error', function (auth, error) { 
      return auth.getMyCompany().then(function (res) { 
       return res.data; 
      }, function (err) { 
       error.flash(401, 'login'); 
      }); 
     }], 
    }, 
})