4

画像を表示するシンプルな単一ページのアプリがあります。

最初のロードではページは空白で、人々は独自の画像を追加しますが、URL に保存された ID を使用してページに戻ると、ページで以前のモデルを取得する必要があります。

ページのどこかに ng-view を配置しない限り、 routeProvider を使用する以前の試みはすべて失敗しました。ただし、これは ng-view スコープ内にあるスコープに影響します。

基本的に、URLにIDがあるかどうかに応じて、ページで異なる応答をする必要がありますが、ビューを変更していないため、ルートパラメーターからIDを取得する必要があります。

それで、私は間違った木を吠えているように見えるので、皆さんがこれをどのように行うのか疑問に思っていました. どんな助けでも大歓迎です。

4

4 に答える 4

8

1つのコントローラーで標準のrouteProviderセットアップを使用して、IDの有無にかかわらずURLを処理する1つの方法は次のとおりです。

JS：

var app = angular.module('plunker', []);

app.config(function($routeProvider){
  return $routeProvider
    .when('/', {
      controller: 'HomeController',
      templateUrl: 'home.html'
    })
    .when('/:id', {
      controller: 'HomeController',
      templateUrl: 'home.html'
    })
    .otherwise({ redirectTo: '/' });
});

app.controller('HomeController',
    [
      '$scope',
      '$routeParams',
      function($scope, $routeParams) {
        if($routeParams.id){
          $scope.id = $routeParams.id;
          // handle scenario when there is an id in URL
          return;
        }

        // handle scenario when there is no id
        $scope.id = 'no ID!!';
      }
    ]
  );

Plunker

ng-viewを使用せず、$ locationサービスに依存しない別の方法は、次のとおりです。

var app = angular.module('plunker', []);

app.config(
    ['$locationProvider',
      function($locationProvider) {
        $locationProvider.html5Mode(true);
      }
    ]
  );

app.controller('HomeController',
    [
      '$scope',
      '$location',
      function($scope, $location) {

        $scope.$watch(function(){
            return $location.hash();
          },
          function(id){
            $scope.id = id;
          }
        );

        $scope.$watch('id', function(id){
          if(id){
            // handle scenario when there's id available
            return;
          }
          // handle scenario when there is no id
        });

      }
    ]
  );

Plunker

于 2013-03-11T10:24:01.847 に答える
0

いつでも独自の URL パーサーを定義できます。サービスを作成して、いつでもどこでも使用できます。

angular.module('app').service('urlParser', function(){
    this.parse = function(url){
        var query = url.split('?')
        if (url.length == 1){ return {} } //it means it has no parameters
        else{
            var paramsArray = query.split('&')
            var params = {} //this is going to be your return object
            var i;
            for ( i=0; i < paramsArray.length; i++ ){
                var arr = paramsArray[i].split('=')
                var param = arr[0]
                var value;
                //check if is set with some value
                if( arr.length == 1 )
                    value = null
                else
                    value = arr[1]
                obj[param] = value
            }
            return obj;
        }
    }
})

そして、コントローラーからサービスとして呼び出すことになります。サービス名：urlParser メソッド名：parse(:string)

例:
var url = " http://www.yourwebsite.com/yourroute?page=1&user=1000 "
var params = urlParser.parse(url)
params.page // 1
params.user // 1000

希望を与えるこれは役に立ちました

于 2016-02-10T19:48:04.033 に答える