Angular + Requirejs

Question

Below is the structure of the code to facilitate:

main.js

require.config({
    baseUrl: '/',
    shim: {
        angular: {
            exports: "angular"
        },
        route: {
            deps: ["angular"]
        },
        app:{
            deps:['route']
        },
        controller:{
            deps:['app']
        }
    },
    paths: {
        //Libery
        angular:            'assets/js/lib/angular',
        route:              'assets/js/lib/angular-route',
        //APP
        app:                'app/app',
        //Controller
        controller:         'app/controller/controller',
    },

    deps: ['controller']
});

app js.

define('app', ['angular', 'route'], function (angular, route) {
    var app = angular.module('app',['ngRoute']);

    app.config(function($routeProvider, $locationProvider)
    {
       $locationProvider.html5Mode(true);

       $routeProvider

       .when('/', {
          templateUrl : 'app/views/home.php',
          controller  : 'home',
       })

       .when('/sobre', {
          templateUrl : 'app/views/sobre.php',
          controller  : 'sobre',
       })

       .when('/contato', {
          templateUrl : 'app/views/contato.php',
          controller  : 'contato',
       })

       .otherwise ({ redirectTo: '/' });
    });    
});

controller js.

define('controller', ['app'], function (app) {

    app.controller('home', function($rootScope, $location){
       $rootScope.activetab = $location.path();
    });

    app.controller('sobre', function($rootScope, $location){
       $rootScope.activetab = $location.path();
    });

    app.controller('contato', function($rootScope, $location){
       $rootScope.activetab = $location.path();
    }); 

});

And the problem is Cannot read Property 'controller' of Undefined At Requirejs I believe the dependencies are correct! Thank you in advance! Thank you.

Answer 1

I suggest you use angularAMD (https://github.com/marcoslin/angularAMD) and follow the tutorial contained there. Anyway, try to do as follows (I did running may contain some bugs):

main.js

require.config({
    baseUrl: '/',
    paths: {
       angular: 'assets/js/lib/angular',
       angularAMD: 'assets/js/lib/angularAMD/angularAMD.min', 
       route: 'assets/js/lib/angular-route'
    },
    shim: {
       'angular-route': ['angular'],
       'angularAMD': ['angular']
    },
    deps: ['app']
    });

app js.

define(['angularAMD','angular-route'], function (angularAMD) {
   var app = angular.module('app', ['ngRoute']);
   app.config(['$routeProvider', function ($routeProvider) {
      $routeProvider.when("/", angularAMD.route({
         templateUrl: "app/views/home.php",
         controller: 'home',
         controllerUrl: 'app/controles/controller'
      }));
      $routeProvider.when("/sobre", angularAMD.route({
         templateUrl: "app/views/sobre.php",
         controller: 'sobre',
         controllerUrl: 'app/controles/controller'
      }));
      $routeProvider.when("/contato", angularAMD.route({
         templateUrl: "app/views/contato.php",
         controller: 'contato',
         controllerUrl: 'app/controles/controller'
      }));
      $routeProvider.otherwise({ redirectTo: '/' });
   }]);
   return angularAMD.bootstrap(app);
}); 

controller

define(['angularAMD'],
  function (angularAMD) {


     angularAMD.controller('home', function ($rootScope, $location) {
        $rootScope.activetab = $location.path();
     });

     angularAMD.controller('sobre', function ($rootScope, $location) {
        $rootScope.activetab = $location.path();
     });

     angularAMD.controller('contato', function ($rootScope, $location) {
        $rootScope.activetab = $location.path();
     });


});