Installation angular-ui-load

Version imprimable

18/09/2015, 10h20
ikar_AAA

Installation angular-ui-load

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 :D
18/09/2015, 10h40
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.
18/09/2015, 12h54
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 ? :aie:
18/09/2015, 13h47
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 ?

8O 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:

yo angular

Mon arborescence est :
Code:

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. :aie:

18/09/2015, 16h35
Marco46

Citation:

Envoyé par ikar_AAA

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).

Citation:

Envoyé par ikar_AAA

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.

Citation:

Envoyé par ikar_AAA

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.
18/09/2015, 17h02
ikar_AAA

Citation:

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.

Citation:

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 :(

Citation:

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

Il faut bien commencer quelque part :D
18/09/2015, 17h11
Marco46

Citation:

Envoyé par ikar_AAA

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.

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:

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:

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:

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 :-/

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:

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 !!!-->

Bonsoir Marco46,

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

Code:

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>