AngularJS 다이내믹라우팅

AngularJS 다이내믹라우팅

나는 현재 Angular를 가지고 있다.루팅을 내장한 JS 어플리케이션효과가 있고 모든 것이 정상입니다.

내 app.js 파일은 다음과 같습니다.

angular.module('myapp', ['myapp.filters', 'myapp.services', 'myapp.directives']).
  config(['$routeProvider', function ($routeProvider) {
      $routeProvider.when('/', { templateUrl: '/pages/home.html', controller: HomeController });
      $routeProvider.when('/about', { templateUrl: '/pages/about.html', controller: AboutController });
      $routeProvider.when('/privacy', { templateUrl: '/pages/privacy.html', controller: AboutController });
      $routeProvider.when('/terms', { templateUrl: '/pages/terms.html', controller: AboutController });
      $routeProvider.otherwise({ redirectTo: '/' });
  }]);

내 앱에는 /pages 디렉토리에 새로운 html 파일을 복사하고 추가할 수 있는 CMS가 내장되어 있습니다.

새로 동적으로 추가된 파일이라도 라우팅 공급자를 통해 확인하고 싶습니다.

이상적인 세계에서 라우팅 패턴은 다음과 같습니다.

$route Provider.when('/pagename', { templateUrl: '/pagename').html', 컨트롤러: CMS Controller } ;

그래서 새로운 페이지명이 contact.html이면 angular로 "/contact"를 선택하여 "/pages/contact.html"로 리다이렉트하고 싶습니다.

이게 가능하기나 해?그렇다면 어떻게?!

갱신하다

라우팅 설정에는 다음과 같은 것이 있습니다.

$routeProvider.when('/page/:name', { templateUrl: '/pages/home.html', controller: CMSController })

CMS Controller에서 다음을 수행합니다.

function CMSController($scope, $route, $routeParams) {
    $route.current.templateUrl = '/pages/' + $routeParams.name + ".html";
    alert($route.current.templateUrl);
}
CMSController.$inject = ['$scope', '$route', '$routeParams'];

그러면 현재 templateUrl이 올바른 값으로 설정됩니다.

단, ng-view를 새로운 templateUrl 값으로 변경하고 싶습니다.어떻게 하면 될까요?

angular.module('myapp', ['myapp.filters', 'myapp.services', 'myapp.directives']).
        config(['$routeProvider', function($routeProvider) {
        $routeProvider.when('/page/:name*', {
            templateUrl: function(urlattr){
                return '/pages/' + urlattr.name + '.html';
            },
            controller: 'CMSController'
        });
    }
]);

• * 를 추가하면 여러 수준의 디렉토리를 동적으로 작업할 수 있습니다.예: /page/cars/selling/list가 이 프로바이더에서 포착됩니다.

문서(1.3.0):

templateUrl이 함수일 경우 다음 파라미터로 호출됩니다.

{Array.} - 현재 경로를 적용하여 현재 $location.path()에서 추출된 경로 매개 변수"

또한.

when(path, route): 메서드

• 경로에는 콜론으로 시작하여 별(예:name*)로 끝나는 이름 있는 그룹을 포함할 수 있습니다.모든 문자는 루트가 일치할 때 지정된 이름으로 $routeParams에 저장됩니다.

그래, 해결했어.

GitHub에 솔루션 추가 - http://gregorypratt.github.com/AngularDynamicRouting

내 app.js 라우팅 구성에서:

$routeProvider.when('/pages/:name', {
    templateUrl: '/pages/home.html', 
    controller: CMSController 
});

다음으로 CMS 컨트롤러에서 다음을 수행합니다.

function CMSController($scope, $route, $routeParams) {

    $route.current.templateUrl = '/pages/' + $routeParams.name + ".html";

    $.get($route.current.templateUrl, function (data) {
        $scope.$apply(function () {
            $('#views').html($compile(data)($scope));
        });
    });
    ...
}
CMSController.$inject = ['$scope', '$route', '$routeParams'];

를 #views로 <div id="views" ng-view></div>

표준 라우팅 및 다이내믹라우팅으로 동작하게 되었습니다.

나는 portfolio 약.해, 소아마비를 입력했습니다.html이라고 불리는.html에 대해 복사하고, 그것의 내용 중 일부를 변경하여 입력했다./#/pages/portfolio portfolio되었습니다.

갱신필 동적 콘텐츠를 삽입할 수 있도록 html에 $apply 및 $compile을 추가했습니다.

예를 들어 json을 통해 경로를 확인하는 등 나중에 경로를 해결하는 것이 가장 쉬운 방법이라고 생각합니다.설정 단계에서 $routeProvider에서 $provider를 사용하여 팩토리를 만들면 실행 단계에서도 컨트롤러에서도 $routeProvider 개체를 계속 사용할 수 있습니다.

'use strict';

angular.module('myapp', []).config(function($provide, $routeProvider) {
    $provide.factory('$routeProvider', function () {
        return $routeProvider;
    });
}).run(function($routeProvider, $http) {
    $routeProvider.when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
    }).otherwise({
        redirectTo: '/'
    });

    $http.get('/dynamic-routes.json').success(function(data) {
        $routeProvider.when('/', {
            templateUrl: 'views/main.html',
            controller: 'MainCtrl'
        });
        // you might need to call $route.reload() if the route changed
        $route.reload();
    });
});

