CODEWITHSUNDEEP
javascriptangularjsangular-translate
Imo
Imo

Reputation: 1475

How can I switch between controllers for one view angular js

I have an angular app with one main view and two main controllers I would like to toggle between these two controllers depending on the button click. How is this achievable with angularjs?

Full Explanation: I have a webpage that has some dynamic text and chart. I would like to have in two languages English and German. Basically I want one controller to change English text if the language is switched to English and the other one German. I have tried Angular Translate But I am not sure how to use it to translate values returning from functions, so decided to change it via controller.

I update the page via ui-router my code below

function routerConfig($stateProvider, $urlRouterProvider, $locationProvider) {
    $locationProvider.html5Mode(true);

    $stateProvider
      .state('home', {
        url: '/',
        templateUrl: 'app/main/main.html',
        controller: 'MainController',
        controllerAs: 'main'
      })
      .state('line', {
        url: '/lineChart',
        templateUrl: 'app/simplerChart/simplerChart.html',
        controller: 'SimpleChartController'
      });

Upvotes: 1

Views: 1026

Answers (1)

Michael Money
Michael Money

Reputation: 2449

We got two routes and two controllers bind to each route. You can toggle between two routes: /english and /german. Both got different controllers, both got different templates.

1) If you click "First View" you will be taken to URL "#/english" where you got binded MainFirstCtrl to this HTML: 

<div  style="background: mediumpurple">{{ctrl.title}}</div>

2) If you click "First View" you will be taken to URL "#/english" where you got binded MainSecondCtrl to this HTML: 

<div style="background: yellowgreen">{{ctrl.title}}</div>

3) Now using ui-sref you can change states:

<button type="button" ui-sref="first">Go to First View (/english)</button>
<button type="button" ui-sref="second">Go to Second View (/german)</button>

4) States are defined in ui-router config like this:

$stateProvider.state('first', {
    url: '/first',
    template: '<div  style="background: mediumpurple">{{ctrl.title}}</div>',
    controller: 'MainFirstCtrl',
    controllerAs: 'ctrl'
});

Working example below:

var myapp = angular.module('myapp', ['ui.router']);


//Here are our routes defined
myapp.config(['$stateProvider', function ($stateProvider) {
    $stateProvider.state('first', {
        url: '/english',
        template: '<div class="view" style="background: mediumpurple">{{ctrl.title}}</div>',
        controller: 'MainFirstCtrl',
        controllerAs: 'ctrl'
    });

    $stateProvider.state('second', {
        url: '/german',
        template: '<div class="view" style="background: yellowgreen">{{ctrl.title}}</div>',
        controller: 'MainSecondCtrl',
        controllerAs: 'ctrl'
    });


}]);

//Here are our two different controllers that would control the same view BUT with different routes
myapp.controller('MainFirstCtrl', ['$scope', function($scope) {
    this.title = 'This is english view';
}]);

myapp.controller('MainSecondCtrl', ['$scope', function($scope) {
    this.title = 'This is german view';

}]);
button {
  background: #1e6791;
    border: 0;
    color: #fff;
    padding: 15px 20px;
    font-family: arial;
    font-size: 15px;
    margin: 15px 0px;
    box-shadow: 0px 0px 1px rgba(0,0,0,.3);
  }

.view {
  width:300px;
  height:150px;
}
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>
</head>
<body ng-app="myapp">

<button type="button" ui-sref="first">Go to First View (/english)</button>
<button type="button" ui-sref="second">Go to Second View (/german)</button>

<div ui-view></div>

<div show-contact></div>
</body>
</html>

Upvotes: 2

Related Questions