How to navigate between states with Angular JS

Question

I am writing code to show a simple list of users. And when clicking on a user I want to get to a view with information about that user. I have reached to the point where I show the user in a list and when I click a user I get to the view I have created. My question is where to add the views for all the users and how to show them correctly:

Here is what I got until now:

UsersCtrl.$inject = ['$scope'];
    function EventsCtrl($scope {
        $scope.events = [
        { Name: 'User1', id: 1, image: 'logo1.jpg' },
        { Name: 'User2', id: 2, image: 'logo2.jpg' },
        ];
}

 UsersCtrl.$inject = ['$scope'];
    function UserCtrl($scope, '$routeParams') {
 $scope.userId = $routeParams.userId;
    }

And in app.js :

 .state('app.users', {
                    url: "/users",
                    views: {
                        'appScreen': {
                            templateUrl: "users.html",
                            controller: 'UsersCtrl'
                        }
                    }
                })

                 .state('app.userV', {
                     url: "/users/:usersId",
                     views: {
                         'appScreen': {
                             templateUrl: "user.html",
                             controller: 'UsersCtrl'
                         }
                     }
                 })

and in my Index.html

<script type="text/ng-template" id="users.html">
        <ion-view  view-title="Users">
            <ion-content> 
                <div class="list">
                            <a class="item item-thumbnail-left" ng-repeat="user in users" ui-sref="app.userV({userId: user.id})">
                                <img ng-src="{{user.image }}">
                                <h2>{{user.Name}}</h2>
                            </a>
                </div>  
            </ion-content>
        </ion-view>
    </script>

<script type="text/ng-template" id="user.html">
        <ion-view view-title="User">
            <ion-content>
                <div class="list card">

                    <div class="item item-avatar">
                        <img src="User1.jpg">
                        <h2>User 1 </h2>
                    </div>

                    <div class="item item-body">
                        <img class="full-image" src="/Content/img/P9090246.jpg">
                        <p>
                            This is a "Facebook" styled Card. The header is created from a Thumbnail List item,
                            the content is from a card-body consisting of an image and paragraph text. 
                        </p>
                    </div>
                </div>
            </ion-content>
        </ion-view>
    </script>

indubitablee · Accepted Answer · 2015-01-19 14:13:20Z

1

So you have the set up nicely done. You want to put the structure of your html in user.html (the new page that you created to see a specific user). But the html will just be a template that will be the same for each user (like show name, show image here, etc). In that html, you want to include the angular bindings for the specific user using the id that you passed through the url as a parameter. hope this helps a bit

EDIT: (for more information) So it might be easier to build a different controller called something like userDetailCtrl or something. and match it up in the ngRoute structure. in that controller, the same why how you inject $scope, you want to inject $routeParams. something like this:

mainAppControllers.controller('userDetailCtrl', ['$scope', '$routeParams', function($scope, $routeParams) {
    $scope.userId = $routeParams.userId;
}]);

then you'll have that users Id and you can get the corresponding information. in essence, you're using angular's capability of injection to pass information to controllers

edited Jan 19, 2015 at 14:13

answered Jan 19, 2015 at 13:45

indubitablee

8,2262 gold badges27 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Amehiny Over a year ago

Yes. It sounds correct but where should I pass the Id at what point ?

Amehiny Over a year ago

Well I have the second controller and I did what you said : UserCtrl.$inject = ['$scope', '$routeParams']; function UserCtrl($scope, $routeParams){ $scope.UserId = $routeParams.UserId; } My problem is on the index view where I have my scripts, how to tell that this HTML view has Id =1 and Id=2 and so on

indubitablee Over a year ago

@AhmedHMehiny by index view, do you mean users.html or user.html? if its user.html its through the injection, if its users.html, its through the binding of event.id i presume from your events array.

Amehiny Over a year ago

hmm I have both user and users in one file index ... I decided to put them on the index so I wont load them many times

indubitablee Over a year ago

hahah im kinda lost with whats happening but looking at the angular js tutorial (specifically step 7) should help you regarding a template thats loaded by parameter ids passed in the url: docs.angularjs.org/tutorial/step_07. its actually quite similar to what you're trying to achieve, just with phones instead of users haha

Kiee · Accepted Answer · 2015-01-19 13:41:05Z

0

You can use ui-sref instead of href on anchors to target states.

Also if you want to navigate to a child state and view the content on the same page as the parent state you would do the following

<!-- this is parentState view-->
<div ui-view>
some content will get pulled in from parent template file
<a ui-sref="parentState.childState">click me to go load child state</a>

<div ui-view>
  This will pull in the template from parentState.childstate
</div>

</div>

answered Jan 19, 2015 at 13:41

Kiee

10.8k8 gold badges35 silver badges56 bronze badges

Collectives™ on Stack Overflow

How to navigate between states with Angular JS

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related