Tutoriel AngularJS : ajouter des dépendances

• Partie 1 : Google, Twitter, et AngularJSPartie 1t
• Partie 2 : créer un lecteur de flux RSSPartie 2
• Partie 3 : afficher le flux RSSPartie 3
• Partie 4 : gérer les flux RSSPartie 4
• Partie 5 : testsPartie 5
• Partie 6 : ajouter des dépendancesPartie 6
• Partie 7 : validation d'un formulairePartie 7
• Partie 8 : itérateurs et filtresPartie 8
• Partie 9 : installationPartie 9

Ce tutoriel concerne vraiment YeomanYeoman, Bower et Grunt, parce que j'ai le sentiment qu'il est utile d'étudier le système de génération que j'ai présenté pour ce projet AngularJS. Je me rends compte que le nombre des fichiers installés par Yeoman est un peu déroutant, donc nous allons faire un pas hors de AngularJS et regarder comment fonctionnent les dépendances et l'ajout de nouvelles dépendances à un projet.

Même si Yeoman permet de démarrer un nouveau projet, il faut aller fort en profondeur pour comprendre comment tout est aménagé. Par exemple : supposons que nous voulions ajouter sass-bootstrapsass-bootstrap à djsreaderdjsreader. Comment faisons-nous cela ?

Yeoman utilise BowerBower pour la gestion des dépendances et Bower utilise component.json (ou bower.json par défaut dans les versions plus récentes). Pour ajouter sass-bootstrap au projet, ouvrez le fichier component.json et ajoutez "sass-bootstrap": "2.3.x" à la propriété dependencies :

{
  "name": "djsreader",
  "version": "0.0.0",
  "dependencies": {
    "angular": "~1.0.5",
    "json3": "~3.2.4",
    "es5-shim": "~2.0.8",
    "angular-resource": "~1.0.5",
    "angular-cookies": "~1.0.5",
    "angular-sanitize": "~1.0.5",
    "sass-bootstrap": "2.3.x"
  },
  "devDependencies": {
    "angular-mocks": "~1.0.5",
    "angular-scenario": "~1.0.5"
  }
}

Ensuite, exécutez bower install pour installer les dépendances dans app/components. Si vous regardez à l'intérieur de app/components, vous devriez y voir sass-bootstrap.

Maintenant que le package est installé, comment s'en sert-on réellement avec notre projet ? Le plus simple est de créer une tâche Grunt appropriée.

GruntGrunt exécute le serveur de développement djsreader et compile les exécutables de production qui peuvent être déposés sur un serveur Web. Gruntfile.js est surtout de la configuration. Il contient les différents paramètres nécessaires pour gérer les tâches Grunt, donc il peut construire l'exécutable de notre projet. Une tâche est un compass. Si vous recherchez le fichier pour compass, vous devriez voir une propriété qui définit certaines options pour la compilation des fichiers Sass.

La convention pour la configuration de tâche Grunt est taskName: { argument: options }. Nous voulons ajouter un nouvel argument à la tâche compass pour construire les fichiers Bootstrap Sass. Nous savons que les fichiers se trouvent dans app/components/sass-bootstrap, donc nous avons juste besoin de le dire pour compiler les fichiers à cet endroit.

Ajoutez une nouvelle propriété compass appelée bootstrap. Ce devrait être aux alentours de la ligne 143 :

compass: {
  // options/dist/serveur
  bootstrap: {
    options: {
      sassDir: '<%= yeoman.app %>/components/sass-bootstrap/lib',
      cssDir: '.tmp/styles'
    }
  }
}

Presqu'en fin de fichier, ajoutez une entrée pour compass:bootstrap dans grunt.registerTask('server', [ et dans grunt.registerTask('build', [ :

grunt.registerTask('server', [
  'clean:server',
  'coffee:dist',
  'compass:server',
  'compass:bootstrap', /* Celle-ci ! */
  'livereload-start',
  'connect:livereload',
  'open',
  'watch'
]);

Cela provoque la compilation des fichiers .scss Bootstrap à chaque fois qu'un serveur est démarré.

Maintenant, ouvrez le fichier app/index.html et ajoutez-y styles/bootstrap.css :

<link rel="stylesheet" href="styles/bootstrap.css">
<link rel="stylesheet" href="styles/main.css">

Les fichiers de paramètres Yeoman créés nous facilitent la gestion des dépendances. Il y a énormément de choses cool que vous pouvez trouver avec bower search. Essayez-les !

La version pour ce tutoriel est la 005d1be.

Cet article a été publié avec l'aimable autorisation de Alex Young concernant l'article original AngularJS: Adding Dependencies du site DailyJS.

Je remercie également ced pour sa relecture attentive et assidue.