Untitled

<html>
<head>
    <style>
        body {
            font-family: 'Arial';
        }

        p.bold {
            font-weight: bold;
        }

        p.sectionHeader {
            color: #3c5f6c;
            margin-bottom: 5px;
        }

        p.marginized {
            margin-bottom: 15px;
        }

        .section {
            padding-left: 20px;
            margin-top: 15px;
        }
    </style>
</head>
<body ng-app="myApp">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/restangular/1.4.0/restangular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-mocks.js"></script>

    <!-- companyMain.html -->
    <script type="text/ng-template" id="companyMain.html">
        <p class="bold">Company Main Template</p>
        <div ui-view="summary"></div>
        <div ui-view="locations"></div>
    </script>
    <!-- companyDetails.html -->
    <script type="text/ng-template" id="companyDetails.html">
        <div class="section">
            <p class="bold sectionHeader">Company Details</p>
            <p>{{reportData.name}}</p>
            <p>{{reportData.phone}}</p>
        </div>
    </script>
    <!-- companyLocations.html -->
    <script type="text/ng-template" id="companyLocations.html">
        <div class="section">
            <p class="bold sectionHeader">Company Locations</p>
            <div ng-repeat="location in reportData.locations">
                <p>Type: {{location.type}}</p>
                <p class="marginized">Address: {{location.address}}</p>
            </div>
        </div>
    </script>
    <div ng-controller="MyCtrl">
        <p class="bold">Hello, {{name}}!</p>
        <p><a ui-sref="home">Go home</a></p>
        <p>Load the <a ui-sref="company.landing({'id': '12345abcde67890fghij'})">company</a></p><br />
        <div ui-view="main"></div>
    </div>

    <script>
        var myApp = angular.module('myApp', ['ngMockE2E', 'ui.router', 'restangular']);

        myApp.config(['$urlRouterProvider', '$stateProvider', function config($urlRouterProvider, $stateProvider) {
            $stateProvider
                .state('company', {
                    abstract: true,
                    url: '/company',
                    data: {
                        pageTitle: 'Company'
                    },
                    views: {
                        'main': {
                            templateUrl: 'companyMain.html'
                        }
                    }
                })
                .state('company.landing', {
                    url: '/{id}',
                    views: {
                        'summary': {
                            controller: 'CompanyCtrl',
                            templateUrl: 'companyDetails.html'
                        },
                            'locations': {
                            controller: 'CompanyCtrl',
                            templateUrl: 'companyLocations.html'
                        }
                    },
                    resolve: {
                        // Retrieve a company's report, if the id is present
                        company: ['$log', '$stateParams', 'CompanySvc', function ($log, $stateParams, CompanySvc) {
                            $log.info('In company.landing:resolve and $stateParams is: ', $stateParams);

                            var id = $stateParams.id;

                            $log.info('In company.landing:resolve and id is: ', id);

                            return CompanySvc.getCompany(id).then(function (response) {
                                return response;
                            });
                        }]
                    }
                })
                .state('home', {
                    url: '/'
                });

            $urlRouterProvider.otherwise('/');
        }]);

        myApp.run(['$httpBackend', '$rootScope', function ($httpBackend, $rootScope) {

            // handle any route related errors (specifically used to check for hidden resolve errors)
            $rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error){
                console.log(error);
            });

            var company = {
                name: 'Big Time Test Co.',
                phone: '123-456-7890',
                locations: [
                    {
                        type: 'Primary',
                        address: 'New York, NY'
                    },
                    {
                        type: 'Mailing',
                        address: 'Pueblo, CO'
                    }
                ]
            };

            // Get a mock company report (/int/companies/{companyId}/report)
            $httpBackend.whenGET(/^\/int\/companies\/.+\/report/).respond(company);
        }]);

        myApp.factory('CompanySvc', ['$log', 'Restangular', function ($log, Restangular) {
            var restAngular = Restangular.withConfig(function (Configurer) {
                Configurer.setBaseUrl('/int');
            });

            // Object for working with individual Companies
            var _companySvc = restAngular.all('companies');

            // Expose our CRUD methods
            return {
                // GET a single record /int/companies/{id}/report
                getCompany: function (id) {
                    $log.info('In CompanySvc.getCompany & id is: ', id);

                    return restAngular.one('companies', id).customGET('report').then(function success(response) {
                        $log.info('Retrieved company: ', response);

                        return response;
                    }, function error(reason) {
                        $log.error('ERROR: retrieving company: ', reason);

                        return false;
                    });
                }
            };
        }]);

        myApp.controller('CompanyCtrl', ['$log', '$scope', '$state', 'company', function CompanyCtrl($log, $scope, $state, company) {
            $log.info('In CompanyCtrl & $state is: ', $state);
            $log.info('In CompanyCtrl and company data is: ', company);
            $scope.reportData = company ? company : {};
            $log.info('In CompanyCtrl and $scope.reportData is: ', $scope.reportData);
        }]);

        myApp.controller('MyCtrl', ['$scope', function MyCtrl($scope) {
            $scope.name = 'friend';
        }]);
    </script>
</body>
</html>