我正在尝试使用angular.js,ui-router和require.js并感到非常困惑.我试着按照这个教程
http://ify.io/lazy-loading-in-angularjs/.首先,让我告诉你我的代码:
app.js =>
var app = angular.module('myApp', []);
app.config(function ($stateProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) {
$stateProvider.state('home',
{
templateUrl: 'tmpl/home-template.html',
url: '/',
controller: 'registration'
resolve: {
deps: function ($q, $rootScope) {
var deferred = $q.defer(),
dependencies = ["registration"];
require(dependencies, function () {
$rootScope.$apply(function () {
deferred.resolve();
});
})
return deferred.$promise;
}
}
}
);
app.lazy = {
controller: $controllerProvider.register,
directive: $compileProvider.directive,
filter: $filterProvider.register,
factory: $provide.factory,
service: $provide.service
};
});
现在在我的registration.js我有以下代码:
define(["app"], function (app) {
app.lazy.controller("registration" , ["$scope", function ($scope) {
// The code here never runs
$scope.message = "hello world!";
}]);
});
一切运作良好,即使是registration.js中的代码也运行.但问题是控制器功能内部的代码永远不会运行,我得到错误
错误:[ng:areq] http://errors.angularjs.org/1.2.23/ng/areq?p0=registration&p1=not一个函数,未定义
这似乎我的代码没有成功注册控制器功能.有任何想法吗?
附:在ui-router docs中,它被称为“如果这些依赖项中的任何一个是promise,它们将在实例化控制器并触发$routeChangeSuccess事件之前被解析并转换为值.”但是如果我把deferred.resolve();来自timeOut中提到的代码并在说出5秒之后运行它,我的控制器代码运行并且我的视图在解析之前呈现,Strange.
最佳答案 似乎我遇到了完全相同的问题,遵循您所做的完全相同的教程,但使用ui-router.我的解决方案是:
>确保app.controllerProvider可用于延迟控制器脚本.看起来你用app.lazy {…}做了这个,这真的很棒BTW 🙂
>确保懒惰的ctrl脚本使用define()而不是require()如果你这样做,我无法从你的代码中看出来.
这是我的ui-router设置与公共app.controllerProvider方法:
app.config(function ($stateProvider, $controllerProvider, $filterProvider, $provide, $urlRouterProvider) {
app.lazy = {
controller: $controllerProvider.register,
directive: $compileProvider.directive,
filter: $filterProvider.register,
factory: $provide.factory,
service: $provide.service
};
$urlRouterProvider.otherwise('/');
$stateProvider
.state('app', {
url:'/',
})
.state('app.view-a', {
views: {
'page@': {
templateUrl: 'view-a.tmpl.html',
controller: 'ViewACtrl',
resolve: {
deps: function ($q, $rootScope) {
var deferred = $q.defer();
var dependencies = [
'view-a.ctrl',
];
require(dependencies, function() {
$rootScope.$apply(function() {
deferred.resolve();
});
});
return deferred.promise;
}
}
}
}
});
});
然后在我的懒惰加载控制器中,我注意到我必须使用require([‘app’]),如下所示:
define(['app'], function (app) {
return app.lazy.controller('ViewACtrl', function($scope){
$scope.somethingcool = 'Cool!';
});
});
来自GitHub:https://github.com/F1LT3R/angular-lazy-load
关于Plunker的演示:http://plnkr.co/edit/XU7MIXGAnU3kd6CITWE7