Question

从页面https://docs.angularjs.org/guide/bootstrap上提供的示例中，我可以看到像这样的手动初始化

<!doctype html>
<html>
<body>
  Hello {{'World'}}!
  <script src="http://code.angularjs.org/angular.js"></script>

  <script>
    angular.module('myApp', [])
      .controller('MyController', ['$scope', function ($scope) {
        $scope.greetMe = 'World';
      }]);

    angular.element(document).ready(function() {
      angular.bootstrap(document, ['myApp']);
    });
  </script>
</body>
</html>

实际上它不能正常工作，但无论如何我想让它像这样工作，我不想在ng-controller指令中明确指定我的控制器只是为了让它在那里。我想将此控制器绑定到整个页面，而无需使用HTML进行额外操作。因为我只想将它用于ajax调用。有可能吗？

Answer 1

浏览器无法找到资源http://code.angularjs.org/angular.js 查看浏览器上的网络面板（开发人员工具）是否返回404错误。试试https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.6/angular.min.js

Answer 2

如果要创建专门用于AJAX调用的对象，那么您应该查看AngularJS services。服务是可以注入控制器，其他服务和指令的对象，它们通常提供某种可重用的功能（在您的情况下，它将提供AJAX功能）。

控制器的目的是提供与视图交互的逻辑。如果您正在创建一个不以某种方式与视图交互的控制器，那么您做错了。

您的ajax服务可能如下所示：

<script>
    var myApp = angular.module('myApp', [])
        // notice the inclusion of 'myAjax' here. This is where we are injecting our
        // custom service that me made.
        .controller('MyController', ['$scope', 'myAjax', function ($scope, myAjax) {

            $scope.url = 'cutepuppies.com';
            $scope.params = {
                cutenessLevel: 'extraCute'
            };

            function successcb(data, status, headers, config) {
                //something on success
            }
            function failure(data, status, headers, config) {
                //something on failure
            }
            $scope.get = function () {
                // This is where we use our service to make an ajax call!
                // We also pass in 2 callbacks, one to be called on success and one on error
                myAjax.get($scope.url, $scope.params, successcb, failurecb);
            }
        }]);

    // Here we define our service. This is what we will use in our app to make ajax calls.
    myApp.service('myAjax', ['$http', function ($http) {
        return {
            get: function (url, params, successcb, failurecb) {
                $http.get({
                    method: 'GET',
                    url: url,
                    params: params
                })
                .success(successcb)
                .error(failurecb);
            }
        }
    });

</script>

这是指向$ http服务的链接，供参考：https://docs.angularjs.org/api/ng/service/$http

AngularJS手动初始化

2 个答案: