Tutoriel AngularJS : ajouter des dépendances

Cet article est la traduction de AngularJS: Adding Dependencies publié sur DailyJS.

Commentez Donner une note à l'article (5)

Article lu   fois.

Les deux auteur et traducteur

Traducteur :

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Ajouter des dépendances avec Bower

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 :

 
Sélectionnez
{
  "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.

II. Grunt

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 :

 
Sélectionnez
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', [ :

 
Sélectionnez
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 :

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

III. Conclusion

Image non disponible

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.

IV. Remerciements

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.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2013 Alex Young. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.