Формирование ссылок
 

Всем привет!

С помощью ng-click я показываю сервисы нажатой категории, при этом в адресной строке браузера id категории не пишется, так как все происходит в одном темплейте (как мне и надо). Как вручную сформировать ссылку в адресной строке, чтобы потом можно было ввести эту ссылку и браузер автоматический перейдет на нужную категорию?

<div class="category" ng-repeat="category in categories">
                <a href="javascript:void(0)" class="link_service" ng-click="showServices(category.id)">
                    {{category.name}}
                </a>
            </div>
            <div style="clear: both;"></div>
        </div>
        <div class="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="javascript:void(0);" class="a_service">
                        <b>{{service.name}}</b>
                    </a>
                    <span class="star" ng-class="{'on' : service.favorite}" ng-click="addToFavorite(service.id)"></span>
                </li>
            </ul>
        </div>

var servicesCatalog = angular.module('servicesCatalog', [
    'catalogControllers'
]);
// роутинг
servicesCatalog.config(['$routeProvider', function ($routeProvider) {
        $routeProvider.
            when('/catalog', {
                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'
            }).
            otherwise({
                redirectTo: '/catalog'
            });
}]);
 
// контроллер
catalogControllers.controller('Catalog', ['$scope', '$http', '$rootScope','$location', '$routeParams',
    function($scope, $http, $location, $routeParams, $rootScope) {
 
        $http(
            {
                method: 'POST',
                url: 'ajax/ajax.php',
                data: {action: 'showCategories'}
            }).
            success(function(data, status, headers, config) {
                console.log(data);
                $scope.categories = data;
            }).
            error(function(error, status, headers, config) {
                console.log('ERROR => ' + error);
            });
 
        $scope.showServices = function (categoryId) {
            $scope.selectedCategory = $scope.categories[categoryId];
        };
}]);

А не хочешь ли перейти на ui-router ? Там это просто. Он связывает URL'ы с "состояниями", а не темплейтами.
Соответственно, куча состояний может иметь один и тот же темплейт (или разные - на выбор) и при этом адресоваться по разному.
Другими словами: за тебя уже всё сделали, только чуток изучи и юзай... :)
Я поначалу тоже подобными вопросами парился, а потом сообразил схему в которой ng-click вообще без надобности для управления состояниями. Достаточно ui-sref (виртуальные ссылки ui-router'а). В них в качестве параметра устанавливается желаемое состояние, а соответствующий URL формируется автоматически (чего тебе как раз и надобно).
И таки да, "..потом можно ввести эту ссылку и браузер автоматический перейдет на нужную категорию.." ;)

MetaDriver,
Спасибо Большое!) Я нашел вот такую библиотечку
http://habrahabr.ru/post/190096/

MetaDriver,
а если сделать так?

$routeProvider.
            /*when('/catalog', {
                templateUrl: 'views/catalog.html',
                controller: 'Catalog'
            }).*/
            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'
            }).
            otherwise({
                redirectTo: '/catalog/:categoryId'
            });

<div class="category" ng-repeat="category in categories">
                <a href="#/catalog/{{category.id}}" class="link_service" ng-click="showServices(category.id)">
                    {{category.name}}
                </a>
            </div>

И в контроллере проверять по параметру ? Или как все же лучше?

MetaDriver,
не знаю как сделать проверку на то, что ajax запрос уже был выполнен

catalogControllers.controller('Catalog', ['$scope', '$http', '$location', '$routeParams', '$rootScope',
    function($scope, $http, $location, $routeParams, $rootScope) {
        /*if($rootScope.categoryId.length == 0)
        {
            $rootScope.categoryId = 1;
        }*/
        if()
        {

            $http(
                {
                    method: 'POST',
                    url: 'ajax/ajax.php',
                    data: {action: 'showCategories'}
                }).
                success(function(data, status, headers, config) {
                    $scope.categories = data;
                    $rootScope.ajax = true;
                }).
                error(function(error, status, headers, config) {
                    console.log('ERROR => ' + error);
                });
        }
        $scope.selectedCategory = $scope.categories[$routeParams.categoryId];
        console.log($scope.selectedCategory);

MetaDriver,
сделал вот так

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

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

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'
            }).
            otherwise({
                redirectTo: '/catalog/:categoryId'
            });
}]);


catalogControllers.controller('Catalog', ['$scope', '$http', '$location', '$routeParams', '$rootScope',
    function($scope, $http, $location, $routeParams, $rootScope) {

        /*if($routeParams.categoryId.length == 0)
        {
            $routeParams.categoryId = 0;
        }*/
        if($rootScope.ajax == false)
        {
            $http(
                {
                    method: 'POST',
                    url: 'ajax/ajax.php',
                    async: false,
                    data: {action: 'showCategories'}
                }).
                success(function(data, status, headers, config) {
                    $rootScope.categories = data;
                    $rootScope.ajax = true;
                }).
                error(function(error, status, headers, config) {
                    console.log('ERROR => ' + error);
                });
        }
        
        $scope.selectedCategory = $rootScope.categories[$routeParams.categoryId];
        /*setTimeout(function(){
            $scope.selectedCategory = $rootScope.categories[$routeParams.categoryId];
        }, 1000);*/

        $scope.showServices = function (categoryId) {
            $scope.selectedCategory = $rootScope.categories[categoryId];
        };

Но scope.selectedCategory = $rootScope.categories[$routeParams.categoryId]; происходит раньше чем обрабатывается запрос , как это исправить?

Как-то так:

function($scope, $http, $location, $routeParams, $rootScope) {

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

                    $scope.selectedCategory = $rootScope.categories[$routeParams.categoryId];
                    $scope.showServices = function (categoryId) {
                        $scope.selectedCategory = $rootScope.categories[categoryId];
                    };
                }).
                error(function(error, status, headers, config) {
                    console.log('ERROR => ' + error);
                });
        }

MetaDriver,
а почему

$scope.showServices = function (categoryId) {

 $scope.selectedCategory = $rootScope.categories[categoryId];
                    };

в запросе?

MetaDriver,

я вынес

$scope.showServices = function (categoryId) {
                        $scope.selectedCategory = $rootScope.categories[categoryId];
                    };

за пределы запроса, выводится все хорошо почти, но есть момент, что список сервисов показывается только когда второй раз нажимаешь на категорию, при первом клике не срабатывает, хотя сервисы в консоли выводятся.

Без понятия. Я особо не вникал, просто показал вариант управления последовательностью обработки.