Discussion :

[ikar_AAA]

Bonjour à tous,

Je fais appel à la communauté developpez.net :-)

Dans mon projet angularJS (généré avec yeoman), j’utilise un composent bower "angular-ui-router", ce composent fonctionne mais je voudrai ajouter dans mon projet "angular-ui-load" pour charger un script js avec la page html associer. angular-ui-load n'est pas référencé comme un package bower, c'est pourquoi je ne peux pas utiliser la commande "bower install" .

Auriez-vous une idée pour l'ajouter dans mon projet angular ?

Merci d'avance

[Marco46]

Pour les libs non-référencées dans bower tu peux te créer un dossier vendor dans ton projet (c'est une sorte de convention). Dans tes scripts de build il te suffit alors de rajouter ce répertoire.

[ikar_AAA]

Bonjour Marco46,

Merci pour ta réponse, mais qu'entends tu par "Dans tes scripts de build" ? Par exemple index.html, Gruntfile.js ?

[Marco46]

Ben ton code de développement n'est pas exactement celui qui sera livré au final.

Quand tu fais grunt serve ou grunt build, des tâches grunt sont exécutées, elles vont générer un dossier build (le nom peut varier selon le generator que tu auras utilisé, ça peut être serve ou dist aussi) avec le code qui est livré. Ce code livré a été "raffiné" par d'autres taches grunt pour injecter les imports de dépendances dans ton index.html, pour minifier les fichiers etc ...

Quel est le nom du generator que tu as utilisé pour générer ton scaffold de projet ?

[ikar_AAA]

Je sens que cela va être compliqué à expliqué de mon coté. lol

Pour le moment, j'ai généré mon projet angular avec yeoman.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

yo angular

Mon arborescence est :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
-rwxrwxrwx   1 moi  staff  1304 11 aoû  2013 karma.conf.js
-rwxrwxrwx   1 moi  staff  1348 11 aoû  2013 karma-e2e.conf.js
-rwxrwxrwx   1 moi  staff  8430 26 aoû 22:44 Gruntfile.js
drwxrwxrwx  29 moi  staff   986 26 aoû 22:44 node_modules
-rwxrwxrwx   1 moi  staff  1086 26 aoû 22:44 package.json
-rwxrwxrwx@  1 moi  staff   427 26 aoû 23:37 bower.json
drwxrwxrwx   5 moi  staff   170 28 aoû 16:54 test
-rw-r--r--@  1 moi  staff  8196 10 sep 16:44 .DS_Store
drwxrwxrwx  14 moi  staff   476 14 sep 09:45 app
drwxr-xr-x  17 moi  staff   578 14 sep 09:45 bower_components
drwxrwxrwx  13 moi  staff   442 14 sep 09:45 dist
drwxr-xr-x  14 moi  staff   476 14 sep 09:45 ..
drwxr-xr-x  13 moi  staff   442 14 sep 09:45 .

Je n'utilise pas "grunt serve" car j’accède à mon projet via MAMP-PRO. Mon code JS est dans app/scripts/controler et mon html(vue) est dans app/views. Je n'ai pas encore minifié mon code ou fait de "grunt build" pour le moment.

Désolé si je suis vague, je suis NOOBE en angular.

[Marco46]

Je n'utilise pas "grunt serve" car j’accède à mon projet via MAMP-PRO.

C'est inutile et c'est pas la bonne manière de faire. Tu as des taches grunt pour avoir un serveur de développement (grunt serve).

Mon code JS est dans app/scripts/controler et mon html(vue) est dans app/views. Je n'ai pas encore minifié mon code ou fait de "grunt build" pour le moment.

Ca c'est ton code de développement, généralement il est servi par grunt serve qui fait quelques opérations dessus.
Quand tu livres dans un autre environnement (intégration, production, ...) ça va généralement être un grunt build qui va générer un livrable sous forme de zip qui pourra être déployé sur un vrai serveur.

Désolé si je suis vague, je suis NOOBE en angular.

Tu fais un projet tout seul alors que tu es junior ?

Les questions que tu poses ne sont pas spécifiques à Angular, l'usage de yo, grunt et bower est générique au développement web.
Tu pourrais utiliser un autre framework ça serait pareil.

[ikar_AAA]

Ca c'est ton code de développement, généralement il est servi par grunt serve qui fait quelques opérations dessus.
Quand tu livres dans un autre environnement (intégration, production, ...) ça va généralement être un grunt build qui va générer un livrable sous forme de zip qui pourra être déployé sur un vrai serveur.

Ok, je comprend, mais pour le moment, je ne suis pas en phase de livraison mais en phase de dev et j'ai besoin de cette librairie js pour faciliter mon dev.

C'est inutile et c'est pas la bonne manière de faire. Tu as des taches grunt pour avoir un serveur de développement (grunt serve).

grunt server fait office de server web, je ne vois pas la différence avec un autre

Tu fais un projet tout seul alors que tu es junior ?

Il faut bien commencer quelque part

[Marco46]

Ok, je comprend, mais pour le moment, je ne suis pas en phase de livraison mais en phase de dev et j'ai besoin de cette librairie js pour faciliter mon dev.


grunt server fait office de server web, je ne vois pas la différence avec un autre

Oui mais fait attention car grunt server fait parfois (ça dépend de ce qui est codé derrière ça peut varier d'un generator à un autre) des opérations qui ne seront pas faites si tu sers directement tes sources avec un autre serveur web.

[ikar_AAA]

Merci Marco46 pour ces informations.

Pour le moment, mon script js n'est pas reconnu avec angular-ui-load.

l'erreur classique dans ma console web :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
"Error: [ng:areq] Argument 'DetailsCtrl' is not a function, got undefined

J'ai intégré la librairie (je ne sais pas si l'on peut l'appeler comme ça) dans l'index.html de mon projet(non mimifié).

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
        <!-- build:js scripts/modules.js -->
        <script src="bower_components/angular-resource/angular-resource.js"></script>
        <script src="bower_components/angular-cookies/angular-cookies.js"></script>
        <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
        <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
        <!-- endbuild -->
 
        <!-- build:js({.tmp,app}) scripts/scripts.js -->
        <script src="scripts/app.js"></script>
        <script src="scripts/services/ui-load.js"></script> <!-- ici !!!-->
        <script src="scripts/controllers/main.js"></script>
        <script src="scripts/controllers/alert.js"></script>
        <script src="scripts/controllers/users.js"></script>
        <script src="scripts/directives/ui-jq.js"></script>
        <!-- endbuild -->

et dans mon app.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
'use strict';
 
 
  angular.module('webApp', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ui.router',
  'ui.load', //<- ici!!!
  'ui.jq',
  'zumba.angular-waypoints'
])
  .run(
    [          '$rootScope', '$state', '$stateParams',
      function ($rootScope,   $state,   $stateParams) {
          $rootScope.$state = $state;
          $rootScope.$stateParams = $stateParams;        
      }
    ]
  )
 
  .config(function ($stateProvider, $urlRouterProvider, JQ_CONFIG) {
    //delete $httpProvider.defaults.headers.common['X-Requested-With'];
    $urlRouterProvider.otherwise('/');
    $stateProvider
      .state('users', {
        url: '/users',
        templateUrl: 'views/users.html',
        controller:'UserCtrl'
      })
      .state('users.details', {
        url: '/details/:id_user',
        templateUrl: 'views/details.html',
        //controller:'UserCtrl'
        resolve: {
                      deps: ['uiLoad',         //<- et là!!!
                        function( uiLoad){
                          return uiLoad.load('scripts/controllers/details.js');
                      }]
                  }
      })
})

Mais cela ne fonctionne pas :-/

[Marco46]

C'est normal que ça marche pas. Ton export de code c'est l'état de l'index.html après l'exécution des tâches grunt qui vont injecter les lignes d'import dans index.html

Il faut que tu fasses un import en dehors des blocs réservés à grunt :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
        <!-- build:js scripts/modules.js -->
        <script src="bower_components/angular-resource/angular-resource.js"></script>
        <script src="bower_components/angular-cookies/angular-cookies.js"></script>
        <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
        <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
        <!-- endbuild -->
 
        <!-- build:js({.tmp,app}) scripts/scripts.js -->
        <script src="scripts/app.js"></script>
        <script src="scripts/controllers/main.js"></script>
        <script src="scripts/controllers/alert.js"></script>
        <script src="scripts/controllers/users.js"></script>
        <script src="scripts/directives/ui-jq.js"></script>
        <!-- endbuild -->
 
        <script src="scripts/services/ui-load.js"></script> <!-- ici !!!-->

[ikar_AAA]

Bonsoir Marco46,

J'ai suivi ton conseil et sa ne fonction pas, l'erreur reste la même :-/

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
        <!-- build:js scripts/modules.js -->
        <script src="bower_components/angular-resource/angular-resource.js"></script>
        <script src="bower_components/angular-cookies/angular-cookies.js"></script>
        <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
        <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
        <!-- endbuild -->
 
        <script src="scripts/services/ui-load.js"></script>
 
        <!-- build:js({.tmp,app}) scripts/scripts.js -->
        <script src="scripts/app.js"></script>
        <script src="scripts/controllers/main.js"></script>
        <script src="scripts/controllers/alert.js"></script>
        <script src="scripts/controllers/users.js"></script>
        <script src="scripts/directives/ui-jq.js"></script>
        <!-- endbuild -->
 
        <script src="scripts/services/ui-load.js"></script>