Question

我是angularjs的新手，我正在尝试创建一个可以从服务器访问数据并将数据发布到服务器的webapp。但是我遇到了问题，我在应用程序中做了什么，我在单独的文件中创建了模块，服务，视图和控制器。我无法访问并将数据发布到服务器。任何人都可以帮助我。

home.js（控制器文件）

var myapp = angular.module('demo').controller("homeController",          function($scope,myService){
var userArray = {
   Id:$scope.user.id,
   Model:$scope.user.model,
   Name:$scope.user.name,
   Color:$scope.user.color,
   Price: $scope.user.price
};

myService.async().then(function(d){
  $scope.hello=d;
});

$scope.push = function(userArray){
  myService.saveUser(userArray).then(function(response){
  console.log("inserted");
   });
  }
});

userService.js（服务文件）

myapp.factory('myService',function($http){
var myService={
async : function(){
  var promise=    $http.get('http://jsonplaceholder.typicode.com/posts/1').then(function(response){
    console.log(response);
    return response;
  });
  return promise;
},
saveUser : function(user){
 $http.post('http://jsonplaceholder.typicode.com/posts',user).success(
   function(response,status,headers,config){
      });

     }
    };
  return myService;
 });

restComponent.js（模块文件）

var myapp=angular
            .module('demo',['ui.router'])
            .config(function ($stateProvider, $urlRouterProvider){
              $urlRouterProvider.otherwise('/home');
              $stateProvider
              .state('home',{
                url:'/home',
                templateUrl:'Templates/home.html',
                controller:'homeController'
              })
              .state('about', {
                url:'/about',
                templateUrl:'Templates/about.html',
                controller:'aboutController'
              })
              .state('contact',{
                url:'/contact',
                templateUrl:'Templates/contact.html',
                controller:'contactController'
              });

            });

home.html（查看文件）

  <form ng-submit="mod.push();" ng-controller="homeController as mod">
    Id:<br>
    <input type="text" name="id" ng-model="mod.user.id"><br>
    Model:<br>
    <input type="text" name="model" ng-model="mod.user.model"><br>
    Name:<br>
    <input type="text" name="name" ng-model="mod.user.name"><br>
    Color:<br>
    <input type="text" name="color" ng-model="mod.user.color"><br>
    Price:<br>
    <input type="text" name="price" ng-model="mod.user.price"><br>
    <br>
    <input type="submit" >
  </form>

  <br>
  <br>


  <table>
    <thead>
      <th>UserId</th>
      <th>Name</th>
      <th>Country</th>

    </thead>
 <tbody>
   <tr ng-repeat="employee in hello">
   <td>{{employee.userId}}</td>
   <td>{{employee.name}}</td>
   <td>{{employee.country}}</td>
  </tr>
 </tbody>
 </table>

的index.html

 <!doctype html>
 <html lang="en" >
   <head>
      <meta charset="utf-8">
      <title>RestApi</title>
      <link rel="stylesheet"   href="bower_components/bootstrap/dist/css/bootstrap.css" />

       <script src="bower_components/angular/angular.js"></script>
       <script src="
       https://cdnjs.cloudflare.com/ajax/libs/angular-ui-  router/0.3.1/angular-ui-router.js
        "></script>
       <script src="rest-controller.component.js"></script>
       <script src="Controllers/contact.js"></script>
       <script src="Controllers/about.js"></script>
       <script src="Controllers/home.js"></script>
       <script src="Service/userService.js"></script>

    </head>
    <body ng-app="demo" >
     <ol>
       <li><a ui-sref="home">Home</a></li>
       <li><a ui-sref="about">About</a></li>
       <li><a ui-sref="contact">Contact</a></li>
    </ol>


    <div ui-view></div>
  </body>
 </html>

Answer 1

改变

你没有声明你的范围所以未定义为什么在使用之前更好地声明它还删除了那个

不需要的用户数组

var myapp = angular.module('demo').controller("homeController",          function($scope,myService){
$scope.user = {}; // here you declare the user obkect
$scope.push = function(user){
    myService.saveUser(user).then(function(response){
      console.log("inserted");
    });
  }
})

和家庭HTML 你想使用范围，但你使用了控制器var 视图知道范围及其所有对象，所以只需编写var fun name，它就会直接转到它或者你也可以像控制器一样使用它而不是范围和mod来对控制器做同样的事情

在这里你应该发送用户，或者你可以通过发送$scope.user

在控制器中完成

<form ng-submit="push(user);">
    Id:<br>
    <input type="text" name="id" ng-model="user.id"><br>
    Model:<br>
    <input type="text" name="model" ng-model="user.model"><br>
    Name:<br>
    <input type="text" name="name" ng-model="user.name"><br>
    Color:<br>
    <input type="text" name="color" ng-model="user.color"><br>
    Price:<br>
    <input type="text" name="price" ng-model="user.price"><br>
    <br>
    <input type="submit" >
  </form>

和路线

最好在视图上声明控制器，但你不能同时执行它们，所以我选择了视图控制器

var myapp=angular
            .module('demo',['ui.router'])
            .config(function ($stateProvider, $urlRouterProvider){
              $urlRouterProvider.otherwise('/home');
              $stateProvider
              .state('home',{
                url:'/home',
                templateUrl:'Templates/home.html'
              })
              .state('about', {
                url:'/about',
                templateUrl:'Templates/about.html'
              })
              .state('contact',{
                url:'/contact',
                templateUrl:'Templates/contact.html'
              });

            });

应该那样工作

Angularjs无法读取未定义

1 个答案: