Angular structure

[toplisek]

I have set sample angular structure. Is this correct as script does not work. Need help for aSide.
(function ()
{

'use strict';

angular
.module('myApp',
[
'ui.bootstrap.modal',
'ngAside'
]
)
.config(appConfig)
.controller('MyCtrl', MyCtrl);

function appConfig ($scope, $aside) {
$urlRouterProvider.otherwise('home');

$stateProvider
.state('home',
{
url: '/home',
templateUrl: 'html/index.tpl.html',
controller: 'MyCtrl'
}
)
}

factory('$aside', function($modal) {
var defaults = this.defaults = {
placement: 'left'
};

var asideFactory = {
// override open method
open: function(config) {
var options = angular.extend({}, defaults, config);
// check placement is set correct
if(['left', 'right', 'bottom', 'top'].indexOf(options.placement) === -1) {
options.placement = defaults.placement;
}
var vertHoriz = ['left', 'right'].indexOf(options.placement) === -1 ? 'vertical' : 'horizontal';
// set aside classes
options.windowClass = 'ng-aside ' + vertHoriz + ' ' + options.placement + (options.windowClass ? ' ' + options.windowClass : '');
delete options.placement
return $modal.open(options);
}
};

// create $aside as extended $modal
var $aside = angular.extend({}, $modal, asideFactory);
return $aside;
});

function MyCtrl ($scope, $aside) {
$scope.openAside = function(position) {
$aside.open(
{
templateUrl: 'html/index.tpl.html',
placement: position,
backdrop: true,
controller: function($scope, $modalInstance) {
$scope.ok = function(e) {
$modalInstance.close();
e.stopPropagation();
};
$scope.cancel = function(e) {
$modalInstance.dismiss();
e.stopPropagation();
};
}
}
)
}
}

}
)();

[Fotiman]

Just formatting your code to make it more readable:

(function() {

  'use strict';

  angular
    .module('myApp', [
      'ui.bootstrap.modal',
      'ngAside'
    ])
    .config(appConfig)
    .controller('MyCtrl', MyCtrl);

  function appConfig($scope, $aside) {
    $urlRouterProvider.otherwise('home');

    $stateProvider
      .state('home', {
        url: '/home',
        templateUrl: 'html/index.tpl.html',
        controller: 'MyCtrl'
      })
  }

  factory('$aside', function($modal) {
    var defaults = this.defaults = {
      placement: 'left'
    };

    var asideFactory = {
      // override open method 
      open: function(config) {
        var options = angular.extend({}, defaults, config);
        // check placement is set correct 
        if (['left', 'right', 'bottom', 'top'].indexOf(options.placement) === -1) {
          options.placement = defaults.placement;
        }
        var vertHoriz = ['left', 'right'].indexOf(options.placement) === -1 ? 'vertical' : 'horizontal';
        // set aside classes 
        options.windowClass = 'ng-aside ' + vertHoriz + ' ' + options.placement + (options.windowClass ? ' ' + options.windowClass : '');
        delete options.placement
        return $modal.open(options);
      }
    };

    // create $aside as extended $modal 
    var $aside = angular.extend({}, $modal, asideFactory);
    return $aside;
  });

  function MyCtrl($scope, $aside) {
    $scope.openAside = function(position) {
      $aside.open({
        templateUrl: 'html/index.tpl.html',
        placement: position,
        backdrop: true,
        controller: function($scope, $modalInstance) {
          $scope.ok = function(e) {
            $modalInstance.close();
            e.stopPropagation();
          };
          $scope.cancel = function(e) {
            $modalInstance.dismiss();
            e.stopPropagation();
          };
        }
      })
    }
  }

})();

[toplisek]

It is very difficult structure (John Papa) to set optimum results (loading, code optimum, big projects).

As structure includes folder, can you please post updated code according to scotch.io.
app/
----- shared/ // acts as reusable components or partials of our site
---------- sidebar/
--------------- sidebarDirective.js
--------------- sidebarView.html
---------- article/
--------------- articleDirective.js
--------------- articleView.html
----- components/ // each component is treated as a mini Angular app
---------- home/
--------------- homeController.js
--------------- homeService.js
--------------- homeView.html
---------- blog/
--------------- blogController.js
--------------- blogService.js
--------------- blogView.html
----- app.module.js
----- app.routes.js
assets/
----- img/ // Images and icons for your app
----- css/ // All styles and style related files (SCSS or LESS files)
----- js/ // JavaScript files written for your app that are not for angular
----- libs/ // Third-party libraries such as jQuery, Moment, Underscore, etc.
index.html

What should be actually inside files as above code:
1. index.html
2. app.module.js
3. app.routes.js
4. Folder components/html or js
5. Folder shared/html or js