2016-05-01 13 views
0

Ich bin ziemlich neu mit Ionic und AngularJS. Ich habe versucht, eine App zu erstellen, aber anscheinend ist der Inhalt von app.js falsch.Ionic Controller und Dienstleistungen

Dies ist mein Code wie folgt aussehen:

app.js

angular.module('starter', ['ionic', 'starter.controllers']) 
 
.config(function($stateProvider, $urlRouterProvider) { 
 
    $stateProvider.state('app', { 
 
    url: "/ListeUsers", 
 
    views: { 
 
      templateUrl: "templates/ListeUsers.html", 
 
      controller: 'UsersCtrl' 
 
    } 
 
}); 
 
    // if none of the above states are matched, use this as the fallback 
 
$urlRouterProvider.otherwise('/app/ListeUsers'); 
 
});

Index.HTML

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
 
    <title></title> 
 

 
    <link href="lib/ionic/css/ionic.css" rel="stylesheet"> 
 
    <link href="css/style.css" rel="stylesheet"> 
 

 
    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above 
 
    <link href="css/ionic.app.css" rel="stylesheet"> 
 
    --> 
 

 
    <!-- ionic/angularjs js --> 
 
    <script src="lib/ionic/js/ionic.bundle.js"></script> 
 
\t <script src="lib/ionic/js/angular/angular-resource.min.js"></script> 
 

 
    <!-- cordova script (this will be a 404 during development) --> 
 
    <script src="cordova.js"></script> 
 

 
    <!-- your app's js --> 
 
    <script src="js/app.js"></script> 
 
    <script src="js/UserControllerIonic.js"></script> 
 
\t <script src="js/UsersServiceIonic.js"></script> 
 
    </head> 
 

 
    <body ng-app="starter"> 
 
    <ion-nav-view></ion-nav-view> 
 
\t 
 
    </body> 
 
</html>

userControllerIonic.js

angular.module('starter.controllers', ['starter.services']) 
 

 

 

 
.controller('UsersCtrl', function($scope,userService) { 
 
\t 
 
\t 
 
\t $scope.Users=userService.getUsers(); 
 
\t 
 
});

UsersServiceIonic.js

angular.module('starter.services', ['ngResource']) 
 

 

 
.factory('userService',function() { 
 

 
\t \t var Users =[]; 
 
     
 
     return{ 
 
\t \t \t 
 
\t \t \t getUsers:function(){ 
 
\t \t \t \t return $http.get("http://localhost:26309/api/User/getAll/").then(function (response) { 
 
\t \t \t \t \t \t \t users=response; 
 
          return users; 
 
         }); 
 
\t \t \t }, 
 
\t \t \t 
 
\t \t \t getUser : function(UserName) { 
 
\t \t \t \t return $http.get("http://localhost:26309/api/User/getUserByNom/" + UserName).then(function (serviceResp) { 
 
\t \t \t \t \t return serviceResp.data; 
 
\t \t \t \t }); 
 
\t \t \t } 
 
\t \t } 
 
\t \t 
 
})

ListeUsers.html

<ion-list> 
 
     <ion-item ng-repeat="user in Users" 
 
       >{{user.nom}}</ion-item> 
 
    </ion-list> 
 

ich das Problem nicht finden können

+0

Was ist der genaue Fehler, den Sie bekommen? – achabacha322

+0

nichts erscheint, eine leere Seite –

+0

Was sagt die Browser-Konsole? Es sollte ein Fehler sein, der Sie in die richtige Richtung zeigt – achabacha322

Antwort

1

Es gibt zwei Probleme, die Sie hier für Ihre App beheben arbeiten müssen: er

  1. Sie müssen korrigieren Standard-Fallback-URL von /app/ListeUsers bis /ListeUsers, da der Pfad /app/ListeUsers gültig ist, wenn der Status ein untergeordneter Status app war. Weitere Details finden Sie hier: https://github.com/angular-ui/ui-router/wiki/Nested-States-and-Nested-Views

  2. Ihre Service-Methoden versprechen Versprechen. Sie können einer $ scope-Variablen keine Zusage zuweisen und erwarten, dass die App funktioniert. Ändern Sie Ihre Controller-Code den Parameter aus dem .then Methode Rückruf des zurück Versprechen zu verwenden, wie unten:

    Winkel .module ('starter.controllers' [ 'starter.services']) .Controller ('UsersCtrl' , Funktion ($ Umfang, Userservice) {
    userService.getUsers() .then (function (response) { $ scope.Users = Antwort; }); });

+0

Vielen Dank für diese vollständige Antwort, aber es funktioniert immer noch nicht, es ist wie die Liste der Benutzer ist leer, da das Back-End-Projekt in ASP.NET mit VS implementiert ist und das Front-End mit Klammern implementieren, so i Ich weiß nicht, ob dies der Grund ist, warum ich die Daten nicht aus der Datenbank abrufen kann. –

+0

Kannst du die Antwort in deinem Netzwerk-Tab in Dev-Tools sehen? –

+0

Dieser Fehler tritt auf: Ein Fehler ist aufgetreten. Der Typ 'ObjectContent'1 konnte den Antworttext für den Inhaltstyp' application/xml; charset = utf-8 '. System.InvalidOperationException ........ usw –

Verwandte Themen