Angular ui router dynamic routes

Question

I am using the following library

@version v0.2.11
@link http://angular-ui.github.com/

What i am looking at is for dynamic routing for ex: for route localhost:8080/#/about it goes to function, let say routedFunction which defines the template html <div>about me .. </div>

and if someone goes to localhost:8080/#/abc ; routedFunction will get a routing url as parameter abc and it will know display that .. may be <div>abc xyz abc</div>

I am unable to find a solution for this.

Saad Bin Shahid Saad Bin Shahid · Accepted Answer · 2016-04-12T09:05:42

You need to use a router.

Angular documentation for $route can be found at @ https://docs.angularjs.org/api/ngRoute/service/$route

Please find and have a look at following example in documentation. This example shows how changing the URL hash causes the $route to match a route against the URL, and the ngView pulls in the partial.

<div ng-controller="MainController">
  Choose:
  <a href="Book/Moby">Moby</a> |
  <a href="Book/Moby/ch/1">Moby: Ch1</a> |
  <a href="Book/Gatsby">Gatsby</a> |
  <a href="Book/Gatsby/ch/4?key=value">Gatsby: Ch4</a> |
  <a href="Book/Scarlet">Scarlet Letter</a><br/>

  <div ng-view></div>

  <hr />

  <pre>$location.path() = {{$location.path()}}</pre>
  <pre>$route.current.templateUrl = {{$route.current.templateUrl}}</pre>
  <pre>$route.current.params = {{$route.current.params}}</pre>
  <pre>$route.current.scope.name = {{$route.current.scope.name}}</pre>
  <pre>$routeParams = {{$routeParams}}</pre>
</div>

Here is another example for defining different routes.

scotchApp.config(function($routeProvider) {
    $routeProvider

        // route for the home page
        .when('/', {
            templateUrl : 'pages/home.html',
            controller  : 'mainController'
        })

        // route for the about page
        .when('/about', {
            templateUrl : 'pages/about.html',
            controller  : 'aboutController'
        })

        // route for the contact page
        .when('/contact', {
            templateUrl : 'pages/contact.html',
            controller  : 'contactController'
        });
});

To learn and understand router/routing the easy way @ https://scotch.io/tutorials/single-page-apps-with-angularjs-routing-and-templating

Angular ui router dynamic routes

1 Answers