En apprenant à utiliser Angular, UI-Route est l'une des difficultés. Il n'y a aucun problème avec une utilisation simple, mais en ce qui concerne la nidification à plusieurs niveaux, je me sens confus. J'ai recherché beaucoup d'informations et j'ai marché sur de nombreux pièges. Jusqu'à présent, je ne peux pas dire que j'ai une compréhension complète de l'UI-Route; Ici, j'enregistre juste les quelques fosses que j'ai remplies.
1. Utilisation du résumé:
$ StateProvider .State ('shop', {Resolve: {"shoplist": function ($ http) {return $ http ({url: "/ bookApp / data / shoplist.php", méthode: "get"})}}, abstract: traine, url: "/ shop", templateurl: "templates / shop / list.html", Contrôleur: "ShopListController"})À quoi sert l'utilisation de l'attribut abstrait? Description officielle: Résumé: Vrai indique que cet état ne peut pas être activé explicitement et ne peut être activé que par implicitement par le sous-État. Si vous ne pouvez pas activer explicitement, vous ne pouvez pas accéder à cette voie d'état directement via "/ shop". N'est-ce pas une impasse? Quel est l'intérêt de faire ça? Attendez, jetons un coup d'œil à la phrase suivante: il peut être caché dans l'état de la courtepointe, et il semble que cela puisse toujours être vivant. Comment peut-il le faire vivre? Regardons le code suivant:
.State ('shop.main', {url: "/: id", Résumé: true, templateUrl: "Templates / shop / main2.html", contrôleur: "shopmainController"})État : "Shop.Main" est une sous-état de magasin. Selon la théorie, Shop.Main peut activer la boutique. Nous n'avons qu'à accéder: / shop / 1, afin que nous puissions activer l'État de la boutique et "shop.main"
Ne soyons pas pressés. J'ajouterai un attribut abstrait pour jouer avec des choses passionnantes. Regardons le code suivant au niveau suivant:
.State ('shop.main.info', {url: "", templateUrl: "Templates / shop / info.html", cache: 'false', contrôleur: "InfoController"}) .State ('shop.main.author', {url: "/ auteur", "<div> authoraTauthoraAraa .State ('shop.main.samebook', {url: "Samebook", modèle: "<v> SameBookSameBookSameBookSameBook </div>"})Je vois que l'état "shop.main.info" a l'URL de l'État "" ", nous n'avons donc qu'à accéder à" Shop / 1 "de cette manière tous les sous-états par défaut qui peuvent être utilisés comme" shop.main ".
À l'heure actuelle, la relation de nidification du module est: list.html imbriqué main.html, main.html info.html. Nous pouvons activer cette nidification à trois couches à travers l'URL de "Shop /: ID".
2. Utilisation des paramètres dans le contrôleur:
Il n'y a aucune difficulté à cela. Injeter le paramètre URL "$ stateParams" dans le contrôleur et vous pouvez l'obtenir dans cet objet:
Shop.Controller ("ShopMainController", ['$ Scope', '$ StateParams', '$ Rootscope', Fonction ($ Scope, $ StateParams, $ Rootscope); $ Scope.Good = {id: $ StateParams.ID} cfPloadingBar.Start ();}]);3. Comment empêcher le cache de modèle
Au cours du processus de développement, le cache de modèle affecte sérieusement notre débogage. Parfois, le code est modifié, mais le modèle ne change pas du tout. C'est très pénible. Nous avons juste besoin d'écouter StateChangeSuccess, puis d'effacer $ TemplateCache. Ici, nous utilisons la méthode d'exécution pour ajouter l'auditeur:
bookApp.run (['$ rootscope', '$ templatecache', function ($ rootscope, $ templateCache) {var statEchangeSuccess = $ rootscope. $ on ('$ statEchangeSuccess', statechangeSuccess); function statEchangeuccess ($ rootscope) {$ templatecache.reMoveall ($);Ce qui précède concerne cet article, j'espère qu'il sera utile à l'apprentissage de tout le monde.