CODEWITHSUNDEEP
javascriptjqueryangularjsionic-framework
Amehiny
Amehiny

Reputation: 135

How to navigate between states with Angular JS

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>

Upvotes: 0

Views: 179

Answers (2)

indubitablee
indubitablee

Reputation: 8206

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

Upvotes: 1

Kiee
Kiee

Reputation: 10771

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>

Upvotes: 0

Related Questions