dynamically allocate the id in the URI in the ng-resource

Question

I have a webpage created on the angularjs in which I have used the ng-resource and the ui-router module.

In this app The main requirement I want is that in the navigation bar, I have created the ng-repeat="". which fetches the username from the database.

Now the navigation bar will be created

along with the ui-sref="{{username}}" and then now I have shown the app.js

this App.js is for the view which is going to be loaded and it will require the {{username}} as it id so here username is needed to dyanamically allocated for the each get request

var app = angular.module('trendy', ['ngResource']);

app.controller('trendyWho',[ 'UserFactory', function ( UserFactory) {

  var self=this;
  
    UserFactory.get({}, function (userFactory){
       self.userdata = userFactory.user;
       
    });
    
}]);
  


app.factory('UserFactory', function ($resource) {
   
    return $resource('Trending/js/{{id:username}}', {}, {
        query: {
            method: 'GET',
            params: {},
            isArray: true
        }
        
    })
    
 
});

<!-- index.html -->

<!DOCTYPE html>
<html ng-app="trendy">
<head>
<!-- CSS (load bootstrap) -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">  
<!-- JS (load angular, ui-router, and our custom js file) -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js" ></script>
<script src="app.js"></script>
</head>
<!-- apply our angular app to our site -->
<body >
<!-- NAVIGATION -->
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
  <a class="navbar-brand" ui-sref="#">AngularUI Router</a>
</div>
<ul class="nav navbar-nav" ng-repeat="">
   <li><a ui-sref=".../{{username}}">{{username}}</a></li>
   
</ul>
</nav>

<!-- MAIN CONTENT -->
<div class="container">

    <!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
    <div ui-view></div>

</div>

</body>
</html>

score 0 · Accepted Answer · answered Jul 22 '15 at 05:26

0

You are using ui-sref so I assume you are using ui-router?

The argument in ui-sref is different from the normal href, you pass in the state name instead of the URL itself.

For example your state is

.state('main.user', {
    url: "/user/{userId:[0-9]{1,}",
    template: ...,
    controller: ...
})

Then your sref will be ui-sref="main.user({userId: username})"

answered Jul 22 '15 at 05:26

Icycool

7,099
1
25
33

creating dyanamic sref is correct but how to create the URI for the get of the different view going to opened – harish kumar Jul 22 '15 at 05:29
since I have to fetch the different data according to the different views loaded according to the username – harish kumar Jul 22 '15 at 05:34
the main problem is how to fetch the URI – harish kumar Jul 22 '15 at 05:35
If somehow we can alter the id of the URi according to the {{username}} – harish kumar Jul 22 '15 at 05:36
Do you mean the URI in `$resource`? You get username in that by using `$stateParams.userId` – Icycool Jul 22 '15 at 05:38
can u link me with any good documentation apart for the github one or any fiddle for my clarity because being a newbie in angularjs and lack of correct resources i m not getting how to use the $stateParams – harish kumar Jul 22 '15 at 05:51
help is appreciated otherwise one way or other your first comment is still illuminating – harish kumar Jul 22 '15 at 05:51
$stateParams comes with ui-router, it stores the variable part in your state. You can console.log it to see what is inside. – Icycool Jul 22 '15 at 05:56
So do I had to define my Uri like this "nest/account/$stateparams – harish kumar Jul 22 '15 at 05:58
`$stateParams.something`. Can you show your state configuration in case something is different there? – Icycool Jul 22 '15 at 06:18
var app = angular.module('trendy', ['ngResource']); app.controller('trendyWho'[ 'UserFactory', function ( UserFactory) { var self=this; UserFactory.get({}, function (userFactory){ self.userdata = userFactory.user; }); }]); app.factory('UserFactory', $stateparams, function ($resource,$stateparams) { return $resource('Trending/js/:Id',{Id: "$stateparams.id" } ,{}, { query: { method: 'GET', params: {}, isArray: true } }) }); so can I inject the $stateparams in fac. ike this – harish kumar Jul 22 '15 at 09:13
app.config(function config ($stateProvider, $urlRouterProvider){ $urlRouterProvider // The `when` method says if the url is ever the 1st param, then redirect to the 2nd param // Here we are just setting up some convenience urls. .when('/c?id', '/contacts/:id') .when('/user/:id', '/contacts/:id') // If the url is ever invalid, e.g. '/asdf', then redirect to '/' aka the home state .otherwise('/Settings/ResetPass'); $stateProvider.state("index",{ url:"/", controller : "myCtrl as first", templateUrl: "Feed/feed.html" }); – harish kumar Jul 22 '15 at 09:21
I'm not sure if you are suppose to use both normal routing (`.when`) and state routing (`.state`) together. Either way you'll need to get the username from the URL. The process goes: user select 1 user -> user id get passed in URL -> get user id from $stateParam or URL path -> load corresponding data. – Icycool Jul 22 '15 at 09:59

dynamically allocate the id in the URI in the ng-resource

1 Answers1