Developpez.com - Rubrique JavaScript

Le Club des Développeurs et IT Pro

Apprendre à programmer avec le framework Angular : démarrer avec l'outil Angular-CLI

Un tutoriel de William Koza

Le 2016-12-07 19:57:49, par wkoza, Membre éclairé
Bonjour à tous,

Dans ce tutoriel, nous allons apprendre à utiliser le client Angular-CLI qui est d'une grande aide pour commencer un projet.


Google nous propose un outil clé en main pour réaliser les tâches de développement les plus courantes. Ce projet est basé sur le projet Open Source ember CLI, qui a maintenant plus de trois ans. Grâce à notre Angular Cli, il est possible de :

  • créer une application from scratch via un scaffolding ;

  • Générer des squelettes des composants type Components… ;

  • Builder un projet ;

  • Lancer des tests de type « End-to-End » ou « unitaire » ;

  • Proxyfier le back end ;

  • Et beaucoup d'autres choses…

Bonne lecture.

Retrouvez les meilleurs cours et tutoriels pour apprendre Javascript.
  Discussion forum
22 commentaires
  • dukoid
    Membre expert
    devDePassage, certes AngularJS a de grande qualité comme tu le soulignes si bien : la simplicité

    MAIS parceque il y a toujours un mais. quand il s'agit de concevoir une grosse application, AngularJS est à la peine, c'est le bordel. ça se complique.
    le tout objet permet une meilleure gestion de l'ensemble de la grosse application(qui a un volume et une multitude de services et de données différentes...)
    oui Angular est du coup plus complexe.

    comme je dis toujours, chaque framework à ses avantages et inconvénients... et réponds à des besoins différents.
    le 15/12/2016 à 13:01
  • wkoza
    Membre éclairé
    Bonjour Heliogabale,

    Je comprends ta remarque. Ce n'est pas pour "se faire passer pour un développeur au fait des nouveautés", non. C'est juste une deformation de langage car ces termes sont très teintés de sens et parfois plus parlant. J'avoue que je ne suis pas fan du tout français mais je vais faire un effort. Pour le terme proxifier le back end, il faut comprendre mettre en place un système de proxy entre le front-end et le back-end afin de "rediriger" les requêtes vers un autre serveur. Cela permet notamment d'éviter les erreurs de cross-domain.
    le 23/12/2016 à 12:12
  • Heliogabale
    Nouveau Candidat au Club
    Merci de ta réponse, je comprend très bien.
    Mais tu n'étais pas visé personnellement, ni le contenu de l'article.

    Mais beaucoup d'articles deviennent souvent incompréhensibles à force de "compulsions syntaxiques".

    A +
    le 23/12/2016 à 16:08
  • ABCIWEB
    Expert éminent sénior
    Bonne initiative, c'est bien expliqué, continues comme ça
    le 07/12/2016 à 21:05
  • Doksuri
    Expert confirmé
    cette bande annonce donne envie de voire la suite simple, clair et concis
    le 08/12/2016 à 8:56
  • Jarodd
    Membre expérimenté
    Bonjour,

    Merci pour ce tuto, mais je trouve qu'il n'est pas très clair.
    Par exemple, on ne sait pas comment nommer le fichier typescript (ni s'il faut le mettre dans un répertoire précis). Idem pour index.html, avec le code indiqué on ne charge jamais le fichier js, donc on n'a jamais le résultat attendu (avec le logo), on a juste "Loading...".

    J'ai du aller sur le quickstart de la doc officielle pour comprendre ce qu'il me manquait.
    le 12/12/2016 à 14:53
  • wkoza
    Membre éclairé
    Bonjour Jarodd,

    Ce premier tuto n'est pas fait pour être testé. C'est juste une mise en bouche. Effectivement, il est compliqué de vouloir le tester .
    Les tutos suivant permettent de s'exercer grace notamment à angular-cli. Le premier tuto avec des exercices doit arrivé en ligne d'ici la fin de semaine.

    A bientôt
    le 12/12/2016 à 16:25
  • Jarodd
    Membre expérimenté
    Ok. Moi quand je vois du code j'essaye de le tester, c'est plus fort que moi

    Vivement la suite alors !
    le 12/12/2016 à 16:35
  • ascito
    Membre éprouvé
    pourquoi les "`"?

    Code : 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    import { Component } from '@angular/core';
 
@Component({
    selector: 'mon-premier-component',
    template: `
        <h2>Mon premier Component</h2>
        <img src="http://gabarit.developpez.be/images/logo.png" />
    `
})
export class MonPremierComponent  {
}
    le 14/12/2016 à 2:55
  • Watilin
    Expert éminent
    Envoyé par ascito
    pourquoi les "`"?
    Parce que ES6 : https://developer.mozilla.org/fr/doc...9raux_gabarits
    C’est plus pratique pour les sauts de ligne. Les chaînes traditionnelles ne les supportent pas (SyntaxError: unterminated string literal) et on est obligé de recourir à des astuces moches :
    Code : 
    1
    2
    3
    "Panda\
Poney\
Paprika"
    ou
    Code : 
    1
    2
    3
    "Panda\n" +
"Poney\n" +
"Paprika"
    le 14/12/2016 à 12:54
  Poster une réponse