//Other html codes and scripts here layout.html
<div ui-view>

</div>

var myApp = angular.module('myApp', ['ui.router', 'angular-loading-bar', 'ngAnimate', 'ngFlash', 'angularSpinner', 'oitozero.ngSweetAlert'])
    .config(function (cfpLoadingBarProvider) {
        cfpLoadingBarProvider.includeSpinner = true;
    })

myApp.directive('fileModel', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var model = $parse(attrs.fileModel);
            var modelSetter = model.assign;

            element.bind('change', function () {
                scope.$apply(function () {
                    modelSetter(scope, element[0].files[0]);
                });
            });
        }
    };
}]);

// myapp.config(['usSpinnerConfigProvider', function (usSpinnerConfigProvider) {
//     usSpinnerConfigProvider.setDefaults({color: 'blue'});
// }]);

myApp.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', 'FlashProvider', 'usSpinnerConfigProvider', function ($stateProvider, $urlRouterProvider, $locationProvider, FlashProvider, usSpinnerConfigProvider) {
    // $locationProvider.hashPrefix('');
    usSpinnerConfigProvider.setTheme('bigBlue', {color: 'green', radius: 20});
    usSpinnerConfigProvider.setTheme('smallRed', {color: 'red', radius: 6});
    FlashProvider.setTemplate(`
    <div class="my-flash">{{ flash.text }}</div>
`);

    $locationProvider.html5Mode(true);
    $stateProvider

        //route for the homepage
        .state('index', {
            url: '/',
            data: {
                pageTitle: 'Homepage'
            },
            templateUrl: '../views/index.html',
            controller: 'mainController'
        })

        .state('product', {
            url: '/product',
            data: {
                pageTitle: 'Product'
            },
            templateUrl: '../views/product.html',
            controller: 'mainController'
        })

//other state codes fall here