Angular

Question

'da bir Ana/Detay senaryosunda ayrıntı verisi yok Hala bir SPA'da Açısal öğreniyorum ve bir MVC uygulamasını Angular'e dönüştürme sürecindeyim. Ana sayfanın bir üye listesi olduğu ve ayrıntı sayfasının seçilen üye için bireysel bir kayıt olduğu bir Ana/Detay senaryom var. Bunu anlamaya yardımcı olmak için hata ayıklamanın iyi bir yolunu henüz öğrenemedim, ancak görebildiğim verilerden veri dönmesi gerekiyor. Bilmediğim şey, sayfada nasıl düzgün görüntüleneceği. Üye sayfası gayet iyi çalışıyor ancak detay sayfası herhangi bir veri göstermiyor.

Görebildiğim, ayrıntıları görmek için "Görüntüle" ye tıkladığımda, URL'nin doğru memberId ile doğru Web API son noktasına sahip olduğunu görebiliyorum. Bu URL bitiş noktasını Fiddler'daki memberId ile görüntülediğimde, döndürülecek doğru verileri görüyorum. Yani, Web API doğru çalışıyor.

Bu benim app.js dosyası ve '/memberDetail/:memberId' yolunu kullanıyor ve tarayıcımda "'app/views/memberDetail.html' sayfasını görüntüleyemiyorum. Bu yüzden rota doğru bir şekilde yapılandırılmalıdır.

(function() { 

    var app = angular.module('troopApp', ['ngRoute','appFilters']);  //('moduleName', [array of injected modules]) 

    app.config(function($routeProvider) { 
     $routeProvider 
      .when('/', { 
       controller: 'MembersController', 
       templateUrl: 'app/views/members.html' 
      }) 
      .when('/memberDetail/:memberId', { 
       controller: 'MembersController', 
       templateUrl: 'app/views/memberDetail.html' 
      }) 
      .otherwise({ redirectTo: '/'}); 
    }); 


}()); 

Ben sadece kod bazı yüzden ilerlemek için çok fazla yok çekti benim Kontrolörün içinde bu.

var MemberDetailController = function ($scope, $routeParams, memberFactory) { 
     var memberId = $routeParams.memberId; 
     $scope.member = null; 

     function init() { 
      memberFactory.getMember(memberId) 
       .success(function (member) { 
        $scope.member = member; 
       }) 
       .error(function (data, status, headers, config) { 
        //handle error 
       }); 
     } 
     init(); 
    }; 

    MemberDetailController.$inject = ['$scope', '$routeParams', 'memberFactory']; 

    angular.module('troopApp') 
     .controller('MemberDetailController', MemberDetailController); 

Bu, üyeFactory.js dosyasıdır.

(function() { 
    var memberFactory = function ($http) { 

     var factory = {}; 

     factory.getMembers = function() { 
      return $http.get('/api/MemberApi'); 
     }; 

     factory.getMember = function (memberId) { 
      return $http.get('/api/MemberApi/' + memberId); 
     }; 

     return factory; 
    }; 

    memberFactory.$inject = ['$http']; 

    angular.module('troopApp').factory('memberFactory', memberFactory); 

}()); 

Bu benim HTML'm.

<div class="container"> 
    <h2>Member Detail</h2> 
    <p /> 
    <div class="table-responsive"> 
     <table class="table table-bordered table-striped table-hover"> 
      <tr> 
       <td>Name: </td> 
       <td>{{ member.FirstName }} {{ member.LastName }}</td> 
      </tr> 
     </table> 
    </div> 
</div> 

Answer 1

Sonunda kendi sorunumu buldum. Denetleyicileri, membersController.js adlı tek bir dosyada bir araya getirdim. Yani, doğru bir şekilde düşünmüyorum, denetleyicinin adını, "ControllerDetailController" ayrıntı denetleyicisinin gerçek adı olması gerektiğinde JS dosyasına işaret ettiğini düşünerek MembersController yönüne yönlendirdim.

(function() { 

    var app = angular.module('troopApp', ['ngRoute','appFilters']);  //('moduleName', [array of injected modules]) 

    app.config(function($routeProvider) { 
     $routeProvider 
      .when('/', { 
       controller: 'MembersController', 
       templateUrl: 'app/views/members.html' 
      }) 
      .when('/memberDetail/:memberId', { 
       controller: 'MemberDetailController', 
       templateUrl: 'app/views/memberDetail.html' 
      }) 
      .otherwise({ redirectTo: '/'}); 
    }); 

}()); 

:

benim app.js bu dosyayı değişti