1. Que fait-il?
Le service de localisation $ analyse l'URL dans la barre d'adresse du navigateur (basé sur Window.Location), nous permettant d'utiliser l'URL plus commodément dans l'application. La modification de l'URL dans la barre d'adresse répondra au service de localisation $ et la modification de l'URL dans l'emplacement $ répondra à la barre d'adresse.
$ Service de localisation:
Exposez l'URL de la barre d'adresse actuelle du navigateur, afin que nous puissions
1. Faites attention et observez les URL
2. Changer URL
Lorsque l'utilisateur fait ce qui suit, synchronisez l'URL avec le navigateur:
1. Modifiez la barre d'adresse
2. Cliquez sur le bouton arrière ou transférer (ou cliquez sur un lien historique).
3. Cliquez sur un lien
Une méthode qui décrit un objet URL comme une série de méthodes (protocole, hôte, chemin, recherche, hash).
1. Comparez $ emplacement et fenêtre.
1) Objectif: Les services de localisation de Window.Location et $ permettent de lire et d'écrire un accès à l'emplacement du navigateur actuel.
2) API: Window.Location expose un objet non transformé avec certaines propriétés qui peuvent être directement modifiées; tandis que $ Location Service expose certaines méthodes Getter / setter de style jQuery.
3) Intégration avec le cycle de déclaration des applications angulaires: $ localisation connaît toutes les étapes du cycle de déclaration interne et s'intègre à $ watch, etc.; tandis que la fenêtre.Location ne fonctionne pas.
4) Se combiner de manière transparente avec l'API HTML5: avec un repli pour les navigateurs hérités, y a-t-il des méthodes de compatibilité pour les versions inférieures des navigateurs?); tandis que la fenêtre, la location ne le fait pas.
5) Connaître le répertoire racine ou le contexte du document chargé par l'application: Window.Location ne fonctionne pas, et wnidow.location.path renvoie "/ docroot / subpath"; et $ location.path () renvoie le vrai docroot.
2. Quand dois-je utiliser $ emplacement?
Dans une application, chaque fois que vous devez répondre aux modifications à l'URL actuelle, ou souhaitez modifier l'URL du navigateur actuel.
3. Qu'est-ce que ça ne fait pas?
Lorsque l'URL du navigateur change, la page ne sera pas rechargée. Si vous devez le faire (modifiez l'adresse et implémentez le rechargement de la page), utilisez une API de niveau inférieur, $ window.location.href.
2. Aperçu général de l'API (aperçu global de l'API)
Le service de localisation $ peut se comporter différemment en fonction de la configuration lorsqu'il est initialisé. La configuration par défaut convient à la plupart des applications et d'autres configurations sont personnalisées, ce qui peut permettre de nouvelles fonctionnalités.
Lorsque le service de localisation $ est initialisé, nous pouvons l'utiliser dans JQuery Style Getter et Setter Methods, nous permettant d'obtenir ou de modifier l'URL du navigateur actuel.
1. $ Configuration du service de localisation
Pour configurer le service de localisation $, vous devez obtenir $ locationprovider (http://code.angularjs.org/1.0.2/docs/api/ng.$LocationProvider) et définir les paramètres suivants:
HTML5MODE (MODE): {Boolean}, True - Voir Mode HTML5; FAUX - Voir le mode Hashbang, par défaut: FAUX. (Les chapitres suivants expliqueront divers modes)
hashprefix (préfixe): {String}, le préfixe utilisé par Hashbang (lorsque HTML5Mode est faux, utilisez le mode hashbang en fonction des navigateurs qui ne prennent pas en charge le mode html5), par défaut: '!'
2. Méthodes Getter et Setter
Le service de localisation $ fournit des méthodes Getter pour les pièces URL en lecture seule (Absurl, protocole, hôte, port), et fournit également des méthodes Getter et Setter pour l'URL, le chemin, la recherche et le hachage.
// obtient le chemin actuel $ emplacement.path (); // modifie le chemin $ location.path ('/ newValue')Toutes les méthodes de setter renvoient le même objet de localisation $ pour implémenter une syntaxe chaînée. Par exemple, modifiez plusieurs attributs en une phrase, la méthode du secteur enchaîné est similaire:
$ location.path ('/ newValue'). Search ({key: value});
Il existe une méthode de remplacement spéciale qui peut être utilisée pour dire au service de localisation $ pour utiliser un chemin au lieu de créer un nouvel historique lorsqu'il est synchronisé avec le navigateur la prochaine fois que vous serez synchronisé avec le navigateur. La méthode de remplacement est utile lorsque nous voulons implémenter la redirection mais que nous ne voulons pas invalider le bouton arrière (le bouton arrière est de retour et récupérer la redirection). Si vous souhaitez modifier l'URL actuelle sans créer un nouvel historique, nous pouvons le faire:
$ location.path ('/ somenewpath'). Remplace ();
Notez que la méthode du secteur ne mettra pas à jour la fenêtre.Lecocation immédiatement. Au lieu de cela, le service de localisation $ connaîtra le cycle de vie de la portée et fusionnera les changements de l'emplacement de $ multiple en un, et le soumettra à l'objet Window.Location dans l'étape $ digest de la portée. Étant donné que les modifications dans plusieurs états de l'emplacement $ seront fusionnées en un seul changement, dans le navigateur, la méthode Remplace () n'est appelée qu'une seule fois, de sorte que l'ensemble de la commission n'a qu'un seul remplacement (), ce qui ne fera pas créer un historique supplémentaire du navigateur. Une fois le navigateur mis à jour, le service de localisation $ réinitialisera le bit de l'indicateur via la méthode Remplace (), et les modifications futures créeront un nouvel historique à moins que Remplace () ne soit à nouveau appelé.
Codage de setter et de caractère
Nous pouvons transmettre des caractères spéciaux dans le service de localisation $, et le service les codera automatiquement selon la norme RFC3986. Lorsque nous accédons à ces méthodes:
3. Modes Hashbang et HTML5
Le service de localisation $ dispose de deux modes de configuration qui peuvent contrôler le format URL de la barre d'adresse du navigateur: mode Hashbang (par défaut) et HTML5 basé sur l'utilisation de l'API d'historique HTML5. Dans les deux modes, l'application utilise la même API. Le service de localisation $ collaborera avec l'extrait URL et l'API du navigateur correct pour nous aider à effectuer des changements d'URL du navigateur et une gestion de l'historique.
1. Mode Hashbang (mode par défaut)
Dans ce mode, $ emplacement utilise l'URL Hashbang dans tous les navigateurs. Consultez l'extrait de code suivant pour en savoir plus:
it ('devrait afficher l'exemple', inject (function ($ locationprovider) {$ localisationprovider.html5mode = false; $ localisationprovider.hashprefix = '!';}, fonction ($ localisation) {// ouvert http://host.com/base/index.html#!/a $ localisation.absurl () == 'http://host.com/base/index.html#!/a'; $ emplacement.path () == '/ a'; objet vide $ localisation.search (a: 'b', c: true}); $ localisation.absurl () == 'http://host.com/base/index.html#!/new?x=y';}));Ramper votre application (permet à Google d'indexer notre application)
Si nous voulons que notre application Ajax soit indexée, nous devons ajouter une balise de méta spéciale à la tête:
<meta name = "fragment" contenu = "!" />
Cela permettra au robot Crawler de demander le lien actuel à l'aide du paramètre _escaped_fragment_, faites connaître à notre serveur le robot du robot et fournissez l'instantané HTML correspondant. Pour plus d'informations sur cette technologie, veuillez visiter https://developers.google.com/webmasters/ajax-crawling/docs/specification?hl=en-cn
4. Mode HTML5
En mode HTML5, les Getters et les setters du service de localisation $ interagissent avec l'URL du navigateur via l'API History History HTML5, permettant l'utilisation de modules de chemin réguliers et de recherche pour remplacer le mode Hashbang. Si certains navigateurs ne prennent pas en charge l'API d'historique HTML5, le service de localisation $ reviendra automatiquement au mode à l'aide de l'URL Hashbang. Pour nous permettre de nous débarrasser des préoccupations qu'il n'est pas clair si le navigateur qui montre que notre application prend en charge l'API de l'historique, l'utilisation du service de localisation $ est le bon et le meilleur choix.
L'ouverture d'une URL ordinaire dans un navigateur plus ancien se convertira en hashbangurl.
L'ouverture d'une URL de hashbang dans un navigateur moderne sera réécrit à une URL régulière.
1. Compatibilité vers l'avant avec les navigateurs plus anciens
Pour les navigateurs qui prennent en charge l'API de l'historique HTML5, $ emplacement revient sur le chemin d'écriture et la recherche. Si le navigateur ne prend pas en charge l'API de l'historique, $ l'emplacement sera converti pour fournir une URL Hashbang. Ceci est automatiquement converti par le service de localisation $.
2. Réécriture du lien HTML
Lorsque nous utilisons le mode API de l'historique, nous avons besoin de liens différents pour différents navigateurs, mais nous avons seulement besoin de fournir une URL régulière, par exemple <a href = "/ some? Foo = bar"> lien </a>
Lorsque l'utilisateur clique sur cet hyperlien:
Dans l'ancien navigateur, l'URL sera changée en /Index.html#!/some?foo=bar
Dans les navigateurs modernes, l'URL sera changée en / certains? Foo = bar
Dans le cas suivant, le lien ne sera pas réécrit, mais fera charger la page dans l'URL correspondante:
Hyperlien contenant la cible: <a href = "/ ext / link? A = b" Target = "_ self"> lien </a>
Lien absolu vers différents domaines: <a href = "http://angularjs.org/"> lien </a>
Après avoir réglé le chemin de base, utilisez le lien en commençant par "/" vers les hyperliens de différents chemins de base: <a href = "/ not-my-bask / link"> link </a>
3. Côté serveur
En utilisant cette méthode, en demandant une redirection URL sur le serveur, nous devons généralement rediriger tous nos liens vers notre application. (par exemple, index.html).
4. Radrer votre application
Identique qu'avant
5. Liens relatifs
Assurez-vous de vérifier tous les liens relatifs, les images, les scripts, etc. Nous devons spécifier l'URL de base (<base href = "/ my-bask">) dans <Aad> Utilisation de l'URL absolue (en commençant par /) partout. Car l'URL relative sera convertie en une URL absolue basée sur le chemin initial du document (généralement différent de la racine de l'application). (Les URL relatives seront résolues aux URL absolues en utilisant l'URL absolue initiale du document, qui est souvent différente de la racine de l'application).
Nous sommes très encouragés à exécuter des applications angulaires qui permettent à l'API de l'historique dans la racine du document, car cela prend bien en compte les problèmes de liaison relative.
6. Envoi de liens entre les différents navigateurs
(Cela explique que les adresses des deux modes peuvent être adaptées à différents navigateurs, automatiquement convertis et répétés à nouveau ...)
7. Exemple
Dans cet exemple, vous pouvez voir deux instances de localisation $, qui sont toutes deux du mode HTML5, mais sur différents navigateurs, nous pouvons donc voir les différences entre les deux. Ces services de localisation $ sont connectés à deux faux "navigateurs". Chaque entrée représente la barre d'adresse du navigateur.
Notez que lorsque nous entrons l'adresse Hashbang au premier "navigateur" (ou le second?), Il ne réécrira pas ou ne redirigera pas une autre URL, et ce processus de conversion ne se produira que lorsque la page se rechargera.
<! Doctype html> <html ng-app> <éad> <base href = "" /> <meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <itle> faux "browser </ title> <meta contenu =" ie = edge, chrome = 1 " http-equiv = "x-ua-compatible"> <style type = "text / css"> .ng-coak {affiche: aucun; } </ style> </ head> <body> <div ng-non-lindable> <div id = "html5-mode" ng-controller = "html5cntl"> <h4> Browser avec historique api </h4> <div ng-address-bar Browser = "html5"> </v> <br> <br> $ emplacement. {{$ emplacement.protoCol ()}} <br> $ localisation.host () = {{$ location.host ()}} <br> $ location.port () = {{$ location.port ()}} <br> $ localisation.path () = {{$ localisation.path ()} <br> $ localisation.Search () =) {{$ emplacement.search ()}} <br> $ location.hash () = {{$ location.hash ()}} <br> <a href = "http://www.host.com/base/first?a=b"> / base / premier? A = B </a> | <a href = "http://www.host.com/base/sec/ond?flag#hash"> sec / ond? Flag # hash </a> | <a href = "/ autre-base / une autre? Recherche"> externe </a> </div> <div id = "hashbang-mode" ng-controller = "hashbangcntl"> <h4> Browser sans historique api </h4> <div ng-address-bar. {{$ emplacement.protoCol ()}} <br> $ localisation.host () = {{$ location.host ()}} <br> $ location.port () = {{$ location.port ()}} <br> $ localisation.path () = {{$ localisation.path ()} <br> $ localisation.Search () =) {{$ emplacement.search ()}} <br> $ location.hash () = {{$ location.hash ()}} <br> <a href = "http://www.host.com/base/first?a=b"> / base / premier? A = B </a> | <a href = "http://www.host.com/base/sec/ond?flag#hash"> sec / ond? Flag # hash </a> | <a href = "/ autre-base / une autre? Recherche"> externe </a> </div> </div> <script src = "../ angular.js" type = "text / javascript"> </ script> <script type = "text / javascript"> function FALCEBROWSER (initUrl, basehref) {this.onurlchange = function (fn) {this.urlchuef) {this.onurlchange = function (fn) " }; this.url = function () {return initUrl; }; this.defer = function (fn, delay) {setTimeout (function () {fn ();}, delay || 0); }; this.baseHref = function () {return BaseHref; }; this.NotifywhenoutSindandingRequests = angular.noop; } var Browsers = {html5: new FakeBrowser ('http://www.host.com/base/path?a=b#h', '/base/index.html'), hashbang: new Fakebrowser ('http://www.host.com/base/index. '/base/index.html')}; fonction html5cntl ($ scope, $ emplacement) {$ scope. $ location = $ localisation; } fonction hashbangcntl ($ scope, $ emplacement) {$ scope. $ location = $ localisation; } fonction initinv (name) {var root = angular.element (document.getElementById (name + '-Mode')); angular.bootstrap (root, [function ($ compileprovider, $ locationprovider, $ fournis) {debugger; $ locationprovider.html5mode (true) .hashPrefix ('!'); $ fournis.value ('$ Browser', Browsers [name]); $ fournisse.valie ('$ document', root); $ fournisse. {History: nom == 'html5'}); $ compileprovider.directive ('ngaddressbar', function () {return function (scope, elm, attrs) {var Browser = Browsers [Att.Browser] KeyUp Keydown ', fonction () {! };});}]); root.bind ('click', fonction (e) {e.stoppropagation ();}); } initinv ('html5'); IniTENV ('hashbang'); </cript> </body> </html>V. Instructions supplémentaires
1. Page Reload Navigation
Le service de localisation $ nous permet uniquement de modifier l'URL; Cela ne nous permet pas de recharger la page. Lorsque nous devons modifier l'URL et recharger la page ou sauter vers d'autres pages, nous devons utiliser le point de bas niveau pour obtenir l'API, $ window.location.href.
2. Utilisation de $ Emplacement en dehors du cycle de vie de la portée
$ Location connaît le cycle de vie de la portée d'Angular. Lorsque l'URL du navigateur change, il met à jour $ l'emplacement et les appels $ s'appliquent, de sorte que $ watcher et $ observer sont informés. Lorsque nous modifions l'emplacement de $ dans l'étape $ digest, il n'y aura pas de problème; $ Location propagera cette modification au navigateur et informera tous les $ Watcher et $ Observer. Lorsque nous devons modifier $ l'emplacement en dehors d'Angular (par exemple dans les événements DOM ou dans les tests), nous devons appeler $ pour propager ce changement.
3. $ Location.path () et! ou / préfixes
Le chemin peut être démarré directement avec "/"; Le secteur $ emplacement.path () sera automatiquement rempli lorsque la valeur ne commencera pas par "/".
Notez le "!" Le préfixe, en mode hashbang, n'appartient pas à une partie de $ localisation.path (). C'est juste un hashprefix.
6. Tester avec le service de localisation $
Lorsque vous utilisez le service de localisation $ dans le test, il est en dehors du cycle de vie de la portée angulaire. Cela signifie que nous devons être responsables d'appeler Scope.Apply ().
décrire ('ServiceunterTest', function () {beforeEach (module (function ($ fournis) {$ fournit.factory ('ServiceUnderTest', fonction ($ localisation) {// quoi qu'il fasse ...});}); it ('devrait ...', inject (fonction ($ localisation, $ rootscope, service. quoi que le service doit faire ...}));});7. Migration des versions antérieures AngularJS
Au début de l'angulaire, l'emplacement $ a utilisé Hashpath ou HashSearch pour traiter les méthodes de chemin et de recherche. Dans cette version, si nécessaire, le service de localisation $ traite les méthodes de chemin et de recherche, puis utilise les informations obtenues pour former une URL de hashbang (par exemple, http://server.com/#!/path?search=a).
8. Location bidirectionnelle à $ Emplacement
Le compilateur angulaire ne prend actuellement pas en charge la liaison bidirectionnelle des méthodes (https://github.com/angular/angular.js/issues/404). Si nous souhaitons implémenter une liaison bidirectionnelle à l'objet de localisation $ (en utilisant la directive NGMODEL dans l'entrée), nous devons spécifier une propriété de modèle supplémentaire (par exemple: locationPath), et ajouter deux montres $ pour écouter les mises à jour de localisation $ dans les deux sens, par exemple:
<input type = "text" ng-model = "locationpath" />
// js - contrôleur $ scope. $ watch ('locationpath', fonction (path) {$ location.path (path);); $ scope. $ watch ('$ location.path ()', function (path) {scope.locationpath = path;});Ce qui précède est les informations sur AngularJS en utilisant $ emplacement. Nous continuerons d'ajouter des informations pertinentes à l'avenir. Merci pour votre soutien à ce site!