可以在Angular中动态加载控制器

Question

When I go to a specific view in my Angular project, every controller code is being load.

I understand that it's possible to prevent this. But is it possible in the following situation?

App.js config:

app.config(['$stateProvider', '$urlRouterProvider', '$httpProvider',
  function($stateProvider, $urlRouterProvider, $httpProvider, $locationProvider) {
    $httpProvider.interceptors.push('AuthInterceptor');
    $stateProvider.state('home', {
      url: "/home",
      templateUrl: 'views/Home.html',
      controller: "MainController",
      onEnter: ['$state', 'auth', function($state, auth) {
        if (auth.isLoggedIn()) {
          $state.go('challenge');
        }
      }]
    }).state('login', {
      url: '/login',
      templateUrl: 'views/Login.html',
      controller: 'UserCtrl',
      onEnter: ['$state', 'auth', function($state, auth) {
        if (auth.isLoggedIn()) {
          $state.go('home');
        } else {
          //console.log("Niet ingelogd")
        }
      }]
    }).state('register', {
      url: '/register',
      templateUrl: 'views/Register.html',
      controller: 'UserCtrl',
      onEnter: ['$state', 'auth', function($state, auth) {
        if (auth.isLoggedIn()) {
          $state.go('home');
        }
      }]
    }).state('challenge', {
      url: '/challenges',
      templateUrl: 'views/Challenges.html',
      controller: 'ChallengeCtrl',
      onEnter: ['$state', 'auth', function($state, auth) {
        if (!auth.isLoggedIn()) {
          $state.go('login');
        }
      }]
    }).state('profile', {
      url: '/profile',
      templateUrl: 'views/Profile.html',
      controller: "ProfileCtrl",
      onEnter: ['$state', 'auth', function($state, auth) {
        if (!auth.isLoggedIn()) {
          $state.go('login');
        }
      }]
    }).state('policy', {
        url: '/policy',
        templateUrl: 'views/Policy.html',
        controller: 'AppCtrl'
    }).state('cookie', {
        url: '/cookie',
        templateUrl: 'views/Cookie.html',
        controller: 'AppCtrl'
    }).state('challengesdone', {
      url: '/challengesdone',
      templateUrl: 'views/Challengesdone.html',
      controller: 'ChallengesDoneCtrl',
      onEnter: ['$state', 'auth', function($state, auth) {
        if (!auth.isLoggedIn()) {
          $state.go('login');
        }
      }]
    }).state('forgot', {
        url: '/forgot',
        templateUrl: 'views/Forgot.html',
        controller: 'UserCtrl'
    }).state('reset', {
        url: '/reset?sptoken',
        templateUrl: 'views/Reset.html',
        controller: 'UserCtrl'
    });

    $urlRouterProvider.otherwise('home');
}]);

Can this be accomplished without the use of external libraries and are there alot of adjustments needed?

Answer 1

You need to use $controllerProvider in your config.

app._controller = app.controller
app.controller = function (name, constructor){
    $controllerProvider.register(name, constructor);
    return (this);
};

And then resolve this method in your route.

.state('reset', {
        url: '/reset?sptoken',
      controller: 'UserCtrl',
      resolve: {
            deps : function ($q, $rootScope) {
                var deferred = $q.defer();
                require(["js/userCtrl"], function (tt) {
                    $rootScope.$apply(function () {
                        deferred.resolve();
                    });
                    deferred.resolve()
                });
                return deferred.promise;
            }
        },
        templateUrl: 'views/Reset.html'

    });

I have put together a CodePen for your.