Angular JS App Skeleton

app.js

'use strict';

/* ----------------------------------------------------------------
App Definition
-----------------------------------------------------------------*/

var webApp = angular.module('webApp', [
  'ngRoute',
  'webAppAnimations',
  'webAppControllers',
  'webAppFilters',
  'webAppServices',
  'webAppDirectives',
]);

/* ----------------------------------------------------------------
App Config
-----------------------------------------------------------------*/

webApp.config(['$locationProvider', '$routeProvider', '$disqusProvider',
    function($locationProvider, $routeProvider, $disqusProvider){
        
        //http://stackoverflow.com/questions/16677528/location-switching-between-html5-and-hashbang-mode-link-rewriting
        //$locationProvider.html5Mode({enabled: true, requireBase: false}).hashPrefix('!');
        $locationProvider.html5Mode(false).hashPrefix('!');
        
        $disqusProvider.setShortname('mtbfeeds'); // Configure the disqus shortname

        $routeProvider.
        when('/', {
            templateUrl: '/',
            controller: 'webAppListCtrl'
        })
        .otherwise({
            redirectTo: '/'
        });
  }]);
  
webApp.run([
'$rootScope', function ($rootScope) {
    $rootScope.somevar = '1461363630752862'; // set your facebook app id here
    }
]);

/* ----------------------------------------------------------------
App Annimations
-----------------------------------------------------------------*/

var webAppAnimations = angular.module('webAppAnimations', ['ngAnimate']);

webAppAnimations.animation('.phone', function() {

  var animateUp = function(element, className, done) {
    if(className != 'active') {
      return;
    }
    element.css({
      position: 'absolute',
      top: 500,
      left: 0,
      display: 'block'
    });

    jQuery(element).animate({
      top: 0
    }, done);

    return function(cancel) {
      if(cancel) {
        element.stop();
      }
    };
  }

  var animateDown = function(element, className, done) {
    if(className != 'active') {
      return;
    }
    element.css({
      position: 'absolute',
      left: 0,
      top: 0
    });

    jQuery(element).animate({
      top: -500
    }, done);

    return function(cancel) {
      if(cancel) {
        element.stop();
      }
    };
  }

  return {
    addClass: animateUp,
    removeClass: animateDown
  };
});

/* ----------------------------------------------------------------
App Controllers
-----------------------------------------------------------------*/

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

webAppControllers.controller('webAppListCtrl', ['$scope', 'Feeds',
    function($scope, Feeds, sharedProperties, $routeParams, $location) {  
}]);

/* ----------------------------------------------------------------
App Filters
-----------------------------------------------------------------*/
 
angular.module('webAppFilters', [])

.filter('unsafe', function($sce) {
    return function(val) {
        return $sce.trustAsHtml(val);
    };
})

/* ----------------------------------------------------------------
App Service
-----------------------------------------------------------------*/

var webAppServices = angular.module('webAppServices', ['ngResource']);

webAppServices.factory('Feeds', ['$resource',
    function($resource){
        return $resource('/some/url/', {}, {
            query: {method:'GET', params:{}, isArray:true}
        });
}]);

/* ----------------------------------------------------------------
App Directives
-----------------------------------------------------------------*/

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

webAppDirectives.directive("scroll",  ['$window', 'sharedProperties',
    function($window, sharedProperties) {
        
        return function(scope, element, attrs) {
        angular.element($window).bind("scroll", function() {
            
            if( sharedProperties.get('canScroll') === true){
                var pos = this.pageYOffset;
                sharedProperties.set('windowScroll', pos);
                scope.$apply();
            }
            
        });
    };
}]);

To use:

Get dependencies via bower:

• bower install angular
• bower install angular-route
• bower install angular-animate
• bower install angular-resource

Split the App parts into separate files and load

$this->context->controller->addJS($this->_path.'/views/js/app/appAnimations.js');
$this->context->controller->addJS($this->_path.'/views/js/app/appControllers.js');
$this->context->controller->addJS($this->_path.'/views/js/app/appDirectives.js'); 
$this->context->controller->addJS($this->_path.'/views/js/app/appFilters.js');
$this->context->controller->addJS($this->_path.'/views/js/app/appServices.js');

With Prestashop files can be loaded via header hook:

public function hookHeader()
{
  //add the angular files (before front.js).
  $this->context->controller->addJS($this->_path.'/bower_components/angular/angular.js');
  $this->context->controller->addJS($this->_path.'/bower_components/angular-animate/angular-animate.js');
  $this->context->controller->addJS($this->_path.'/bower_components/angular-route/angular-route.js');
  $this->context->controller->addJS($this->_path.'/bower_components/angular-resource/angular-resource.js');

  //add the app files
  $this->context->controller->addJS($this->_path.'/views/js/app/appAnimations.js');
  $this->context->controller->addJS($this->_path.'/views/js/app/appControllers.js');
  $this->context->controller->addJS($this->_path.'/views/js/app/appDirectives.js');
  $this->context->controller->addJS($this->_path.'/views/js/app/appFilters.js');
  $this->context->controller->addJS($this->_path.'/views/js/app/appServices.js');

  //load the front js files.
  $this->context->controller->addJS($this->_path.'/views/js/front.js');
  $this->context->controller->addCSS($this->_path.'/views/css/front.css');
}

Without ng-app=""

Modify the app definition

/* ----------------------------------------------------------------
App Definition
-----------------------------------------------------------------*/

var webApp = angular.module('webApp', [
  'ngRoute',
  'webAppAnimations',
  'webAppControllers',
  'webAppFilters',
  'webAppServices',
  'webAppDirectives',
]);

angular.bootstrap(document.getElementById("html"), ["webApp"])