CODEWITHSUNDEEP
javascriptangularjsngroute
Haris Khan
Haris Khan

Reputation: 171

AngularJS: Same template is used by two different URL, I want to change some parts of view when on other URL

For example I have this input button:

<input type="button" class="blue-button pull-right" value="{{gb.gebruikerToevoegenText}} toevoegen" ng-click="gebruikers.addGebruiker()"/>

In the controller I am trying to achieve this through this logic:

vm.gebruikerToevoegenText = $location.path() == '/gebruikers' ? "Super User" : "Gebruiker";

But this guides me to same url for both views i.e. /gebruikers

I want its value to be different when the URL is /gebruikers/:id?/:naam?', below is the route definition:

            $routeProvider.when('/gebruikers/:id?/:naam?', {
            templateUrl: 'gebruikers.html',
            controller: 'gebruikersController as gebruikers',
            resolve: {
                authentication: ['fwgAuthService', function (fwgAuthService) {
                    return fwgAuthService.login();
                }]
            }
        });

        $routeProvider.when('/gebruiker/:licentieHouderId/:id?', {
            templateUrl: 'gebruiker.html',
            controller: 'gebruikerController as vm',
            resolve: {
                authentication: ['fwgAuthService', function (fwgAuthService) {
                    return fwgAuthService.login();
                }]
            }
        });

I want to change user rights as well on this URL , but only if I know how to manipulate the view based on URL, I do not want to change the template, other wise it is going to be lots of copy and paste.

Upvotes: 1

Views: 533

Answers (3)

Haris Khan
Haris Khan

Reputation: 171

I checked the url by using the following function in the controller thanks for helping out: 

vm.gebruikerToevoegenText = $routeParams.id ? "Super User" : "Gebruiker";

Upvotes: 1

Pratap A.K
Pratap A.K

Reputation: 4517

Index.html

<!doctype html>
<html ng-app="routerApp">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
    <script>

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

    routerApp.config(['$routeProvider',
                        function($routeProvider) {
                          $routeProvider.

                            when('/gebruikers/:id?/:naam?', {
                              templateUrl: 'gebruiker.html',
                              controller: 'gebruikersController'
                            }).
                            when('/gebruiker/:licentieHouderId/:id?', {
                              templateUrl: 'gebruiker.html',
                              controller: 'gebruikerController'
                            }).
                            otherwise({
                              redirectTo: '/gebruikers/:id?/:naam?'
                            });
                        }]);

    routerApp.controller('gebruikersController', ['$scope', '$rootScope', function($scope, $rootScope) {

        $scope.toevoegen = "Pratapsss";
    }]);

 routerApp.controller('gebruikerController', ['$scope', '$rootScope', function($scope, $rootScope) {

    $scope.toevoegen = "Pratap";
    }]); 


    </script>
  </head>
  <body>

  <div ng-view></div>

  </body>
</html>

gebruiker.html

<div>
<input type="button" class="blue-button pull-right" ng-value="toevoegen" ng-click="gebruikers.addGebruiker()"/>
</div>

Upvotes: 0

Daniel
Daniel

Reputation: 904

You'll have to change the template anyways. Please don't pollute the rootScope for this; you can use ng-if or ng-show/hide (as already suggested). Just add an isAuthorized() function to your controller and set a flag if the url matches a certain pattern. Moreover I would alter the controllerAs name to the same name for both path in order to make templating easier.

Upvotes: 2

Related Questions