AngularJS dinamik yönlendirme

Şu anda yerleşik yönlendirme içeren bir AngularJS uygulamam var. Çalışıyor ve her şey yolunda.

App.js dosyam şöyle görünüyor:

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: '/' });
  }]);

Uygulamamda, / pages dizini içinde yeni html dosyalarını kopyalayıp ekleyebileceğiniz yerleşik bir CMS var .

Dinamik olarak eklenen yeni dosyalar için bile yine de yönlendirme sağlayıcısından geçmek istiyorum.

İdeal bir dünyada yönlendirme modeli şöyle olacaktır:

$ routeProvider.when ('/ sayfaadı ', { şablonUrl : '/ sayfalar / sayfaadı .html', denetleyici: CMSController});

Yeni sayfa adım "contact.html" ise "/ contact" yi açısal olarak alıp "/pages/contact.html" adresine yönlendirmek isterim.

Bu mümkün mü ?! ve eğer öyleyse nasıl ?!

Güncelleme

Şimdi bunu yönlendirme yapılandırmamda bulabilirsiniz:

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

ve CMSController'ımda:

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

Bu, geçerli templateUrl değerini doğru değere ayarlar.

Ancak şimdi ng-görünümünü yeni templateUrl değeri ile değiştirmek istiyorum . Bu nasıl başarılır?

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'
        });
    }
]);

• * Eklenmesi , dinamik olarak birden çok dizin düzeyiyle çalışmanıza olanak tanır. Örnek: / page / cars / sell / list bu sağlayıcıda yakalanacak

Dokümanlardan (1.3.0):

"TemplateUrl bir işlevse, aşağıdaki parametrelerle çağrılacaktır:

{Dizi.} - geçerli rotayı uygulayarak geçerli $ location.path () öğesinden çıkarılan rota parametreleri "

Ayrıca

ne zaman (yol, rota): Yöntem

• yol, iki nokta üst üste ile başlayan ve bir yıldız ile biten adlandırılmış grupları içerebilir: örneğin: isim *. Rota eşleştiğinde tüm karakterler hevesle verilen isim altında $ routeParams içinde saklanır.

Tamam çözdüm.

Çözüm GitHub'a eklendi - http://gregorypratt.github.com/AngularDynamicRouting

App.js yönlendirme yapılandırmamda:

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

Sonra CMS denetleyicimde:

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'];

# Görüntülemeler benim <div id="views" ng-view></div>

Artık standart yönlendirme ve dinamik yönlendirme ile çalışıyor.

Test etmek için about.html dosyasını portfolyo.html olarak kopyaladım, bazı içeriğini değiştirdim ve /#/pages/portfoliotarayıcıma girdim ve hey presto portfolyo.html görüntülendi ....

Güncelleme Eklendi $ uygulamak ve bu dinamik içerik böylece html $ derleme enjekte edilebilir.

Bence böyle bir şeyi yapmanın en kolay yolu rotaları daha sonra çözmek, rotaları örneğin json üzerinden sorabilirsiniz. Yapılandırma aşamasında, $ allow aracılığıyla $ routeProvider'dan bir fabrika yaptığımı kontrol edin, böylece çalışma aşamasında ve hatta denetleyicilerde bile $ routeProvider nesnesini kullanmaya devam edebilirim.

'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();
    });
});

$ RouteProvider URI desenlerinde, aşağıdaki gibi değişken parametreler belirtebilirsiniz: $routeProvider.when('/page/:pageNumber' ... ve $ routeParams aracılığıyla denetleyicinizde buna erişebilirsiniz.

$ Route sayfasının sonunda güzel bir örnek var: http://docs.angularjs.org/api/ng.$route

DÜZENLEME (düzenlenen soru için):

Yönlendirme sistemi maalesef çok sınırlıdır - bu konuda çok sayıda tartışma vardır ve bazı çözümler önerilmiştir, yani birden çok adlandırılmış görünüm oluşturma vb. Ancak şu anda, ngView yönergesi her rota için yalnızca BİR görünüm sunmaktadır. bire bir temel. Bunu birden çok şekilde yapabilirsiniz - daha basit olanı, görünümün şablonunu içinde bir <ng-include src="myTemplateUrl"></ng-include>etiket bulunan bir yükleyici olarak kullanmaktır (denetleyicide $ kapsam.myTemplateUrl oluşturulur).

Daha karmaşık (ancak daha büyük ve daha karmaşık sorunlar için daha temiz) bir çözüm kullanıyorum, temelde $ route hizmetini tamamen atlayarak burada ayrıntılı olarak açıklanmıştır:

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

Bunun neden çalıştığından emin değilim, ancak dinamik (veya isterseniz joker karakter) rotalar açısal 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" kısmi yükler

example.com/bar-> "bar" kısmını kısmen yükler

Ng görünümünde herhangi bir ayarlamaya gerek yoktur. '/: A' durumu bulduğum tek değişkendir ve bunu başaracak .. '/: foo', tüm parçalarınız foo1, foo2 vb. Olmadıkça çalışmaz ... '/: a' herhangi bir kısmi ile çalışır isim.

Tüm değerler dinamik denetleyiciyi çalıştırır - dolayısıyla "aksi" yoktur, ancak dinamik veya joker karakter yönlendirme senaryosunda aradığınız şeyin bu olduğunu düşünüyorum ..

AngularJS 1.1.3'ten itibaren, artık yeni tümünü yakala parametresini kullanarak tam olarak istediğinizi yapabilirsiniz.

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

İşlemden:

Bu, routeProvider'ın iki nokta üst üste yerine yıldız işareti varsa, eğik çizgi içerse bile alt dizelerle eşleşen parametreleri kabul etmesini sağlar. Örneğin, gibi rotalar bunun gibi bir edit/color/:color/largecode/*largecode şeyle eşleşecektir http://appdomain.com/edit/color/brown/largecode/code/with/slashs.

Kendim test ettim (1.1.5 kullanarak) ve harika çalışıyor. Her yeni URL'nin denetleyicinizi yeniden yükleyeceğini unutmayın, bu nedenle herhangi bir durumu korumak için özel bir hizmet kullanmanız gerekebilir.

İşte iyi çalışan başka bir çözüm.

(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;

    }

})();