2016-06-15 9 views
0

フロントエンドにAngularを使用してWebアプリケーションを作成しています。 役割が教師であり、申請者のポータルにアクセスしようとしている場合、私は404.htmlテンプレートを表示してそれらをブロックしたいと思います。私はwww.example.com/404にユーザーをリダイレクトしたくないのですが、ちょうど彼らがwww.example.com/teacherのところにとどまるようにしますが、404.htmlテンプレートを表示します。不正なユーザーをAngularでリダイレクトするためにngrouteを使用する

ngrouteを使用してこれをどのように達成できるかわかりません。ここで私はapp.jsに持っているもののコードは次のとおりです。

app.config(['$routeProvider', '$locationProvider', 'CookieProvider', 
    function ($routeProvider, $locationProvider, CookieProvider) { 
      var cookieData = CookieProvider.$get().getCookieData(); 

$routeProvider.when('/applicant', { 
      templateUrl: '/front-end/public/views/Prescreening/review.html', 
      controller: 'ReviewCtrl', 
      resolve:{ 
       "check":function($location, CookieService) { 
          var cookieData = CookieService.get(); 
          if(cookieData["user_role"] == 'teacher'){ 
           $location.path('/404') 
          } 
       } 
      } 
     }).when('/404', { 
      templateUrl: '/404.html' 
     }).otherwise({ 
      templateUrl: '/404.html' 
    }); 
    }]); 

にはどうすれば/404にユーザーをリダイレクトせず404.thmlレンダリングすることができますか?

+0

チェックアウト私の答え@JoHksiは..私は..それがplunkerで働い –

答えて

1

このような状態があるとします。

.state('dashboard.users', { 
    url: '/users/:isAdmin', 
    templateUrl: 'modules/dashboard/templates/users.html', 
    controller: 'usersController', 
}) 

これを試してください。

angular.module(...) 
    .config(['$routeProvider', function($routeProvider) {...}]) 
    .run(function($rootScope, $location) { 
     $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){ 
      // You can pass the user role to the params 
      // of the state and you will see that on the 
      // toParams call callback ex. {isAdmin:false} 
      if(!toParams.isAmin){ 
       toState.templateUrl = "modules/404/templates/404.html"; 
      } 
     }); 
    }) 
}) 

UPDATE

コールバックtoStateは、実際には次

  1. url =現在の状態EXのURLが含まれています。 /user

  2. templateUrl =テンプレートへのパスex。 path/to/something.html

  3. controller =状態のコントローラ名ex。 usersController

  4. name =状態名ex。この行が実行されます

dashboard.usertoState.templateUrl = "modules/404/templates/404.html";あなたが望む404.htmlを持っています<div ui-view></div>に該当あなたの状態の現在のテンプレート。

重要

あなたはこの実装を動作させるためにui.routerないngRouterを使用する必要があります。

+0

待機を得たので、どのように私はいない直接ユーザーが404.htmlちょうどでも、ここでテンプレートをレンダリングするのですか? – JoHksi

+0

更新@JoHksi – CENT1PEDE

+0

を読んでください。あなたがngrouteでできることはありますか?私はちょうど特定の条件で別のテンプレートをレンダリングしたい – JoHksi

0

が、私はそれが働いてしまったいくつかの努力の後...ここ..私はそうあなたのパスに置き換えてください亭を使用していた

...異なるコードです。ここ

がplunkです..私は得ましたその作業.. https://plnkr.co/edit/dK7n6PmhldJ1p0plWPp2?p=preview

index.js

var app = angular.module('myApp',['ngRoute']); 
app.config(['$routeProvider',function ($routeProvider) { 

     $routeProvider 
     .when('/applicant', { 
      template: 'Applicant!', 
      controller: function($scope){ 
       alert("Applicant Controller"); 
      } 
     }) 
     .when('/404', { 
      templateUrl: '404' 
     }) 
     .otherwise({ 
      templateUrl : '404.html' 
     }); 

}]); 

index.htmlを

<html> 
    <head> 

     <script src="bower_components/angular/angular.js"></script> 
     <script src="bower_components/angular-route/angular-route.js"></script> 
     <script src = "index.js"></script> 

    </head> 
    <body ng-app="myApp"> 
     <ng-view></ng-view> 
    </body> 
</html> 

404です。HTML

<h1>404 page</h1> 
+0

私はプランカを作ろうとしている...完了時にあなたに通知します...私の答えに何か問題がある場合は、その時までに私に尋ねることができます。 –

関連する問題