安心なwebserviceで角度が動作しない

Question

私はアプリを開発していて、フロントエンドのバックエンドとangularJSで安らかなWebサービスを使用しています。私はCRUD操作のバックエンドをPostman APIクライアントを使ってテストしました。うまくいきます。私はまた、AddとView操作をテストして、角度の小さなHTMLコードを作成しました。また、うまく動作します。私の問題は、これでいわゆる「小さなサイズのHTML」で行ったことが私の実際のアプリでは機能していないということです。私が間違っていたことを明らかにする手助けをすることはできますか？ありがとう！それでもPOいるあなたのGETリクエストで

var myApp = angular.module('myApp', [ 
 
    'ngRoute', 
 
    'specificProductControllers' 
 
]); 
 

 
myApp.config(['$routeProvider', function($routeProvider) { 
 
    $routeProvider. 
 
    when('/list', { 
 
    templateUrl: 'partials/list.html', 
 
    controller: 'ListController' 
 
    }). 
 
    when('/details/:itemId', { 
 
    templateUrl: 'partials/details.html', 
 
    controller: 'DetailsController' 
 
    }). 
 
    when('/login', { 
 
    templateUrl: 'partials/login.html', 
 
    controller: 'LoginController' 
 
    }). 
 
    when('/specificProductOrServiceAdd', { 
 
    templateUrl: 'partials/specificProductOrServiceAdd.html', 
 
    controller: 'SpecificProductOrServiceAddController' 
 
    }). 
 
    when('/adminPage', { 
 
    templateUrl: 'partials/adminPage.html', 
 
    controller: 'AdminPageController' 
 
    }). 
 
    when('/specificProducts', { 
 
    templateUrl: 'partials/specificProducts.html', 
 
    controller: 'SpecificProductsController' 
 
    }). 
 
    when('/specificProducts/:itemId', { 
 
    templateUrl: 'partials/specificProductOrServiceDetail.html', 
 
    controller: 'SpecificProductOrServiceDetailController' 
 
    }). 
 
    otherwise({ 
 
    redirectTo: '/list' 
 
    }); 
 
}]);

<section> 
 
    <div class="col-sm-12 containerr"> 
 
     <br><br> 
 
     {{2+4}}<br><br> 
 
     <!--The form goes here --> 
 
     <div class="form-group form-inline"> 
 
     <br><br> 
 
     <div class="col-sm-6"> 
 
     <label><h4>Enter Specific Product/Service Id:</h4> </label> 
 
     </div> 
 
     <div class="col-sm-6"> 
 
     <input class="form-control" id="name" ng-model="specificProduct.specificProductId1" name="name" placeholder="Id" type="text" required> 
 
     </div> 
 
    </div> 
 
    <div class="form-group form-inline"> 
 
     <br><br> 
 
     <div class="col-sm-6"> 
 
     <label><h4>Enter Specific Product/Service Name:</h4> </label> 
 
     </div> 
 
     <div class="col-sm-6"> 
 
     <input class="form-control" id="name" ng-model="specificProduct.specificProductName" name="name" placeholder="Name" type="text" required> 
 
     </div> 
 
    </div> 
 
    <br><br> 
 
    <div class="form-group form-inline"> 
 
     <div class="col-sm-6"> 
 
     <label><h4>Enter Specific Product/Service Price:</h4> </label> 
 
     </div> 
 
     <div class="col-sm-6"> 
 
     <input class="form-control" id="name" ng-model="specificProduct.specificProductPrice" name="name" placeholder="Price" type="text" required> 
 
     </div> 
 
    </div> 
 
    <br><br> 
 
    <div class="form-group form-inline"> 
 
     <div class="col-sm-6"> 
 
     <label><h4>Enter Manufacturer/Service Provider Name:</h4> </label> 
 
     </div> 
 
     <div class="col-sm-6"> 
 
     <input class="form-control" id="name" ng-model="specificProduct.specificProductManufacturerName" name="name" placeholder="Provider Name" type="text" required> 
 
     </div> 
 
    </div> 
 
    <br><br> 
 
    <div class="form-group form-inline"> 
 
     <div class="col-sm-6"> 
 
     <label><h4>Enter Specific Product/Service Model (If there is):</h4> </label> 
 
     </div> 
 
     <div class="col-sm-6"> 
 
     <input class="form-control" id="name" name="name" ng-model="specificProduct.specificProductModel" placeholder="Model" type="text" required> 
 
     </div> 
 
    </div> 
 
    <br><br> 
 
    <div class="form-group form-inline"> 
 
     <div class="col-sm-6"> 
 
     <label for="sel1"><h4>Availablity:</h4></label> 
 
     </div> 
 
     <div class="col-sm-6"> 
 
     <select class="form-control" > 
 
      <option>Available</option> 
 
      <option>Not Available</option> 
 
     </select> 
 
     </div> 
 
    </div> 
 
    <br><br> 
 
    <div class="form-group form-inline"> 
 
     <div class="col-sm-6"> 
 
     <label><h4>Enter Specific Product/Service Description:</h4> </label> 
 
     </div> 
 
     <div class="col-sm-6"> 
 
     <textarea class="form-control" id="name" ng-model="specificProduct.specifcProductDescription" name="name" placeholder="Description" type="text" required></textarea> 
 
     </div> 
 
    </div> 
 
    <br><br> 
 
    <a href="#/specificProducts"><button type="button" class="btn btn-default" ng-click="addSpecificProduct(specificProduct)">+Add</button></a> 
 
    </div> 
 
</section>

var specificProductControllers = angular.module('specificProductControllers', ['ngAnimate']); 
 

 
specificProductControllers.controller('SpecificProductOrServiceAddController', ['$scope', '$http','$routeParams', function($scope, $http, $routeParams) { 
 
    $http.get('http://localhost:8080/marketServerNew/webapi/specificProduct/spv/sp5').success(function(data) { 
 
     $scope.readSpecificProduct = data; 
 
     }) 
 

 
    $scope.addSpecificProduct = function(specificProduct) { 
 
     $http.post("http://localhost:8080/marketServerNew/webapi/specificProduct/spa", specificProduct).success(function(data) { 
 
      $scope.specificProduct = data; 
 
      }) 
 
    } 
 
}]);

<!doctype html> 
 
<html lang="en" ng-app="myApp"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <title>My Website</title> 
 
    <link rel="stylesheet" href="css/reset.css"> 
 
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="bootstrap/css/custom.css"> 
 
    <script src="lib/angular/angular.min.js"></script> 
 
    <script src="lib/angular/angular-route.min.js"></script> 
 
    <script src="lib/angular/angular-animate.min.js"></script> 
 
    <script src="js/app.js"></script> 
 
    <script src="js/controllers.js"></script> 
 
    <link rel="stylesheet" href="css/style.css"> 
 
    
 
</head> 
 
<body> 
 
<div class="main" ng-view></div> 
 

 
<script src="bootstrap/js/jquery-1.11.3.js"></script> 
 
<script src="bootstrap/js/bootstrap.min.js"></script> 
 
</body> 
 
</html>

Answer 1

ローカルホストに向かう。交換する必要のある場所にホストしていると仮定してください。