Angular + RequireJS

Question

Angular + RequireJS

Navigation

#1 by (1 votes)

1

Below is the code structure 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 Can not read property 'controller' of undefined No RequireJS I believe the dependencies are correct! Thanks in advance! Thank you.

angularjs single-page-application route requirejs

asked by anonymous 14.01.2015 / 21:47

1 answer

View notification every day Open-ID Python Framework

score 1 · Accepted Answer

I suggest you use the angularAMD ( link ) and follow the tutorial there. Anyway, try doing the following (I did running may contain some errors):

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();
     });


});