Question

当我转到Angular项目中的特定视图时，每个控制器代码都在加载。

我知道可以防止这种情况发生。但在以下情况下是否可能？

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');
}]);

这可以在不使用外部库的情况下完成，是否需要进行大量调整？

Answer 1

您需要在配置中使用 $ controllerProvider 。

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

然后在您的路线中解决此方法。

.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'

    });

我已经为你的CodePen加了一个。{/ p>

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

1 个答案: