AngularJS-templateUrlの生成で$ routeParamsを使用する方法

このアプリケーションには2レベルのナビゲーションがあります。AngularJSを使用$routeProviderして、テンプレートを動的にに提供したいと考えています<ng-view />。私はこれに沿って何かをすることを考えていました：

angular.module('myApp', []).
config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/:primaryNav/:secondaryNav', {
        templateUrl: 'resources/angular/templates/nav/'+<<primaryNavHere>>+'/'+<<secondaryNavHere>>+'.html'
    });
}]);

内のパーツを実装する方法がわかりません<<>>。primaryNavとsecondaryNavが$ routeParamsにバインドされることを知っていますが、テンプレートを動的に提供するために$ routeParamsにアクセスするにはどうすればよいですか？

私は$routeParamsサービスを注入して使用する方法を見つけることができませんでした（これはより良い解決策だと思います）私はこれがうまくいくと考えてこれを試しました：

angular.module('myApp', []).
    config(function ($routeProvider, $routeParams) {
        $routeProvider.when('/:primaryNav/:secondaryNav', {
            templateUrl: 'resources/angular/templates/nav/'+$routeParams.primaryNav+'/'+$routeParams.secondaryNav+'.html'
        });
    });

このエラーが発生しました：

不明なプロバイダー：myAppの$ routeParams

そのようなことができない場合templateUrlはng-include、次$routeParamのようなs を使用して、部分的なHTMLファイルを指すように変更し、コントローラーにURLを設定できます。

angular.module('myApp', []).
    config(function ($routeProvider) {
        $routeProvider.when('/:primaryNav/:secondaryNav', {
            templateUrl: 'resources/angular/templates/nav/urlRouter.html',
            controller: 'RouteController'
        });
    });

function RouteController($scope, $routeParams) {
        $scope.templateUrl = 'resources/angular/templates/nav/'+$routeParams.primaryNav+'/'+$routeParams.secondaryNav+'.html';
    }

これをあなたとして urlRouter.html

<div ng-include src="templateUrl"></div>

この非常に役立つ機能は、AngularJSのバージョン1.1.2から利用できるようになりました。不安定だと考えられていますが、私はそれを使用しました（1.1.3）。

基本的に、関数を使用してtemplateUrl文字列を生成できます。関数には、templateUrl文字列を作成して返すために使用できるルートパラメータが渡されます。

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

app.config(
    function($routeProvider) {
        $routeProvider.
            when('/', {templateUrl:'/home'}).
            when('/users/:user_id', 
                {   
                    controller:UserView, 
                    templateUrl: function(params){ return '/users/view/' + params.user_id; }
                }
            ).
            otherwise({redirectTo:'/'});
    }
);

プルリクエストについてhttps://github.com/lrlopezに感謝します。

https://github.com/angular/angular.js/pull/1524

templateUrlは、生成されたURLを返す関数として使用できます。routeParamsを取る引数を渡すことでURLを操作できます。

例を参照してください。

.when('/:screenName/list',{
    templateUrl: function(params){
         return params.screenName +'/listUI'
    }
})

この助けを願っています。

わかった、わかった...

最初に少し背景：これが必要になった理由は、AngularをNode Expressの上に貼り付け、Jadeにパーシャルを処理してもらうためです。

だからここに何をしなければならないか...（ビールを飲んで、最初に20時間以上費やしてください!!!）...

モジュールを設定するときに、$routeProviderグローバルに保存します。

// app.js:
var routeProvider
    , app = angular.module('Isomorph', ['ngResource']).config(function($routeProvider){

        routeProvider = $routeProvider;
        $routeProvider
            .when('/', {templateUrl: '/login', controller: 'AppCtrl'})
            .when('/home', {templateUrl: '/', controller: 'AppCtrl'})
            .when('/login', {templateUrl: '/login', controller: 'AppCtrl'})
            .when('/SAMPLE', {templateUrl: '/SAMPLE', controller: 'SAMPLECtrl'})
            .when('/map', {templateUrl: '/map', controller: 'MapCtrl'})
            .when('/chat', {templateUrl: '/chat', controller: 'ChatCtrl'})
            .when('/blog', {templateUrl: '/blog', controller: 'BlogCtrl'})
            .when('/files', {templateUrl: '/files', controller: 'FilesCtrl'})
            .when('/tasks', {templateUrl: '/tasks', controller: 'TasksCtrl'})
            .when('/tasks/new', {templateUrl: '/tasks/new', controller: 'NewTaskCtrl'})
            .when('/tasks/:id', {templateUrl: '/tasks', controller: 'ViewTaskCtrl'})
            .when('/tasks/:id/edit', {templateUrl: '/tasks', controller: 'EditTaskCtrl'})
            .when('/tasks/:id/delete', {templateUrl: '/tasks', controller: 'DeleteTaskCtrl'})
        .otherwise({redirectTo: '/login'});

});

