angulaire.js - AngularJS ne convient-il pas aux applications cartographiques ?

Question

Après avoir lu quelques exemples sur le site officiel d'AngularJS, je pense que c'est très puissant. Cela déplace l'attention du développeur des opérations DOM plein écran vers les affaires traditionnelles, en se concentrant sur les données, en liant View et en réalisant la liaison des deux. et mises à jour.

Je travaille habituellement sur des applications cartographiques, telles que la version PC de Baidu Map et Tencent Map. J'ai envisagé d'utiliser AngularJS, mais après de longues délibérations, je pense que cela ne convient pas. La raison principale est que les applications cartographiques dépendent généralement de tiers. API de carte, par exemple, basée sur Baidu Map, l'API Javascript de Baidu Map est requise. Tencent possède également sa propre API JS. Le concept général de ces API est de fournir un élément de page, puis de créer une interface de carte interactive dans cet élément.

1 Initialisation de la carte

Si on veut créer une carte à la page p#map-p, le code habituel est le suivant :

<p id="map-p"></p>

var map=new BMap.Map("map-p",{});

Cet objet cartographique contient de nombreuses méthodes, telles que l'ajout de superpositions, le dessin de carte, etc. La plupart de ces méthodes entraîneront des mises à jour de l'interface cartographique. Par exemple, le code suivant fera apparaître une fenêtre sur l'interface cartographique : <🎜. >

map.addInfoWindow();

Si nous suivons AngularJS, nous devrions déclarer une vue cartographique sur la page, similaire à celle-ci

Dans ce cas, nous devons créer un

de bd-map, ce qui signifie que nous devons établir différentes directives pour différents SDK de carte. Bien qu'il s'agisse d'un travail une fois pour toutes, ce n'est pas le cas. une grosse affaire. directive

2 Interactions cartographiques

Je pense que si cette zone est complètement encapsulée via AngularJS, cela compliquera des problèmes simples. Par exemple, j'ai demandé les données de 10 hôtels en arrière-plan

Chaque hôtel a des informations de localisation. fais ceci à sec : markers

for(var i......){
  var item=...
  var marker=new BMap.Marker(...);
  map.addOverlay(marker);
}

Mais selon le concept d'AngularJS,

devrait évidemment être les données dans un certain markers Notre activité devrait se concentrer sur l'acquisition et la mise à jour de ces données, et la mise à jour de l'interface devrait être complétée par <. 🎜>, il semble donc que j'ai encore besoin de créer la directive correspondant à scope À ce stade, j'ai déjà l'impression que c'est un peu compliqué et que c'est inutile. directive marker3 événements

La carte elle-même et les superpositions sur la carte comportent certains événements, tels que vous avez cliqué sur la carte, cliqué sur une icône, etc. Ceux-ci sont très courants dans les applications cartographiques. Si vous utilisez AngularjS, il semble que vous deviez le faire. les encapsuler.

Mon sentiment est que le SDK de carte lui-même peut être considéré comme une implémentation MVC. Par exemple, vous définissez les différents paramètres (données) de la carte, puis utilisez l'interface fournie par le SDK pour créer une interface de carte (View). ) Il est créé. En modifiant le point central de la carte et d'autres interfaces, la vue de la carte change également en conséquence. Dans ce cas, elle est similaire à Angular. Combiner de force JS semble contre-productif. Dans ce cas, je pense que Backbone est plus approprié. Après tout, la vue de Backbone est relativement flexible. Vous pouvez utiliser manuellement le DOM. appelez-le via le SDK de carte, et non étroitement couplé, aucun travail supplémentaire n'est requis.

---

Le temps pour apprendre AngularJS est relativement court, environ 1 semaine. J'ai cette idée, je me demande s'il y a quelque chose que je ne comprends pas bien ?

---

De plus, je pense que le scénario le plus approprié pour AngularJS est lorsque l'application n'a besoin que d'une combinaison d'éléments de page natifs. Par exemple, différentes vues injectent simplement des données dans différents modèles, tels que todolist, gmail, etc. éléments HTML natifs assemblés.

Answer 1

Tout d’abord, ce n’est pas facile de pouvoir réfléchir à cela en profondeur après seulement une semaine d’apprentissage d’Angular. C’est bien mieux que moi au début, je pense qu’on peut très bien utiliser Angular.

Deuxièmement, malheureusement, je n'ai pas été beaucoup exposé aux applications cartographiques, notamment parce que je ne sais pas à quel point ces SDK sont compliqués, il m'est donc difficile de dire si le passage à Angular améliorera les choses.

En guise de digression, je pense que l'API et le SDK sont différents, en particulier pour les applications Web. Les API sont généralement utilisées pour l'échange de données et n'impliquent généralement pas d'objets DOM ; vous parlez des SDK. Ils ont leur propre ensemble de logique encapsulée et fournissent généralement des appels d'interface étroitement couplés au DOM.

L'API peut être très bien gérée par Angular, et la ressource intégrée est particulièrement adaptée à l'encapsulation des services API. Cependant, le SDK lui-même est relativement complet dans son encapsulation. Dans le monde Angular, l'accent mis sur le fait de ne pas exploiter directement le DOM rend l'intégration du SDK plus compliquée et difficile. Ce phénomène existe et la solution est en effet similaire à ce que vous pensez. Utilisez des directives pour abstraire l'interaction DOM et utilisez des services pour abstraire la partie logique. Par exemple, si vous pensez à quelque chose comme Highcharts - bien qu'il ne s'agisse pas d'un SDK de carte, il s'agit d'une bibliothèque tierce similaire, complexe et bien encapsulée - son intégration avec Angular n'est pas facile et il existe de nombreux pièges, il y a donc de nombreuses personnes ont créé des modules Angular + Highcharts séparément pour les réutiliser. Vous pouvez rechercher des exemples dans ce domaine pour voir comment se déroule l'implémentation, et vous pouvez probablement estimer si elle est appropriée.

L’encapsulation d’Angular complique-t-elle des problèmes simples ? Parfois oui. Cela dépend vraiment du problème lui-même, Angular n’est pas une panacée, il ne convient pas à tous les types d’applications. Pensez-vous que Backbone peut gérer votre travail actuel ? Alors continuez à l’utiliser et ignorez la « tendance ». D'un autre côté, lorsque vous constatez vraiment qu'Angular a des éléments que Backbone ne peut pas correspondre, alors commencez de manière décisive à utiliser Angular. Quoi qu'il en soit, aucun framework n'est parfait tant que vous touchez aux problèmes qui doivent être résolus. Si vous ne les touchez pas, il n'y a pas lieu de s'inquiéter.

De plus, j'aimerais prolonger cette discussion.

Divisons grossièrement la technologie en trois parties : la technologie passée (ou technologie mature), la technologie actuelle (ou technologie populaire) et la technologie future (ou technologie qui représente des tendances) .

Il est facile pour nous de décider impulsivement d'utiliser la « technologie actuelle » pour remplacer la « technologie passée ». D'une manière générale, il y aura des coûts, mais cela ne sera certainement pas sans avantages, et s'ils sont gérés correctement, les avantages seront toujours. dépassent les coûts.

Le problème est qu'il y a toujours beaucoup de choix dans la « technologie actuelle ». Il est plus facile pour nous de tomber dans ce choix et d'être incapable de prendre une décision. Nous pouvons même avoir l'impression que ce n'est pas grave de revenir en arrière. à la technologie du passé, au moins elle est sûre.

Je ne peux pas dire ce qui est juste. J'ai répondu à cette question tellement de fois au cours de la dernière année que je suis un peu fatiguée.

J'ai tendance à choisir la « technologie actuelle » en apprenant et en comprenant la « technologie du futur » et à remplacer résolument la « technologie du passé ».

La « technologie passée » passera toujours, tôt ou tard, ce n'est qu'une question de temps. Je suis le genre de personne qui « navigue à contre-courant, si je n'avance pas, je reculerai », même si cela en coûte. est élevé.

La question de savoir si la « technologie actuelle » est cohérente avec la « technologie future » reflète réellement la compréhension et le jugement de l'auteur/de l'équipe sur les tendances technologiques, ainsi que votre compréhension et votre jugement personnels. Il y aura un peu de jeu, n'est-ce pas ? Cette confiance et cette capacité de prise de décision dépendent de vous.

Pourquoi est-ce que je parle de « technologies du futur » ? Prenons l'exemple de l'application cartographique que vous créez. Combien de temps pensez-vous que les SDK actuels peuvent être utilisés ? Pas seulement leur code lui-même, mais aussi leur pile technologique. Combien de temps le modèle de développement d’applications cartographiques orientées DOM basé sur un SDK peut-il durer ?

Si vous trouvez difficile de répondre à cette question, vous pouvez d'abord consulter l'historique de développement des leaders de l'industrie, tels que Google Maps, et deuxièmement, vous pouvez en apprendre davantage sur l'architecture technique des leaders de l'industrie.

Nous savons presque tous et pouvons nous attendre à ce que les WebComponents soient la prochaine grande nouveauté dans les applications Web. Ainsi, lorsque les WebComponents deviendront la « technologie actuelle » (ce ne sera peut-être pas long), l'ensemble actuel est basé sur le SDK et combien. Quelle est la marge de progrès et de survie du modèle de développement d'applications cartographiques orientées DOM ?

Je ne connais pas la réponse et je ne veux pas vous inculquer de « valeurs », je décris simplement comment je pense et prends des décisions. D'après votre description du problème, je pense que vous n'êtes pas seulement un programmeur. Peut-être que vous jouez également un rôle d'"architecte" dans votre équipe, je vais donc en dire plus à ce sujet. Le sens total n'est que de quatre mots : pensez loin. .

Answer 2

Je pense que la partie carte n'a rien à voir avec angulaire. Vous pouvez mettre la carte en dehors d'angular ou laisser angulaire ne pas compiler la partie carte. Mais cela ne vous empêche pas d'utiliser la carte normale (après tout, elle a été encapsulée par eux). Lorsque vous avez besoin d'angular pour la gérer, laissez-la gérer.

Bien que vous utilisiez angulaire, tous les éléments de la page ne doivent pas nécessairement être liés à angulaire. Utilisez-le simplement là où il est bon. Ne connectez pas tout à Angular juste pour utiliser Angular.

Answer 3

J'ai déjà développé Openlayers pendant un certain temps et j'ai une compréhension préliminaire d'Angularjs

Ce sont des frameworks appartenant à deux domaines différents
L'API Map se concentre sur l'affichage de G et AngularJS se concentre sur l'affichage d'IS. Il n'y a pas de conflit entre les deux. Par exemple
. Lorsque nous effectuons une requête, le serveur renvoie une série d'informations sur les éléments. Désormais, l'approche générale consiste à faciliter les éléments, à obtenir les informations, puis à rassembler le HTML via le modèle pour afficher la liste des résultats en même temps, à ajouter. ces informations sur les éléments à la couche et dessinez Accédez à la carte.

L'API cartographique nous aide à compléter le dessin des éléments géographiques, mais les données d'information doivent être contrôlées par nous-mêmes

.

Simulons un exemple d'interaction entre la souris et les éléments

function highlight(feature){
    map.control.select(feature)
}

//Pseudocode (original) ou autres modèles front-end

var i=0,l=arrs.length,str=[],$case,map;
for(;i<l;i++){
    str.push("<li>"+arrs[i].name+"</li>")
}
$case.on("mouseenter","li",function(){
    var index=$(this).index();
    var feature=arrs[index];
    highlight(feature);
})

//AngularJS

<li ng-repeat="item in arrs" ng-mouseenter="highlight(item)">{{item.name}}</li>

Bien sûr, MVC peut également être réalisé à l'aide d'autres modèles js, mais l'avantage d'utiliser AngularJS est qu'il s'agit d'une application d'une seule page, et le processus de mise en œuvre intermédiaire consiste simplement à ce que tous les chemins mènent à Rome.

Cependant, les exigences ont changé. Lors de la mise en évidence des éléments, nous pouvons mettre en évidence l'élément li actuel ou d'autres nouvelles exigences. À ce moment, nous constaterons que le point où nous modifions le code n'est pas au même endroit

La méthode originale nécessite l'ajout d'un changement de style pendant le processus de liaison d'événement

//AngularJS

<li ng-repeat="item in arrs" 
    ng-mouseenter="highlight(item);item.active=true"
    ng-mouseleave="item.active=false"
    ng-class="{'highlight':item.active}"
    >{{item.name}}</li>

Pour faire simple, la maintenance devient plus rapide et l'activité d'origine n'est pas affectée.

Answer 4

En effet, le SDK map a déjà terminé la gestion du DOM pour vous. Cette partie du travail est répétée avec ng, cela semblera donc étrange de lui imposer ng. Si le SDK cartographique lui-même est fourni en mode ng, il peut apporter une expérience de développement différente.

Answer 5

Je pensais que c'était un peu gênant au début, mais au fur et à mesure que j'ai compris Angular, c'est devenu plus facile.
Vous devez savoir que quel que soit le framework JS, les objets reçoivent des références.
Ensuite, pour le SDK, liez l'objet SDK à un service. Faites simplement attention à $apply dans le rappel

.