AngularJS + Twitter Bootstrap: Changes remain on partial after change (jQuery Mobile)

Question

I am trying to build a single page application that has three views using angular and bootstrap. I am new to angular and I want to implement the following:

In jQuery Mbile it is possible to have three different chats on three different pages..if I am currently on Page A, the chats in Pages B and C are still ongoing. Hence, navigating through pages does not stop processes on the other ones.

Please correct me if I'm wrong. I want to know how I can switch between multiple views/templates on the same partial/page in angular the way i can navigate between divs with data-role="page" in jQuery Mobile? Is it a good idea to combine jQuery Mobile with angular and bootstrap? (I really don't think it is)

Answer 1

First, whenever a route changes, angular refreshes the view. The only way to prevent this is to set the "reloadOnSearch" parameter in the route to false. Once you've done this, you can pass querystring parameters to the view without reloading the view. There is an added caveat in that you have to explicitly listen for "$routeUpdate". Following is the angular code, below that is a fiddle that accomplishes your goal of switching between multiple chats without refreshing the view. I use ng-show to show the appropriate chat based on the passed querystring parameter.

angular.module('app',[]).config(function($routeProvider){

    $routeProvider.when('/', {templateUrl: 'view.html', reloadOnSearch:false});

}).controller('controller', function($scope, $routeParams){
    $scope.$on('$routeUpdate', function(value) {
        $scope.id =   $routeParams.id;
    }); 
}).directive('chat', function(){
    return{
        restrict:'E',
        replace:true,
        scope:{},
        controller: function($scope){
            $scope.items = [];
            $scope.submit = function(text){
                $scope.items.push(text);
            };
        },
        templateUrl:'chat.html'
    }
});

http://jsfiddle.net/jwanga/u2RrU/