angular-ui-router avec requirejs, le chargement paresseux de contrôleur
Pourriez-vous m'aider à comprendre comment la charge de contrôleur dans l'exemple ci-dessous avant de les afficher? On dirait que la vue est chargé seulement immédiatement, tandis que le contrôleur n'est pas encore chargé.
//app.js
$stateProvider.state('index', {
url: "/",
views: {
"topMenu": {
templateUrl: "/Home/TopMenu",
controller: function($scope, $injector) {
require(['controllers/top-menu-controller'], function(module) {
$injector.invoke(module, this, { '$scope': $scope });
});
}
}
}
});
//top-menu-controller.js
define(['app'], function (app) {
app.controller('TopMenuCtrl', ['$scope', function ($scope) {
$scope.message = "It works";
}]);
});
//Home/TopMenu
<h3>TopMenu</h3>
<div ng-controller="TopMenuCtrl">
{{message}}
</div>
- Vous pouvez prendre un coup d'oeil à angulaires-besoin-lazy pour quelques idées; il n'est pas à l'aide de angular-ui-router, pourtant, certains concepts peuvent venir dans maniable.
- J'ai ouvert un sujet sur github questions. github.com/angular-ui/ui-router/issues/1002
Vous devez vous connecter pour publier un commentaire.
Je créé de travail plunker ici.
Nous allons avoir cette index.html:
Observons la
main.js
- le RequireJS config:En fait, nous avons seulement créer des alias (chemin d'accès) pour notre
ControllerNames
- et leurController_Scripts.js
fichiers. C'est tout. Aussi, nous revenons à exiger de l'application, mais nous allons dans notre cas, l'utilisation d'entités différentes plus tard - pour vous inscrire paresseusement chargé des contrôleurs.ce qui ne l'
deps: ['app']
veux dire? Tout d'abord, nous devons fournir le fichier app.js (le 'app' signifie trouverapp.js
) :cette valeur retournée est le cas, on peut se demander dans chaque async fichier chargé
Comment allons-nous contrôleurs de charge paresseusement? Comme il a déjà prouvé ici pour
ngRoute
angularAMD v0.2.1
Nous demanderons angulaire pour une référence à
$controllerProvider
- et l'utiliser plus tard, pour vous inscrire contrôleurs.C'est la première partie de notre script.js:
Comme nous pouvons le voir, nous venons de créer l'application " app " et a également créé titulaire
app_cached_providers
(à la suite de la angularAMD style). Dans la config de la phase, nous demandons angulaire pour$controllerProvider
et de garder des références pour elle.Maintenant, nous allons continuer dans script.js:
Cette partie ci-dessus montre deux états de la déclaration. L'un d'eux -
'home'
de série aucun paresseux. C'est le contrôleur qui est implicite, mais la norme peut être utilisée.Le deuxième état est nommé
"other"
qui ne cible sans nom vueui-view=""
. Et ici on peut tout d'abord voir, le lazy load. À l'intérieur de la résoudre (voir:)Résoudre
Avec qui dans notre suite, nous le savons, que le contrôleur (par son nom) sera recherché dans angulaire du référentiel une fois que la volonté est terminée:
Bon, maintenant, comme mentionné ci-dessus, le principal contient cet alias def
Et que cela signifie que le fichier "Controller_Other.js" seront recherchés et chargé. C'est son contenu qui ne le magie. Le plus important ici est l'utilisation d'précédemment mis en cache référence à
$controllerProvider
l'astuce est de ne pas utiliser
app.controller()
mais$controllerProvider.S'inscrire
Enfin, il y a une autre définition de l'état, avec plus rétréci résoudre... d'essayer de le rendre plus lisible:
Ci-dessus, nous pouvons voir que nous avons à résoudre deux contrôleurs pour les deux/tous les noms de vues de cet état
Que c'est. Chaque contrôleur est défini ici
sera chargé via résoudre et
$controllerProvider
- via RequireJS - paresseusement. Vérifier que tous les iciSimilaire Q & A: AngularAMD + ui-router + dynamique du contrôleur nom?
Sur un projet, j'ai utilisé le chargement différé des contrôleurs et avait manuellement appel à un $digest sur la portée d'avoir de travail. Je suppose que ce comportement ne change pas avec l'interface utilisateur du routeur.
Avez-vous essayer ?