// ctrls.js
...
app.controller('EditTaskCtrl', function($scope, $routeParams, $location, $http){

    var idParam = $routeParams.id;
    routeProvider.when('/tasks/:id/edit/', {templateUrl: '/tasks/' + idParam + '/edit'});
    $location.path('/tasks/' + idParam + '/edit/');

});
...

それは必要なものよりも多くの情報かもしれません...

• 基本的には、モジュールの$routeProvidervarをグローバルに保存します。たとえばrouteProvider、コントローラーからアクセスできるようにします。

• 次にrouteProvider、新しいルートを使用して作成するだけです（「ルートをリセットする」/「再約束」することはできません。新しいルートを作成する必要があります）。最後にスラッシュ（/）を追加しただけなので、意味がわかります。最初として。

• 次に（コントローラー内で）、templateUrlヒットするビューに設定します。

• オブジェクトのcontrollerプロパティを取り出し.when()ます。無限のリクエストループが発生しないようにしてください。

• 最後に（まだコントローラー内にあります）、$location.path()作成したルートにリダイレクトするために使用します。

AngularアプリをExpressアプリに平手打ちする方法に興味がある場合は、https：//github.com/cScarlson/isomorphで私のリポジトリをフォークできます。

また、このメソッドを使用すると、WebSocketを使用してHTMLをデータベースにバインドする場合に備えて、AngularJSの双方向データバインディングを保持することができます{{model.param}}。

この時点でこれを複製する場合、それを実行するにはマシンにmongoDBが必要です。

これでこの問題が解決することを願っています！

コーディ

お風呂の水を飲まないでください。

ルーター：-

...
.when('/enquiry/:page', {
    template: '<div ng-include src="templateUrl" onload="onLoad()"></div>',
    controller: 'enquiryCtrl'
})
...

コントローラ：-

...
// template onload event
$scope.onLoad = function() {
    console.log('onLoad()');
    f_tcalInit();  // or other onload stuff
}

// initialize
$scope.templateUrl = 'ci_index.php/adminctrl/enquiry/'+$routeParams.page;
...

$ routeParamsがルーター内部に表示されないのはangularjsの弱点だと思います。小さな拡張は、実装中に世界を変えるでしょう。

私は角のフォークにこれのサポートを追加しました。指定することができます

$routeProvider
    .when('/:some/:param/:filled/:url', {
          templateUrl:'/:some/:param/:filled/template.ng.html'
     });

https://github.com/jamie-pate/angular.js/commit/dc9be174af2f6e8d55b798209dfb9235f390b934

角度に関しては粒子に対して一種であるため、これがピックアップされるかどうかはわかりませんが、私にとっては役に立ちます

//module dependent on ngRoute  
 var app=angular.module("myApp",['ngRoute']);
    //spa-Route Config file
    app.config(function($routeProvider,$locationProvider){
          $locationProvider.hashPrefix('');
          $routeProvider
            .when('/',{template:'HOME'})
            .when('/about/:paramOne/:paramTwo',{template:'ABOUT',controller:'aboutCtrl'})
            .otherwise({template:'Not Found'});
    }
   //aboutUs controller 
    app.controller('aboutCtrl',function($routeParams){
          $scope.paramOnePrint=$routeParams.paramOne;
          $scope.paramTwoPrint=$routeParams.paramTwo;
    });

index.html

<a ng-href="#/about/firstParam/secondParam">About</a>

firstParamとsecondParamは、必要に応じて何でもかまいません。

私は同様の問題を抱えていて、$stateParams代わりに使用しましたrouteParam