Intégration HTML et API avec AngularJS

Bonjour,

J'ai besoin d'intégrer 2 templates dans une page HTML et utiliser une API.
Je suis bloquée je n'arrive pas à afficher mes templates et du coup encore moins pour l'utilisation de mon API ...

Si quelqu'un peut m'aider svp

Salut

Salut, voici mon squelette de base fonctionnel d'une application Angular Js 1.x avec le routing pour les vues(templates).
Dans cet exemple, il y a 4 vues(Templates), et 4 controleurs.
Il y a des commentaires en Français.
Pour le tester en ligne, c'est ici .

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html ng-app="monApp">
  <head>
   <meta charset="utf8" >
    <title>Squelette de base d application MVC Angular</title>
        <!-- CHARGEMENT DES LIBRAIRIES -->
        <!-- APPEL LIB ANGULAR -->
        <script type="text/javascript" src="angular-1.3.13/angular.min.js"></script>
        <script src="angular-route.min.js"></script>
        <script src="librairies/angular-locale_fr-fr.js"></script>
                 <!-- CSS DE L APPLICATION -->   
        <link href="app10.css" media="screen" rel="stylesheet" type="text/css" />
        <script>
 
        <!-- Déclaration des modules utilisés par l application MVC Angular, ngRoute est obligatoire pour router les vues : Les modules sont spécifiés entre Crochets, on en trouve des centaines sur internet, ils extendent les capacités d Angular, ce sont des librairies -->
         var monApp = angular.module('monApp',['ngRoute'])
 
 
 
        <!-- Configuration des vues et de leurs controleurs affiliés, avec ng-route . Note : Les vues peuvent partager le même controleur-->
        .config(function ($routeProvider, $locationProvider){
          $routeProvider
            .when('/accueil', {
              templateUrl: 'defaut.html',
              controller: 'accueilCtrl'
            })
            .when('/liste', {
              templateUrl: 'liste.html',
              controller: 'listeCtrl'
            })
            .when('/detail', {
              templateUrl: 'detail.html',
              controller: 'editDetailsCtrl'
            })
            .when('/statistiques', {
              templateUrl: 'stats.html',
              controller: 'stats'
            })          
            .otherwise({redirectTo: '/accueil'});
        })
 
 
 
 
 
 
        <!-- Ci-dessous, les différents controleurs qui opèrent sur les vues, ils peuvent partager le modèle de data à l'aide d'une factory, à ce moment là, il faut inclure la factory dans les options du controleur.. Généralement, les controleurs sont dans un répertoire séparé appellé "controllers" pour être à la norma bower Grunt -->
 
        <!-- LE CONTROLEUR DE L ACCUEIL -->
        .controller("accueilCtrl", function($scope) {
            $scope.bonjour = "Mr Durand";
        <!-- FIN DU CONTROLEUR -->
        })
 
        <!-- LE CONTROLEUR DE LA LISTE -->
        .controller("listeCtrl", function($scope) {
        <!-- FIN DU CONTROLEUR -->
        })
 
        <!-- LE CONTROLEUR D UN OBJET A EDITER -->
        .controller("editDetailsCtrl", function($scope) {
        <!-- FIN DU CONTROLEUR -->
        })
 
        <!-- LE CONTROLEUR DES STATISTIQUES -->
        .controller("editDetailsCtrl", function($scope) {
        <!-- FIN DU CONTROLEUR -->
        })
 
    </script>
 </head>
 
 
 
 <!-- La page HTML générale -->
<body ng-controller="accueilCtrl" >
 
<!-- Le menu, qui appelle,grâce à HREF, les différentes vues HTML situées plus bas, puis les affiche dans la balise ng-view -->
 
<div class="container ">
 
<div class="menu designDiv"> 
            <a href="#/accueil" class="">Accueil</a>
            <a href="#/liste" class="">Liste  </a>
            <a href="#/detail" class="">Details</a>
            <a href="#/statistiques" class="">Stats   </a>
</div>
 
 
 
<div id="main" class="designDiv">
 
<!-- Cette balise NG-View va afficher les différentes vues -->
<div ng-view></div>
 
</div>
</div>
</body>
 
 
 
<!-- Voici maintenant la liste des vues qui s affichent dans la balise ng-view(voir plus haut), qui doivent généralement être dans un fichier séparé, normalement dans un réperoire "views", pour être à la norme BOWER -->
<!-- VUE HTML : DEFAUT-->
    <script type="text/ng-template" id="defaut.html">
        Bonjour {{bonjour}} je suis la vue de l accueil.
    </script>
 
<!-- VUE HTML : LISTE -->
    <script type="text/ng-template" id="liste.html">
        Bonjour, je suis la vue qui présente une liste d objets.
    </script>
 
<!-- VUE HTML : LISTE -->
    <script type="text/ng-template" id="detail.html">
        Bonjour, je suis la vue qui présente le detail d un objet.
    </script> 
 
 
<!-- VUE HTML : STATS -->
    <script type="text/ng-template" id="stats.html">
        Bonjour, je suis la vue qui présente des statistiques.
    </script>

Merci

Merci.

J'ai var app = angular.module('app', ['ui.router', 'angularGrid']);

et <ui-view></ui-view>

ça change quoi par rapport à [ngRoute] et <div ng-view></div> ??

Ah oui, il y a deux modules différents pour router les vues . Moi je préfére ngRoute car je le trouve un peu plus facile à exploiter, mais votre router propose plus d'options (en particulier à propos de l'authentification en fonction des vues)
Pour Ui Grid, c'est un module optionnel qui permet de gérer les tableaux et d'ajouter des fonctionnalités comme le tri en cliquant sur les titres colonnes par exemple.

D'accord merci beaucoup !