Angular ui router dynamic routes - angularjs

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.

Answer 1

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:
Moby |
Moby: Ch1 |
Gatsby |
Gatsby: Ch4 |
Scarlet Letter<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