changing the view of the div using angular ui-router

Question

Here is the code which i have written so as to change my view (without any change in the url)

<a ui-sref="chat.menu" ng-click="click1();">Latest</a>
<a ui-sref="chat.menu" ng-click="click2();">Mail</a>
<div ui-view="{{item}}"></div>

var app = angular.module('myApp',['ui.router'])
    .run(['$rootScope','$state','$stateParams', function($rootScope,$state,$stateParams){
        $rootScope.$state = $state;
        $state.$stateParams = $stateParams;
    }]);


app.config(function($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise('/');
$stateProvider
    .state('home',{
        url:'/',
        templateUrl:'templates/main.html',
    })
    .state('chat',{
        url:'/chat',
        templateUrl:'templates/chatPage.html',
        controller: 'chatController',
    })
    .state('chat.menu',{
        views: {
            '':{
                template: '<h1>Blank</h1>',
            },
            'latest': {
                template: '<h1>Latest</h1>',
            },
            'mail': {
                template: '<h1>Mail</h1>',
            }
        }
    });
});

app.controller('Controller', function($scope,$state, authentication){
    $scope.item='';
    $scope.click1 = function(){
        $scope.item = "latest";

    }
    $scope.click2 = function(){
        $scope.item = "mail";
    }
});

Its working fine, but the problem is that I change the the view only once. Once a view is loaded in the ui-view, then another view is not getting loaded in it on the click of the button.

All i want is that, when the user click the button the view should be changed according to the click of the button without any change in the url.

no, I am not. I am new to ui-router, can u please help me with this. — Krisalay
– Krisalay, Commented Aug 19, 2016 at 14:06
Also, if we will use $state.go(), then it will change the url, right? — Krisalay
– Krisalay, Commented Aug 19, 2016 at 14:08
Only if you set a new URL in the state that you provide to $state.go(). — I think I can code
– I think I can code, Commented Aug 19, 2016 at 14:09

I think I can code · Accepted Answer · 2016-08-19 14:24:49Z

1

So I'd trying something like this: having two states instead of one. If you want to keep only one state, you'd need to pass parameters to that state, but for a simple example like this, two states will work just fine:

myApp.config(function ($stateProvider){
    $stateProvider
    .state("latest", {
        url: "#",
        template: "<h1>Latest</h1>",
        controller: "Ctrl1"
      })
    .state("mail", {
        url: "#",
        template: "<h1>Mail</h1>",
        controller: "Ctrl2"
    });
});

What we are doing here is either setting the URL to the same in both states, or setting no URL at all. Also, if you want to assign controllers to your views, here is were we do it. You can assign no controllers, two different controllers, or the same controller if you would like.

Then setup your view like this:

<nav> 
    <a ui-sref="latest">Latest</a>
    <a ui-sref="mail">Mail</a>
</nav>

<div ui-view></div>

Here is a working JSFiddle

answered Aug 19, 2016 at 14:24

I think I can code

6471 gold badge6 silver badges18 bronze badges

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

2 Comments

Krisalay Over a year ago

It worked thank you, but if we want a view to be pre-loaded, then what can we do?

I think I can code Over a year ago

Depending on how you are loading your parent state, if you are loading your parent state by URL and you don't want you child state to have a different URL, then try calling $state.go() as the first item in the parent controller so that when it loads, you can pass the child state you want loaded. If you are already calling your parent state by state name instead of URL, you could just call the child state instead and it would load the parent state as well. Alternatively, if you give the child state its own url, instead of calling the parent by its url, you could again just use the child

Collectives™ on Stack Overflow

changing the view of the div using angular ui-router

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related