How to handle long dynamic urls using angular ui-router?

Question

I am creating a front-end application for the REST service, and most resources are located on long URLs, where most segments are dynamically based on the entries created by users in the application. Obviously, I cannot recognize or create hard-coded routes for most of these entries.

My question is, I suppose, how to handle URLs like this using ui-router:

<semester>/<program>/<class>/enrollment

or

<semester>/myclasses/<class>/assignments

Each resource URL always has at least one static, predictable segment, and segments are always in a predictable order.

I am making abstract states for each segment in the url, for example:

$stateProvider.state(semester)  
    .state(program)  
    .state(class)  
    .state(assignments);

??

I tried building routes that look like this:

param = {  
    name: "param",  
    url: "/:hue/:temp/param",  
    templateUrl: "http://localhost:81/route/tpl/param.tpl.html",  
    controller: "paramController"  
  };

.otherwise(), "param".

, .

Answer 1

, , . , , , , , ui-router . , - . , .

, .

, - .:)

var app = angular.module('app', ['ui.router'])

.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function ( $stateProvider,   $urlRouterProvider, $locationProvider) {

  $urlRouterProvider.otherwise("/");
  $locationProvider.html5Mode(true);

  var semester = {
    name: "semester",
    abstract: true,
    url: "semester/:sem",
    templateUrl: "http://localhost:81/route/to/semtemplate.tpl.html",
    controller: "semesterController"
  },
  program = {
    name: "program",
    parent: sem,
    url: "program/:prg",
    templateUrl: "http://localhost:81/route/to/prgtemplate.tpl.html",
    controller: "programController"
  },
  classes = {
    name: "classes",
    parent: prg,
    url: "/classes",
    templateUrl: "http://localhost:81/route/to/clstemplate.tpl.html",
    controller: "classesController"
  };

  $stateProvider.state(sem)
    .state(prg)
    .state(classes);
}]);

app.controller('paraController', ['$scope', '$stateParams', '$state',function($scope, $state, $stateParams){
  console.log('paraController instantiated');
  $scope.sem = $stateParams.params.sem;
  $scope.prg = $stateParams.params.prg;
}]);

REST api, , , . , , . , , , . , /:sem , semester/:sem .

, URL- , .

Answer 2

, :

.config(function($stateProvider, $urlRouterProvider) {
$stateProvider.state('app', {
    url : "/app",
    abstract : true,
    templateUrl : "layout/navigation-drawer.tpl.html"

}).state('app.help', {
    url : "/help",
    views : {
        'menuContent' : {
            templateUrl : "layout/help.html"
        }
    }
}).state('app.settings', {
    url : "/settings",
    views : {
        'menuContent' : {
            templateUrl : "layout/settings.html"
        }
    }
}).state('app.rate-us', {
    url : "/rate-us",
    views : {
        'menuContent' : {
            templateUrl : "layout/rate-us.html"
        }
    }
}).state('app.projects', {
    url : "/projects",
    views : {
        'menuContent' : {
            templateUrl : "layout/projects.html",
            controller : 'ProjectsCtrl'
        }
    }
}).state('app.forms', {
    url : "/:project_name/forms",
    views : {
        'menuContent' : {
            templateUrl : "layout/forms.html",
            controller : 'FormsCtrl'
        }
    }
}).state('app.entries', {
    url : "/:project_name/:form_name/entries/:form_id",
    views : {
        'menuContent' : {
            templateUrl : "layout/entries.html",
            controller : 'EntriesCtrl'
        }
    }
});

, "/:project_name/:form_name/entries/:form_id" - app/Mirko_test/University/entries/1

Answer 3

I know this question is old, but lately I have had essentially the same question, and I have found an official answer. Apparently angular ui-router now supports the concept of URL parameters in URL routing, which allows you to specify parameters according to the following lines:

$stateProvider
    .state('contacts.detail', {
        url: "/contacts/:contactId",
        templateUrl: 'contacts.detail.html',
        controller: function ($stateParams) {
            // If we got here from a url of /contacts/42
            expect($stateParams).toBe({contactId: 42});
        }
    })

For more information, go here: https://github.com/angular-ui/ui-router/wiki/URL-Routing#url-parameters