2017-02-09 34 views
-1

Я разрабатываю приложение, и оно использует успокаивающий веб-сервис на заднем конце и угловойJS на передней панели. Я тестировал back end для CRUD-операций, используя клиент Postman API, и он отлично работает. Я также проверил операции «Добавить» и «Просмотреть», написав небольшой HTML-код с угловым, и он также отлично работает. Моя проблема в том, что то, что я сделал в этом так называемом «маленьком формате HTML», не работает в моем реальном приложении. Может ли кто-нибудь помочь мне узнать, что я сделал неправильно. Благодаря!Угловая не работает с Restful webservice

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>

+0

Определите «малый размер HTML» –

+0

Кроме того, в вашем приложении реального времени я надеюсь, что вы изменили бы свои «http: // localhost: 8080 /» вхождения на ваш сервер имя. –

+0

Ну, это форма для получения ввода и кнопка для добавления в базу данных. Он также считывает одну из записей из одной из таблиц в базе данных и загружает ее при запуске. – Dejazmach

ответ

0

В запросе получите вы все еще ро наведение на локальный хост. Предполагая, что вы размещаете где-нибудь, что нужно будет заменить

+0

Тот же сервер! – Dejazmach

+0

У вас есть это в plunkr или js скрипке? – Scott

+0

Нет, но, я думаю, я опубликовал все необходимое. – Dejazmach