how to create routemap with angularjs ngRoute

Question

I am creating web application similar to gdrive or dropbox, when I navigate through my folders through links, i need to get path in url. I need to change the path from client side itself using angularJS.

e.g

 $stateProvider
        .state('/root', 
                    {
                     url: "/root",
                     templateUrl: "cloud.html"
                    })
        .state('root.___', 
                    {
                        url: "/root/:path",
                        templateUrl: "cloud.html"
                    })
        .otherwise({ redirectTo: "/root" });
       });

The controller and template need not be changed, only the url need to be changed, look like this

http://mycloud.com/newfolder/newfolder or http://mycloud.com/newfolder/.../.../../folder

How to achieve this in angular js ui-router what need to be filled in the blank space?

possible duplicate of [AngularJS- Login and Authentication in each route and controller](http://stackoverflow.com/questions/20969835/angularjs-login-and-authentication-in-each-route-and-controller) — Mohammad Sepahvand, Jan 08 '15 at 06:46

score 0 · Answer 1 · answered Jan 08 '15 at 06:55

0

___ can be replaced by 'path' or any other state of your choice.

$stateProvider .state('/root', { url: "/root", templateUrl: "cloud.html" }) .state('root.path', { url: "/root/:path", templateUrl: "cloud.html" }) .otherwise({ redirectTo: "/root" }); });

Since you already have param :path in your url, it will take care of your URLs. While using ui-sref, just pass the param path along with it.

Like <a ui-sref="root.path({path:your-path-here})">Path</a>

You need to remember that states follow hierarchy. Refer angular-ui's state page .

answered Jan 08 '15 at 06:55

Aniket Sinha

6,001
6
37
50

the cloud.html template is not reloading. the app needs cloud.html reloaded everytime when new url visited – praveenraj Jan 08 '15 at 09:14
Why do you need to reload the html file? – Aniket Sinha Jan 08 '15 at 09:23
yes the ui-view need to be reloaded, as it changes. like http://myweb/abc is different from http://myweb/abc/abc/abc – praveenraj Jan 08 '15 at 12:29
Its not reloaded because both parent and child use the same html file hence, it is cached. How are you handling `ui-view` then, isn't it going to be recursive? `ui-view` inside `ui-view` !!! Show `cloud.html` file, let's see what can be done. – Aniket Sinha Jan 08 '15 at 12:50

how to create routemap with angularjs ngRoute

1 Answers1