How to create a link in the address bar of a browser?

Question

Angular

Hello!
For some reason, the link does not appear in the address bar when you click on the element. Here is the code.

//app
var servicesCatalog = angular.module('servicesCatalog', [
    'catalogControllers'
]);

servicesCatalog.run(function($rootScope, $http) {
    $rootScope.ajax = false;
    $rootScope.load_category = true;
});

servicesCatalog.config(['$routeProvider', function ($routeProvider) {
        $routeProvider.
            when('/catalog/:categoryId', {
                templateUrl: 'views/catalog.html',
                controller: 'Catalog'
            }).
            when('/favorites', {
                templateUrl: 'views/favorites.html',
                controller: 'Favorites'
            }).
            when('/applications', {
                templateUrl: 'views/applications.html',
                controller: 'Applications'
            }).
            when('/catalog/:categoryId/:serviceId', {
                templateUrl: 'views/service-detail.html',
                controller: 'Service-Detail'
            }).
            otherwise({
                redirectTo: '/catalog/:categoryId'
            });
}]);


// controller
var catalogControllers = angular.module('catalogControllers', [/*'ui.sortable'*/]);

catalogControllers.controller('TabController', ['$scope', '$location', '$http', '$rootScope',
    function($scope, $location, $http, $rootScope) {
        $scope.isActive = function(viewLocation)
        {
            return viewLocation === $location.path();
        };
}]);

catalogControllers.controller('Catalog', ['$scope', '$http', '$routeParams', '$rootScope',
    function($scope, $http, $routeParams, $rootScope) {
        $scope.load_services = true;

        if($rootScope.ajax == false && $rootScope.load_category == true)
        {
            $http(
                {
                    method: 'POST',
                    url: 'ajax/ajax.php',
                    data: {action: 'showCategories'}
                }).
                success(function(data, status, headers, config) {
                    console.log(data);

                    $rootScope.popular = data.shift();
                    $rootScope.categories = data;
                    $rootScope.ajax = true;

                    if($routeParams.categoryId.length != 0)
                    {
                        angular.forEach($rootScope.categories, function(value, key){
                            if(value.id == $routeParams.categoryId)
                            {
                                $scope.selectedCategory = $rootScope.categories[key];
                            }
                        });
                    }
                    else
                    {
                        $scope.selectedCategory = $rootScope.popular;
                    }

                    $rootScope.load_category = false;
                    $scope.load_services = false;
                }).
                error(function(error, status, headers, config) {
                    console.log('ERROR => ' + error);
                });
        }

        $scope.showPopular = function (event)
        {
            event.preventDefault();
            event.stopPropagation();
            $scope.selectedCategory = $rootScope.popular;
        };

        $scope.showServices = function (index, event) {
            event.preventDefault();
            event.stopPropagation();

            $scope.selectedCategory = $rootScope.categories[index];
            $scope.load_services = false;
        };
}]);

// template catalog

<div class="popular">
                <a href="#/catalog/{{popular.id}}" class="link_popular"ng-click="showPopular($event)">
                    <span class="img_popular"></span>
                    <span class="name_popular">{{popular.name}}</span>
                </a>
            </div>
            <div class="category" ng-repeat="category in categories">
                <a href="#/catalog/{{category.id}}" class="link_service" ng-click="showServices(category.id, $index, $event)">
                    {{category.name}}
                </a>
            </div>
            <div style="clear: both;"></div>
        </div>
        <div class="ajax_loading" ng-show="load_services" style="">
        </div>
        <div class="services" ng-hide="load_services">
            <div class="category_name">
                {{selectedCategory.name}}
                <i class="sort_category icon-th-list" ng-click="sortServices()" title="Сортировка сервисов"></i>
                <i class="edit_category icon-pencil" ng-click="editCategory(selectedCategory.id)" title="Редактирование категории"></i>
            </div>
            <ul class="service_list" id="serviceList">
                <li class="li_service" ng-repeat="service in selectedCategory.services">
                    <a href="#/catalog/{{selectedCategory.id}}/{{service.id}}" class="a_service">
                        <b>{{service.name}}</b>
                        {{$index}}
                    </a>
                    <span class="star" ng-class="{'on' : service.favorite}" ng-click="addToFavorite(service.id)"></span>
                </li>
            </ul>
        </div>

Here is the kind of array that I return in the request (php)

$idCat = 122;
            $idServ = 780;
            for($i = 0; $i <= 5; ++$i)
            {
                if(0 === $i)
                {
                    $jsonData[$i]['id'] = $idCat;
                    $jsonData[$i]['name'] = 'Популярные';
                }
                else
                {
                    $jsonData[$i]['id'] = $idCat;
                    $jsonData[$i]['name'] = 'Категория '.$idCat;
                }

                for($k = 0; $k <= 5; ++$k)
                {
                    if(0 === $i)
                    {
                        $jsonData[$i]['services'][$k] = array(
                            'id' => $idServ,
                            'name' => 'Сервис популярные под номером '.$idServ,
                            'favorite' => false,
                            'main_category' => rand(123, 128),
                        );
                    }
                    else
                    {
                        $jsonData[$i]['services'][$k] = array(
                            'id' => $idServ,
                            'name' => 'Сервис категории '.$idCat.' под номером '.$idServ,
                            'favorite' => false,
                            'main_category' => rand(123, 128),
                        );
                    }
                    ++$idServ;
                }
                ++$idCat;
            }

Answer 1

<div class="svg-wrapper">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20">
                // тут ваш график
        </svg>
<div>

.svg-wrapper {
  width: 30vw;
  height: 20vw;
  // и абсолютно позиционируете его справа внизу вашего блока title
}

upd:
or are we talking about bevels? :D
If yes, then like this: codepen.io/just-a-training/pen/KaPwgW
upd-2:
I didn’t like how it resizes, it’s probably more reliable through triangles:
codepen.io/just-a-training/pen/ WRebLE?editors=0100

Answer 2

https://habrahabr.ru/post/126207/