URI변수할 수 .$ routeProvider URI の 음음음음 。$routeProvider.when('/page/:pageNumber' ...$routeParams $ $ $ 。

$route 페이지 끝에 좋은 예가 있습니다.http://docs.angularjs.org/api/ng.$route

편집(편집된 질문의 경우):

안타깝게도 라우팅 시스템은 매우 한정되어 있습니다.이 주제에 대해서는 많은 논의가 이루어지고 있으며, 여러 개의 명명된 뷰를 작성하는 등 몇 가지 솔루션이 제안되고 있습니다.단, 현시점에서는 ngView 디렉티브는 1대 1로 루트당1개의 뷰만 제공합니다. 가지 할 수 . 더 입니다. 뷰 은 로더로 사용할 수 .<ng-include src="myTemplateUrl"></ng-include>120.)y「yTemplateUrl」을 참조해 주세요.

저는 보다 복잡한(그러나 더 크고 복잡한 문제에 대해서는 더 깔끔한) 솔루션을 사용하고 있습니다.기본적으로 $route 서비스는 모두 생략합니다.상세한 내용은 다음과 같습니다.

http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm

이것이 동작하는 이유는 불명확합니다만, 각 1.2.0~rc.2 로 다이내믹(또는 와일드카드) 루트를 사용할 수 있습니다.

http://code.angularjs.org/1.2.0-rc.2/angular.min.js
http://code.angularjs.org/1.2.0-rc.2/angular-route.min.js

angular.module('yadda', [
  'ngRoute'
]).

config(function ($routeProvider, $locationProvider) {
  $routeProvider.
    when('/:a', {
  template: '<div ng-include="templateUrl">Loading...</div>',
  controller: 'DynamicController'
}).


controller('DynamicController', function ($scope, $routeParams) {
console.log($routeParams);
$scope.templateUrl = 'partials/' + $routeParams.a;
}).

example.com/foo -> "foo" 부분 로드

example.com/bar- > "bar" 부분 로드

ng뷰를 조정할 필요가 없습니다.'/:a' 대소문자가 이 문제를 해결할 수 있는 유일한 변수입니다.'/:foo'는 모든 부분 foo1, foo2 등이 아니면 작동하지 않습니다.'/:a'는 모든 부분 이름과 함께 작동합니다.

모든 값에 의해 다이내믹 컨트롤러가 기동됩니다.따라서 "다른 방법"은 없습니다.다이나믹 또는 와일드카드 라우팅 시나리오에서 필요한 것은 이것이라고 생각합니다.

AngularJS 1.1.3에서는 새로운 catch-all 파라미터를 사용하여 원하는 작업을 정확하게 수행할 수 있습니다.

https://github.com/angular/angular.js/commit/7eafbb98c64c0dc079d7d3ec589f1270b7f6fea5

커밋부터:

이것에 의해, 콜론 대신에 아스타리스크가 부가되어 있는 경우, 슬래시가 포함되어 있는 경우에서도, routeProvider 는 서브스트링에 일치하는 파라미터를 받아들일 수 있습니다.를 들어, '다'와 같은 루트가 있습니다.edit/color/:color/largecode/*largecode와 같은 http://appdomain.com/edit/color/brown/largecode/code/with/slashs.

(1.1.5를 사용하여) 직접 테스트해 본 결과, 동작은 동작합니다.새로운 URL이 새로고침될 때마다 컨트롤러가 새로고침되므로 모든 상태를 유지하려면 커스텀서비스를 사용해야 할 수도 있습니다.

여기 도움이 되는 또 다른 해결책이 있습니다.

(function() {
    'use strict';

    angular.module('cms').config(route);
    route.$inject = ['$routeProvider'];

    function route($routeProvider) {

        $routeProvider
            .when('/:section', {
                templateUrl: buildPath
            })
            .when('/:section/:page', {
                templateUrl: buildPath
            })
            .when('/:section/:page/:task', {
                templateUrl: buildPath
            });



    }

    function buildPath(path) {

        var layout = 'layout';

        angular.forEach(path, function(value) {

            value = value.charAt(0).toUpperCase() + value.substring(1);
            layout += value;

        });

        layout += '.tpl';

        return 'client/app/layouts/' + layout;

    }

})();

언급URL : https://stackoverflow.com/questions/13681116/angularjs-dynamic-routing