Question

我是AngularJS的新手。我想知道使用纯AngularJS启动控制器的最佳方法是什么，该控制器使用向外部源发出HTTP请求的服务，并且响应接收JSON对象。

控制器用于获取将作为目标网页的一部分显示的信息（欢迎信息）。

我试过了：

在HTML中使用ng-init调用函数，使用控制器的别名而不使用别名。
在控制器中显式调用服务，并在路由配置中，解析原语以调用服务并在配置文件中保存一个变量。
在控制器中接收服务的响应和路由配置中的参数，使用resolve原语调用服务并将其保存为变量，其中包含控制器接收的参数名称。
在控制器中将响应保存为$scope变量，但始终未定义，HTML没有绑定任何内容。是否有必要创建值或指令或用于保存范围内的对象？还尝试在$ scope作为参数的服务中使用相同的结果（undefined $ scope variable）。

这些选项有效地触发HTTP请求并通过控制器功能的行。问题是控制器无法获得响应。在调试模式下，我只能看到它是一个对象，但它不会表现为JSON对象，因此无法访问任何属性。

我在控制器上使用了.then，但是现在数据保存在$ scope中，它显示了[OBJECT OBJECT]，我无法访问保存为的JSON对象的属性。 http请求的响应。有什么想法吗？

发出请求的服务的功能如下：

myAppModule.factory('ClimateService', function ($http) {
     return { 
      getLocation: function () {
            return $http.get("some_url/json")
            then(function successCallback(response) {
    return response.data;    
  }, function errorCallback(response) {
    //
  });
        }
     }

});

在调试中，我可以看到200响应和它的JSON。 Content-Type:application/json; charset=utf-8

经过多次更改后，它们都没有触发，我收到注射错误。我在HTML标头中包含了本地angular-routes，并使用bower.jason获取了NetBeans项目。并作为ngRoute

angular.module('app',['ngRoute', ...

angular.module('app.routes', ['ngRoute', 'app.core'])
    .config(config);

angular.module('app.core', []);

顺便说一句，GitHub上的Angello项目既没有注入服务也没有注入太多参数，本书并没有深入介绍这个主题。

是AngularJS的版本吗？

未捕获错误：[$ injector：modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=app&p1=Error%3A%20%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.4.8%2F%24injector%2Fmodulerr%3Fp0%3Dapp.config%26p1%3DError%253A%2520%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.4.8%252F%2524injector%252Fnomod%253Fp0%253Dapp.config%250A%2520%2520%2520%2520at%2520Error%2520(native)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A8383%252Fapp_demo_app%252Fbower_components%252Fangular%252Fangular.min.js%253A6%253A416%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A8383%252Fapp_demo_app%252Fbower_components%252Fangular%252Fangular.min.js%253A24%253A186%250A%2520%2520%2520%2520at%2520b%2520(http%253A%252F%252Flocalhost%253A8383%252Fapp_demo_app%252Fbower_components%252Fangular%252Fangular.min.js%253A23%253A251)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A8383%252Fapp_demo_app%252Fbower_components%252Fangular%252Fangular.min.js%253A23%253A494%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A8383%252Fapp_demo_app%252Fbower_components%252Fangular%252Fangular.min.js%253A38%253A117%250A%2520%2520%2520%2520at%2520n%2520(http%253A%252F%252Flocalhost%253A8383%252Fapp_demo_app%252Fbower_components%252Fangular%252Fangular.min.js%253A7%253A333)%250A%2520%2520%2520%2520at%2520g%2520(http%253A%252F%252Flocalhost%253A8383%252Fapp_demo_app%252Fbower_components%252Fangular%252Fangular.min.js%253A37%253A488)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A8383%252Fapp_demo_app%252Fbower_components%252Fangular%252Fangular.min.js%253A38%253A134%250A%2520%2520%2520%2520at%2520n%2520(http%253A%252F%252Flocalhost%253A8383%252Fapp_demo_app%252Fbower_components%252Fangular%252Fangular.min.js%253A7%253A333)%0A%20%20%20%20at%20Error%20(native)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8383%2Fapp_demo_app%2Fbower_components%2Fangular%2Fangular.min.js%3A6%3A416%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8383%2Fapp_demo_app%2Fbower_components%2Fangular%2Fangular.min.js%3A38%3A391%0A%20%20%20%20at%20n%20(http%3A%2F%2Flocalhost%3A8383%2Fapp_demo_app%2Fbower_components%2Fangular%2Fangular.min.js%3A7%3A333)%0A%20%20%20%20at%20g%20(http%3A%2F%2Flocalhost%3A8383%2Fapp_demo_app%2Fbower_components%2Fangular%2Fangular.min.js%3A37%3A488)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8383%2Fapp_demo_app%2Fbower_components%2Fangular%2Fangular.min.js%3A38%3A134%0A%20%20%20%20at%20n%20(http%3A%2F%2Flocalhost%3A8383%2Fapp_demo_app%2Fbower_components%2Fangular%2Fangular.min.js%3A7%3A333)%0A%20%20%20%20at%20g%20(http%3A%2F%2Flocalhost%3A8383%2Fapp_demo_app%2Fbower_components%2Fangular%2Fangular.min.js%3A37%3A488)%0A%20%20%20%20at%20eb%20(http%3A%2F%2Flocalhost%3A8383%2Fapp_demo_app%2Fbower_components%2Fangular%2Fangular.min.js%3A41%3A249)%0A%20%20%20%20at%20c%20(http%3A%2F%2Flocalhost%3A8383%2Fapp_demo_app%2Fbower_components%2Fangular%2Fangular.min.js%3A19%3A463) (23:05:42:235 | error, javascrip

Answer 1

我们假设您使用$ http服务来请求数据。

angular.module('app.core', [])
  .controller('CoreController', CoreController);

CoreController.$inject = ['$scope', '$http'];

function CoreController($scope, $http) {
  $http({
    method: 'GET',
    url: '/someUrl'
  }).then(function successCallback(response) {
    $scope.data = response.data;
  }, function errorCallback(response) {
    alert('something odd happens.');
  });
};

你的HTML中的

<div ng-bind-html="data">
</div>

或者如果您想填写表单输入：

<input type="text" ng-model="data" />

Answer 2

这有点棘手，因为你必须使用承诺（.then），但这里是一个非常简单的“获取”#t;＆＃39;示例

在服务上：

function mainService($http) {

  this.getData = function () {

    return $http.get('/api/yourUrl') //a basic 'get' api call
        .then(function (response) { //it takes time, so include a promise
            return response.data; 
        });
  };
}

和控制器：

function homeController($scope, friendService) {

$scope.getData = function () {

    mainService.getData()
        .then(function (data) { //you also need a promise on controller

            $scope.ourData = data; //finally put what you get on your scope
        });
  };
}

请注意，这些示例并未显示控制器和服务的定义 - 如果您感到困惑，请告诉我。

Answer 3

根据我的理解，我建议要记住一些事情。可能不是你想要的，但它可能会有所帮助。

ng-init被称为控制器内部的第一件事。您可以使用promise，以防必须保持同步。
如果您不想接受承诺，只需从控制器进行$http调用，因为它默认使用.success＆amp;处理承诺。 .error功能。

如果某个$scope变量位于服务内，则不能指望它在html下有效。参考文档。

var mainApp = angular.module("mainApp",[]);
mainApp.controller("serviceController",function($scope,$http){
      $http.get("/fetchData_url/").success(function(response){
        $scope.data = response;
     });
});

启动使用发出HTTP请求的服务的AngularJS控制器函数的最佳方法是什么

3 个答案: