Fermer

avril 8, 2018

Toutes choses angulaires


Plongez dans les concepts de base d'Angular et les sujets d'actualité: laboratoires angulaires, éléments angulaires, applications Web progressives, techniciens de service, compilation AoT, bibliothèques d'interface utilisateur et plus encore.

Line__Blue 2.3 "title =" Line__Blue 2.3 "/> </span></p> <h2> Votre feuille de route pour un succès angulaire </h2> <p> Que vous utilisiez actuellement Angular ou non, si vous faites du développement frontend de nos jours, vous avez sans doute entendu parler de ce framework. est une bibliothèque open-source basée sur le typage pour le développement d'applications web.L'écosystème angulaire est énorme, il y a une tonne de tutoriels, de ressources et de sites qui couvrent tout, des bases à l'avant-garde de Angular. restez à l'écoute de tous et déterminez ce qui vaut votre temps, nous avons donc travaillé dur pour vous.Cette page recueille les meilleures ressources que nous puissions trouver et constitue une ressource complète pour les nouveaux arrivants et les développeurs chevronnés. </p> <p><img decoding= Sujets brûlants angulaires

  • Qu'est-ce que l'angulaire, de toute façon?
  • D'où vient l'angulaire?
  • Quel est le plus récent et le plus grand avec l'angulaire? J'utilise même Angular pour mon application?
  • OK, je suis dedans. Comment débuter?
  • Belle interface utilisateur pour applications angulaires
  • Mise à jour avec angulaire

    • Line__Blue 2.3 "title =" Ligne__Blue 2.3 "/> </p> <p><img decoding= a annoncé "Angular Labs", un parapluie catégorie pour de nombreuses fonctionnalités expérimentales et in-flux sur lesquelles l'équipe angulaire travaille. L'objectif est de créer une ligne de démarcation nette entre les aspects stables et prêts à la production de l'écosystème angulaire, tout en permettant l'expérimentation et l'itération sur les idées émergentes qui pourraient faire leur chemin dans l'Angulaire proprement dit. Angular Labs

    Angular Elements

    Lorsque Angular Labs a été annoncé, l'équipe a organisé trois initiatives existantes sous ce label: Schematics, Component Dev Kit et le projet ABC. Ils ont également annoncé une nouvelle initiative assez excitante, qui mérite d'être mentionnée ici: Angular Elements

    Le but du projet Angular Elements est de permettre aux développeurs de construire des composants angulaires pouvant être emballés et utilisés en dehors d'une application angulaire. Sous le capot, Elements s'appuie sur la spécification Custom Elements qui n'est pas encore implémentée dans tous les navigateurs, bien que le support arrive bientôt.

    Comme exemple de comment cela fonctionnerait, en pratique, nous allons Supposons que vous ayez créé un widget de calendrier pour une application Angular, et qu'une autre équipe – celle qui crée une application React – doit également créer un widget de calendrier. Avec Angular Elements, vous pouvez regrouper ce widget dans un élément personnalisé et autonome que l'équipe React pourrait ajouter à son application.

    Dans un thread GitHub sur le statut et la feuille de route d'Angular Elements, Rob Wormald a dit que les éléments devraient être libérés avec Angular 6, bien qu'il reste expérimental pendant un certain temps. Il y a beaucoup d'excitation autour du potentiel des éléments angulaires, mais l'équipe d'Angular veut procéder délibérément et avec prudence, et ne pas tomber dans le piège de libérer quoi que ce soit avant qu'il soit prêt.

    Si vous êtes intéressé par Angular Elements, assurez-vous de suivre la branche Elements dans le repo Angular GitHub mais vous devriez vous attendre à ce qu'il soit fusionné avec le master au moment de la publication de Angular 6.

    Progressive Web Apps

    Progressive Web Apps (PWAs) représente une nouvelle façon d'aborder le développement web, en particulier pour les applications Web mobiles et réactives. En suivant quelques nouvelles API Web et un nombre de pratiques et de directives de développement les PWA ont pour but de permettre aux développeurs de créer des applications Web mobiles qui se comportent beaucoup plus comme des applications installées nativement.

    matière? Parce que, en réalité, les utilisateurs utilisent principalement des applications natives, et non des applications Web, sur leurs téléphones. Selon comScore, les utilisateurs passent 87% de leur temps sur les appareils dans les applications natives et seulement 13% sur le Web mobile.

    Et bien que nous ne puissions généraliser complètement pourquoi, les applications natives ont un certain nombre de des avantages qui rendent les utilisateurs plus enclins à interagir avec eux sur une expérience Web mobile, notamment des icônes de lancement d'écran d'accueil, des notifications push, un support hors ligne et de meilleures performances. D'une manière générale, aux yeux des consommateurs, les applications natives sont plus fiables.

    Mais l'autre aspect de cette pièce est que l'utilisation native des applications est très concentrée sur quelques applications, pour la plupart des consommateurs. De nombreuses études ont montré que les utilisateurs ont tendance à n'utiliser que quelques applications installées régulièrement, ce qui signifie que tout le temps et l'argent que vous souhaitez dépenser pour créer une application entièrement native qui imite ce que fait déjà votre application web pourrait être une perte Heureusement, les APA existent pour faciliter la tâche des développeurs Web qui souhaitent créer des applications Web mobiles offrant de nombreux avantages des applications natives, notamment l'installation et la prise en charge hors ligne, sans avoir à créer une application complète. application mobile native.

    En pratique, les PWA se concentrent sur un nouveau niveau de soin pour les expériences de vos utilisateurs lors de l'utilisation de votre application. Selon Google, l'un des principaux moteurs des PWA, les PWA ont pour but de fournir des expériences utilisateur fiables, rapides et engageantes. Ce sont des expériences qui ont la portée du Web, et qui:

    • Charger instantanément et ne jamais devenir non fonctionnel, même dans des conditions de réseau incertaines
    • Répondre rapidement aux interactions de l'utilisateur avec des animations fluides et sans jank
    • une application native sur l'appareil, et fournir une expérience immersive

    Pour plus de conseils sur la construction d'un PWA, ou l'adaptation d'une application existante au modèle PWA, vous pouvez suivre cette liste de contrôle de Google . Il y a quelques bonnes ressources disponibles pour vous aider à traverser le processus de création d'un PWA, et vous pouvez trouver une excellente série de tutoriels ici complète avec des exemples de code que vous pouvez télécharger.

    L'une des technologies clés dans le parapluie PWA est les travailleurs des services. Un technicien de maintenance est essentiellement un proxy réseau programmable dans le navigateur, ce qui vous permet de "capturer" lorsque le navigateur doit effectuer une demande réseau et soit envoyer la demande, soit récupérer les informations demandées depuis un cache ou un magasin local. Cela signifie que les techniciens de maintenance permettent aux développeurs d'offrir une expérience hors connexion en détectant les conditions hors ligne ou à haute latence dans une application et en y réagissant. Pour une introduction en profondeur aux techniciens de service, consultez cet article de Matt Gaunt chez Google.

    Angular a un support intégré pour les techniciens de service et c'est quelque chose que vous devriez envisager ]même si vous n'optez pas pour l'approche PWA complète.

    Les techniciens de maintenance ont une prise en charge dans Chrome et Firefox, mais ne sont pas encore pris en charge dans Safari ou Edge. C'est sur le point de changer, cependant. À partir de la version 11.1 pour les ordinateurs de bureau et 11.3 pour iOS, Safari prendra en charge les techniciens de maintenance, ce qui représente un énorme avantage pour les développeurs Web mobiles qui créent des PWA. Edge version 17 devrait également fournir un soutien pour les travailleurs du service.

    Line__Blue 2.3 "title =" Line__Blue 2.3 "/> </p> <p><img decoding= dans Angular et un peu de son histoire.

    Angular est un framework large et complexe qui offre de nombreuses fonctionnalités . À la base, cependant, une grande partie de la puissance d'Angular provient de quatre concepts clés que tout aspirant développeur angulaire voudra connaître. Ils sont:

    1. Composants
    2. Injection de dépendances
    3. Liaisons de propriété
    4. TypeScript

    Composants

    Presque tout dans Angular est un composant, y compris l'élément racine de votre application elle-même. Qu'il s'agisse d'un élément personnalisé que vous créez ou d'une application d'une page entière, tout dans Angular est soit un composant, soit une collection de composants. Il y a des aspects d'Angular qui ne sont pas des composants en soi, mais le composant est un concept central du framework, et représente la majorité de ce que les développeurs Angular vont écrire et travailler avec lors de la création d'une application Angular. 1 concept clé et sont également une caractéristique fondamentale commune dans d'autres cadres. Jetez un oeil à cette comparaison de composants dans différents cadres pour plus d'informations

    Dependency Injection

    L'un des aspects les plus difficiles de la construction d'une application complexe est la gestion des dépendances. Non seulement parce que les applications complexes ont beaucoup de dépendances, mais aussi parce que nos approches traditionnelles d'inclusion des dépendances dans nos applications – via des importations et des déclarations en ligne – ont tendance à être fragiles et créent beaucoup d'endroits où les dépendances doivent

    En revanche, Angular utilise ce que l'on appelle l'injection de dépendances (DI) à la base. Avec DI, les développeurs déclarent des dépendances dans un ou plusieurs emplacements centraux, et lorsque de nouveaux objets sont créés, les dépendances sont automatiquement créées et "injectées" dans l'application. DI peut être un sujet intimidant pour les nouveaux arrivants, mais il est assez élégant et puissant une fois que vous l'avez compris. Heureusement, l'équipe Angular a une grande ressource que vous pouvez coder avec pour apprendre comment DI fonctionne en Angular

    Property Bindings

    Les liaisons de propriété ont été une construction clé des applications d'une seule page (SPAs ) depuis le début, et Angular n'est pas différent. L'idée selon laquelle les données de l'application sont distinctes de la logique de présentation et que les modifications apportées aux données doivent automatiquement être mises à jour chaque fois que ces données sont affichées ou utilisées dans une application est au cœur du cadre. Ceci est accompli grâce à des liaisons de propriétés sur des modèles dans des éléments personnalisés. Par défaut, les liaisons angulaires sont unidirectionnelles, bien que les liaisons bidirectionnelles soient supportées en utilisant la directive ngModel .

    TypeScript

    TypeScript est un surensemble de JavaScript qui supporte les types complexes, et qui compile en Javascript simple pour l'exécution dans le navigateur. Créé par Microsoft, TypeScript fournit un typage statique et une structuration en JavaScript. L'objectif de ce langage est d'aider les développeurs à créer des applications Web volumineuses et complexes. C'est un choix populaire parmi les équipes de développement d'entreprise, en particulier celles provenant d'un arrière-plan C # ou Java.

    Pour la réécriture L'équipe Angular a choisi de construire l'intégralité du framework avec TypeScript. Vous pouvez utiliser JavaScript JavaScript (ou même ES6 + avec Babel) pour vos propres applications, mais il est assez commun pour les développeurs travaillant avec Angular d'utiliser également le typage. Beaucoup d'échantillons en ligne, de blogs, d'articles et de ressources communautaires sont écrits avec TypeScript, nous vous recommandons donc sérieusement d'adopter TypeScript dans vos applications Angular.

    Line__Blue 2.3 "title =" Line__Blue 2.3 "/> </p> <p><img decoding= qui couvre une grande partie de l'histoire d'Angular mais nous allons vous donner un aperçu rapide ici.

    Comme beaucoup d'excellents outils et bibliothèques au fil des années, Angular a commencé comme un projet parallèle . En 2009, Miško Hevery et Adam Abrons ont publié un projet qu'ils ont appelé une bibliothèque destinée à aider les développeurs et les concepteurs à créer des applications Web avec un langage HTML simple. Le nom "Angular" a été inspiré par les chevrons ( <> ) qui entourent toutes les balises HTML comme

    et
      .

      Lors d'une interview il a fait Avec InfoWorld en 2013 Miško a dit ceci à propos de l'inspiration pour Angular:

      "Nous voulions voir si nous pouvions faciliter la tâche des concepteurs Web, pas nécessairement les développeurs Web, mais les concepteurs Web. un peu de HTML supplémentaire dans leur code afin qu'ils puissent transformer un formulaire statique en quelque chose qu'ils pourraient envoyer dans un e-mail.L'idée serait que vous pourriez avoir une boutique maman-et-pop qui vend de la pizza ou quelque chose, peut-être vous pourriez [have] un système de commande simple en ajoutant juste un tas de ces tags et ils pourraient envoyer un email au serveur. "

      Peu de temps après la libération d'Angular, Miško a commencé à travailler chez Google. En 2010, il travaillait sur l'application Google Feedback et il a convaincu son manager de l'époque, Brad Green, d'essayer Angular lors d'une réécriture de l'application. Dans ce seul projet, la quantité de temps et de code économisée par l'équipe était suffisante pour convaincre Google du pouvoir et du potentiel d'Angular.

      Après la réécriture de Google Feedback, l'équipe a ouvert la bibliothèque qu'Angular avait développée Au cours du projet, avant de sortir officiellement la v1.0 en mai 2011. L'adoption a été rapide et furieuse, et aujourd'hui Google revendique que plus de 1,5 million de développeurs utilisent Angular.

      Angular a été initialement publié sous le nom AngularJS - le 1. x version. Tout ce qui a une version 1.x est toujours appelé AngularJS. Il y a encore beaucoup de projets utilisant AngularJS, mais la version finale arrivera au milieu de 2018 et elle entrera en mode support à long terme à ce moment-là.

      La version 2.0 représentait une réécriture complète de la bibliothèque et , en tant que tel, est simplement appelé "angulaire". La dernière version d'Angular est 5.x au moment de la rédaction de cet article

      Mais qu'est-ce que l'angulaire?

      En termes simples, Angular est un framework JavaScript conçu pour faciliter la création d'applications par les développeurs. Le framework contient une multitude de fonctionnalités qui rendent les aspects complexes des applications modernes, comme la liaison de données, le routage et l'animation, trivial à implémenter.

      Angular fournit également un certain nombre de conventions à utiliser lorsque vous développez votre propre application. Ces conventions, ou opinions, peuvent être particulièrement utiles pour les grandes équipes travaillant ensemble sur une base de code unique. Angular fournit un guide de style très complet avec un certain nombre d'options qui couvrent presque tous les aspects du développement d'applications web modernes. Pour plus d'informations sur le "quoi" de Angular, il n'y a pas de meilleur endroit pour commencer que la page d'accueil Angular .

      Line__Blue 2.3 "title =" Line__Blue 2.3 "/> </p> <p><img decoding= le 1er novembre 2017 à quelques jours de date de sortie prévue du 23 octobre. Pas mal pour l'un des plus grands projets open-source autour. Et tandis que Angular 5 est une grosse version, le chemin de mise à niveau à partir des versions 4.x est assez simple.

      Que s'est-il passé dans Angular en 2017? Et que va-t-il arriver en 2018? Voici un aperçu des changements récents dans le monde angulaire .

      Alors, quoi de neuf dans Angular 5? Voici une liste de quelques-uns des nouveaux produits.

      Optimisation de la taille des paquets

      L'optimiseur de build amélioré d'Angular rend vos bundles d'applications encore plus petits. Pour les nouveaux utilisateurs de l'outil, c'est une fonctionnalité de l'outil CLI Angular qui permet de produire la plus petite version de vos scripts de production, CSS et autres ressources. Et la meilleure partie est que tout ce que vous devez faire pour tirer parti de cette fonctionnalité améliorée est de passer à la dernière CLI (v1.5) et de l'utiliser pour créer des bundles de production avant le déploiement. Si vous êtes préoccupé par le coût d'exécution d'Angular, essayez cette fonction!

      AoT Compilation - Activé par défaut

      AoT est le processus de compilation de composants et de templates HTML au moment de la construction. de sorte qu'une application et ses composants ou modèles sont livrés sous forme de code JavaScript exécutable avant d'être rendus par le navigateur, lors de l'exécution. Cette forme de compilation peut entraîner d'énormes gains dans les performances d'exécution et est maintenant activée par défaut pour les versions de production d'Angular. Encore mieux? Kendo UI prend également en charge la compilation AoT pour vos applications.

      Applications Web progressives (PWA)

      Angular 5 introduit le paquetage @ angular / service-worker pour amener les techniciens dans toutes les applications angulaires. Comme nous l'avons mentionné précédemment, les travailleurs des services sont un aspect clé des PWA, et un support formel prêt à l'emploi est un pas énorme vers la création de PWA encore plus facile à construire avec Angular.

      Et plus encore! ci-dessus sont quelques-unes des caractéristiques les plus remarquables dans Angular 5, mais il y a beaucoup plus de choses à exciter, grandes et petites. Voici quelques faits saillants:
      • Angular Universal, une fonctionnalité de rendu côté serveur (SSR) fournit une nouvelle API pour transférer l'état de l'application depuis le serveur
      • Angular Universal a également implémenté un DOM serveur pour faciliter la création de SSR
      • Angular 5 a changé pour utiliser l'API native addEventListener pour un rendu amélioré
      • Le routeur angulaire a ajouté des événements qui vous permettent de garder des onglets sur des routes individuelles, y compris les événements ActuvationStart et ActivationEnd

      Pour une liste exhaustive informations sur ce qui est disponible dans la version Angular 5, vous pouvez consulter le journal des modifications officiel .

      Line__Blue 2.3 "title =" Line__Blue 2.3 "/> </p> <p><img decoding= Réagir et Vue ? Devrais-je les utiliser à la place?

      Regardons chacune de ces questions, à son tour.

      Quelqu'un utilise-t-il l'angulaire?

      Angular existe depuis un moment - près d'une décennie! - Il est donc naturel de se demander si ses meilleurs jours sont derrière. Et tandis que la réponse à cette question est largement dans l'œil du spectateur, les progrès d'Angular de 2.x à aujourd'hui (5.x) devraient montrer clairement que l'équipe est très active et que la communauté du développement est plus saine que jamais. De plus, les sondages 2017 State of JavaScript et 2018 StackOverflow developer soulignent que l'intérêt et l'utilisation d'Angular restent forts

      Puis-je migrer d'AngularJS?

      question vient des développeurs et des équipes qui ont adopté les versions AngularJS dans la période 1.x. Dans les premiers jours de la réécriture, le mot officiel de Google était qu'il n'y aurait pas d'aide à la migration ou d'outils fournis pour ceux qui cherchent à passer d'AngularJS à Angular 2 et au-dessus. Heureusement, l'équipe a depuis reculé de cette position, et il existe un certain nombre de ressources de migration disponibles. Bien que nous vous recommandons de passer à Angular 2+ lors du démarrage de nouveaux projets, nous reconnaissons que, même dans ces cas, il y a probablement des modules et des fonctionnalités hérités que vous voudrez faire avancer.

      Un peu a été écrit sur la migration. Pour plus d'informations sur les tenants et les aboutissants de la migration, jetez un oeil à cet article sur les méthodologies de migration .

      Qu'en est-il de React et Vue?

      Enfin, si vous évaluez les frameworks web, vous envisagez probablement React et Vue, avec Angular. Et bien que cette page cible l'écosystème angulaire, nous reconnaissons que Angular n'a pas de sens pour chaque type d'application et chaque équipe. Il y a beaucoup de facteurs à évaluer lors de la sélection d'Angular, React ou Vue. Et bien qu'il y ait des domaines où les bibliothèques s'empilent bien, il y en a où l'on est un choix clair

      Plus important encore, le contexte de votre organisation, les besoins de vos clients et les compétences de votre équipe de développement devraient facteur fortement dans le cadre que vous choisissez pour votre prochaine application. Dans cet esprit, voici quelques points à considérer lorsque vous choisissez Angular, React et Vue.

      Comments are disabled in preview mode.

      Le meilleur outil 2023 pour ta croissance Instagram !



      Source link