Controller does not load Angular + Requirejs

Asked

Viewed 377 times

1

I am developing an architecture to work with Angular in a large application with MVC Aspnet, in this application will not be the Angular that will treat the routes, but rather the Aspnet, so in this architecture I will not have Angular Routes.

All pages have their own entrypoint Ex: group.entrypoint.js, which is this code snippet:

//Load common code that includes config, then load the app logic.
'use strict';

(function () {
    require(['./entrypoint'], function () {

        //Group Controller
        require(['./controllers/group.controller']);
    });
})();   

Which goes to this global application entrypoint (entrypoint.js):

//Global EntryPoint

var paths = {
    global:      './',
    angular:     './assets/vendor/angular/' 
};

require.config({
    name: 'App EntryPoint',
    baseUrl: '',
    paths: {
        'config':           paths.global + 'config/config',
        'angular':          paths.angular + 'angular.min', 
        'angular-route':    paths.angular + 'angular-ui-router.min',
        'angular-sanitize': paths.angular + 'angular-sanitize.min'              
    },
    shim: {     
        'angular-route': {
            deps: ['angular'],
            exports: 'angular'
        },
        'angular-sanitize': {
            deps: ['angular'],
            exports: 'angular'
        },      
        angular: {
            exports : 'angular'
        }
    },
    deps: ['config']
});

Then I have this config (config.js):

'use strict';

define(['angular', 'angular-route', 'angular-sanitize'], function (angular, route, sanitize) {

    var app = angular.module('app', ['route', 'sanitize']);

    // Bootstrap Application
    angular.bootstrap(app);

    return app; 
});

Well, and in my controller I have this code snippet, the idea I want is to give a require in the Factory or Service when I need and use inside the controller:

'use strict';

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

    (function () {

        //Global Services
        var service = require(['./services/services']);

        //Group Factory
        var factory = require(['./factories/group.factory']);               

        app.controller('groupController', groupController);

        groupController.$inject = ['$scope', 'service', 'factory'];

        function groupController($scope, service, factory) {
            $scope.name = 'foo';
        }

        return groupController;

    })();   
});

Well what happens is that nothing happens, it goes through the script of the group controller, but does nothing, for example on the screen I have ng-controller="groupController as group" on the tag body, but it doesn’t give the "bind" of what’s in the controller, so I’d like to know what’s actually wrong ? Or, if this way I’m doing is not the right one either ?

Someone’s been through something similar ?

  • I have a similar problem using Angularjs with Requirejs, my problem is that as vezes the controller loads and sometimes waits to be loaded. Take a look at my github-Angularjs-requirejs

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.