2014-02-10 4 views
2

У меня есть приложение AngularJS, построенное с версией 1.2.5. Я пытаюсь динамически добавлять маршруты. В настоящее время у меня есть следующие:Динамически добавлять маршруты в AngularJS

var sitemap = [];  
angular.module('app', ['ngRoute', 'ngAnimate']) 
    .config(function ($routeProvider, $locationProvider) { 
    $locationProvider.html5Mode(true); 
    angular.forEach(sitemap, function (value, key) { 
     $routeProvider.when(value.route, { templateUrl: value.html, controller: viewCtrl }); 
    }); 
    $routeProvider.otherwise({ templateUrl: '/views/default.html', controller: viewCtrl }); 
    }) 
    .service('navigationService', function() { 
    this.loadItems = function() { 
     console.log('loading items...'); 
     sitemap.push({ 
     name: 'dashboards', children: [ 
      { name: 'dashboard 1', route: '/dashboards/dashboard1', html: '' } 
     ] 
     }); 

     sitemap.push({ 
     name: 'views', children: [ 
      { name: 'historical', route: '/views/historical', html: '/views/historical.html' }, 
      { name: 'present', route: '/views/present', html: '/views/present.html' }, 
      { name: 'future', route: '/views/future', html: '/views/future.html' } 
     ]}); 
    }; 
    }) 
; 

Хотя моя карта сайта жестко закодировано, я хотел бы, чтобы в конечном итоге вытащить это из веб-службы. Вот почему я хочу полагаться на функцию в сервисе. Однако я не могу понять, как динамически строить маршруты, как только я их получу. Может кто-нибудь, пожалуйста, дайте некоторое представление?

Спасибо!

+0

Будет ли это поможет вам: http://stackoverflow.com/questions/13681116/angularjs-dynamic-routing?rq=1 – link64

+0

К сожалению, нет. Причина в том, что html и route могут не иметь одинаковое значение. Например, у меня могла бы быть запись, которая выглядит как {name: 'other', route: '/ where/rainbow', html: '/ root/site'} – user3284007

ответ

0
// version 1.0.1, after angular-route.js becomes an independent file in the later version, directly set the $route doesn't work. 
       var pathRegExp = function (path, opts) { 
        var insensitive = opts.caseInsensitiveMatch, 
         ret = { 
          originalPath: path, 
          regexp: path 
         }, 
         keys = ret.keys = []; 

        path = path.replace(/([().])/g, '\\$1') 
         .replace(/(\/)?:(\w+)([\?\*])?/g, function (_, slash, key, option) { 
          var optional = option === '?' ? option : null; 
          var star = option === '*' ? option : null; 
          keys.push({ 
           name: key, 
           optional: !!optional 
          }); 
          slash = slash || ''; 
          return '' + (optional ? '' : slash) + '(?:' + (optional ? slash : '') + (star && '(.+?)' || '([^/]+)') + (optional || '') + ')' + (optional || ''); 
         }) 
         .replace(/([\/$\*])/g, '\\$1'); 

        ret.regexp = new RegExp('^' + path + '$', insensitive ? 'i' : ''); 
        return ret; 
       } 
       var addRoute = function (path, route) { 
        $route.routes[path] = angular.extend(
         { 
          reloadOnSearch: true 
         }, 
         route, 
         path && pathRegExp(path, route)); 

        // create redirection for trailing slashes 
        if (path) { 
         var redirectPath = (path[path.length - 1] == '/') ? path.substr(0, path.length - 1) : path + '/'; 

         $route.routes[redirectPath] = angular.extend({ 
          redirectTo: path 
         }, 
         pathRegExp(redirectPath, route)); 
        } 

        return this; 
       }; 


angular.forEach(routing, function (item) { 
         addRoute(item.route, { 
          templateUrl: item.templateUrl, 
          controller: item.controller 
         }); 
        }); 
+0

. Лучше, если вы добавите объяснение и дадите больше комментариев – azerafati

Смежные вопросы