AngularJS - templateUrl 생성에 $routeParams를 사용하는 방법

AngularJS - templateUrl 생성에 $routeParams를 사용하는 방법

저희 앱은 2단계 내비게이션이 있습니다.우리는 Angular를 사용하고 싶다.JS$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에 액세스 할 수 있습니까?

이 매우 유용한 기능은 현재 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

주사하고 사용할 방법을 찾을 수 없었습니다.$routeParamsservice(더 나은 솔루션이 될 것으로 생각됩니다) 저는 이것이 효과가 있을 것이라고 생각하고 이 방법을 시도했습니다.

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

그 결과, 다음의 에러가 발생했습니다.

알 수 없는 공급자: myApp의 $routeParams

만약 그런 것이 가능하지 않다면, 당신은 그것을 바꿀 수 있습니다.templateUrl일부 HTML 파일을 가리키다ng-include를 사용하여 컨트롤러의 URL을 설정합니다.$routeParam다음과 같습니다.

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>

templateUrl은 생성된 URL을 반환하는 함수로 사용할 수 있습니다.routeParams를 사용하는 passing 인수를 사용하여 URL을 조작할 수 있습니다.

예를 참조해 주세요.

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

이게 도움이 됐으면 좋겠다.

좋아, 내가 할 수 있을 것 같아...

작은 배경 먼저:Node Express 위에 Angular를 붙이고 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/');

});
...

필요한 정보보다 더 많은 정보일 수도 있고...

• 기본적으로는 모듈 파일을 저장해야 합니다.$routeProvider글로벌하게 변화한다(예:routeProvider컨트롤러가 액세스할 수 있도록 합니다.

• 그럼 그냥 사용하시면 됩니다.routeProvider새로운 루트를 만듭니다('RESET a route' / 'REPRESISE'는 할 수 없습니다.새로운 루트를 작성해야 합니다).처음과 마찬가지로 의미 있는 루트를 작성하기 위해 마지막에 슬래시(/)를 추가했을 뿐입니다.

• 내부에서) 을합니다.templateUrl원하는 뷰로 이동합니다.

• ★★★를 .controller의 of의 .when()오브젝트, 무한 요구 루프가 발생하지 않도록 합니다.

• 내) 을 합니다.$location.path()을 사용법

만약 Angular 앱을 Express 앱에 슬랩하는 방법에 관심이 있으시다면, 제 레포(https://github.com/cScarlson/isomorph)를 이용하실 수 있습니다.

이 할 수 .에 바인드하고 경우 : 를 사용하지 Angular 는 WebSockets를 합니다.{{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.displaces에 있습니다.

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

first Param과 second Param은 고객의 요구에 따라 어떤 것이든 사용할 수 있습니다.

도 같은 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★$stateParamsrouteParam

언급URL : https://stackoverflow.com/questions/11534710/angularjs-how-to-use-routeparams-in-generating-the-templateurl