Routing angolare UI-Router basato su slug da API Ajax Call. vista del carico basato sul slug

Question

Esempi lumache in database del server accessibile tramite API:

{slug: "john-smith",type: "user"} 
{slug: "microsoft-technologies",type: "company"} 

scenario 1: vista utente & regolatore: http://localhost/john-smith

.state('user', { 
    url: '/:user', 
    templateUrl: 'partial-user.html', 
    controller: 'userCtrl' 
}) 

scenario 2: vista dell'azienda & regolatore : http://localhost/microsoft-technologies

.state('company', { 
    url: '/:company', 
    templateUrl: 'partial-company.html', 
    controller: 'companyCtrl' 
}) 

Ora voglio rendere lo stato dinamico basato sullo slug ottenuto dalla chiamata API al server.

Ho scritto un codice immaginario . Ma Non ricevo modo per raggiungere

// Example URL http://localhost/john-smith 
.state('hybrid', { 
    // /john-smith 
    url: '/:slug', 
    templateUrl: function() { 
     return "partial-"+type+".html" 
    }, 
    controllerProvider: function (rt) { 
     return type+'Controller' 
    }, 
    resolove: { 
     type: function ($http, $stateParams) { 
      $http.get({ 
       method: "GET", 
       url: "http://localhost/api/" + $stateParams.slug 
      }).success(function(response, status, headers, config){ 
       //response = {slug: "john-smith",type: "user"} 
       return response.type 
      }) 
      return 
     } 
    }  
}) 

Answer 1

C'è a working plunker.

Viene dal problema simile: AngularJS ui-router - two identical route groups

Nel caso in cui, io capisco il tuo obiettivo correttamente, questa sarebbe la definizione dello stato rettificato (ho appena saltato la $ http e una parte di risposta del server, solo lavorando con il parametro passato):

.state('hybrid', { 
    // /john-smith 
    url: '/{slug:(?:john|user|company)}', 
    templateProvider: ['type', '$templateRequest', 
     function(type, templateRequest) 
     { 
     var tplName = "tpl.partial-" + type + ".html"; 
     return templateRequest(tplName); 
     } 
    ], 
    controllerProvider: ['type', 
     function(type) 
     { 
     return type + 'Controller'; 
     } 
    ], 
    resolve: { 
     type: ['$http', '$stateParams', 
     function($http, $stateParams) { 
      /*$http.get({ 
      method: "GET", 
      url: "http://localhost/api/" + $stateParams.slug 
     }).success(function(response, status, headers, config){ 
      //response = {slug: "john-smith",type: "user"} 
      return response.type 
     })*/ 
      return $stateParams.slug 
     } 
     ] 
    } 
}) 

Un cambiamento è il resolove : {} divennero: resolve : {}. Un altro è il fixture del controller def (rt vs type). E inoltre, facciamo profitto da costruito nelle caratteristiche templateProvider e $templateRequest(simile qui: Angular ui.router reload parent templateProvider)

assegno che in azione here

EXTEND, compresa la parte $ http (extended plunker)

Diamo regolare (per scopi plunker) la parte server di tornare queste informazioni come data.json:

{ 
"john-smith": {"type": "user"}, 
"lady-ann": {"type": "user"}, 
"microsoft-technologies" : {"type": "company" }, 
"big-company" : {"type": "company" }, 
"default": {"type" : "other" } 
} 

E questi link:

<a href="#/john-smith"> 
<a href="#/lady-ann"> 

<a href="#/microsoft-technologies"> 
<a href="#/big-company"> 

<a href="#/other-unknown"> 

sarà facilmente gestito da questo stato rettificato DEF:

.state('hybrid', { 
    // /john-smith 
    url: '/:slug', 
    templateProvider: ['type', '$templateRequest', 
     function(type, templateRequest) 
     { 
     var tplName = "tpl.partial-" + type + ".html"; 
     return templateRequest(tplName); 
     } 
    ], 
    controllerProvider: ['type', 
     function(type) 
     { 
     return type + 'Controller'; 
     } 
    ], 
    resolve: { 
     type: ['$http', '$stateParams', 
     function($http, $stateParams) { 
      return $http.get("data.json") 
      .then(function(response){ 
       var theType = response.data[$stateParams.slug] 
        ||response.data["default"] 
       return theType.type 
      }) 
     } 
     ] 
    } 
    }) 

check that updated stuff here