CODEWITHSUNDEEP
angularjsmongodbangular-ui-router
gjanden
gjanden

Reputation: 101

Binding to data when changing the URL

I am building an application that uses ui-router. On my /teams route I have a form where a user can add a team name which then pushes the name to my MongoDB and binds to the view and displays the team name with several options, one of those being a button that links to a page where more specific information can be added for the team. I have the routing working on this and the url appears like /#/teams/oklahoma or /#/teams/washington for example. Here is what my routing looks like:

app.config(
    ['$stateProvider','$urlRouterProvider', 
    function($stateProvider, $urlRouterProvider){
    $urlRouterProvider.otherwise('/');
    .state('teams', {
        url: '/teams',
        templateUrl: './templates/main/league.html',
        controller: 'leagueCtrl'
    })
    .state('teams/:title', {
        url: '/teams/:title',
        templateUrl: './templates/main/team.html',
        controller: 'teamCtrl'
    })

Here is my link to the /teams/:title route:

<a href="#subjects/{{ team.title | lowercase }}">
    <button ng-click="viewTeam(team)" class="team-button">View</button>
</a>

Currently I do not have anything in my viewTeam() function. My question is how do I bind to my {{ team.title }} and other related information in the new view with the new URL? I know a factory must be somehow involved and I have tried implementing the solution described at http://onehungrymind.com/angularjs-communicating-between-controllers/ without success. Any additional guidance would be very much appreciated.

Upvotes: 0

Views: 77

Answers (1)

Chris T
Chris T

Reputation: 8216

The URL should probably contain the team ID. I'm going to assume your 'teams' array is loaded using $http from some backend API.

app.config(
    ['$stateProvider','$urlRouterProvider', 
    function($stateProvider, $urlRouterProvider){
    $urlRouterProvider.otherwise('/');

    .state('teams', {
        url: '/teams',

        // the `teams` state will wait to load until $http.get() call is completed.
        // this resolve declaration will provide the resulting teams array as an injectable 'teams' object.
        resolve: { teams: function($http) { return $http.get("/teams.json"); },

        templateUrl: './templates/main/league.html',

        // This simplified controller injects the 'teams' resolve and simply sticks the list of teams on the scope to ng-repeat etc.
        controller: function($scope, teams) { $scope.teams = teams; } 
    })


    // This is a nested state, called `teams.team`.  It requires a `teamId` parameter.  
    // The parameter can be provided by a URL: http://localhost/app#/teams/9237594827
    // The parameter can be provided by $state.go: $state.go('teams.team', { teamId: 9237594827 });
    // The parameter can be provided by uiSref: <a ui-sref="teams.team({ teamId: repeatedTeam.id })">{{repeatedTeam.title}}</a>
    .state('teams.team', {
        // `teams.team` state declares a `teamId` state parameter in the URL
        url: '/teams/:teamId',

        // This resolve function uses $stateParams to locate the correct team from the list.
        // `team` will be made available for injection
        resolve: { 
          team: function($stateParams, teams) {

            // Find the correct team from the `teams` array, by ID.
            return teams.filter(function(team) { return team.id === $stateParams.teamId; })[0];
          }
        },

        templateUrl: './templates/main/team.html',

        // Inject the `team` resolve and put it on $scope
        controller: function($scope, team) { $scope.team = team; }
    })

league.html: 

 <ul>
   <li ng-repeat="team in teams">
     <a ui-sref="teams.team({ teamId: team.id })">{{team.title}}</a>
   </li>
 </ul>

Upvotes: 1

Related Questions