为什么我们需要angularJS中的指令?

时间:2016-12-11 06:40:17

标签: angularjs angularjs-directive

我是angularJS的新手,所以读过这篇文章的人可能觉得这是一个愚蠢的问题。

但google返回的问题的答案实际上并没有回答我的问题。

以下链接表示服务应在应用程序增长时使用。

Reference

精细。如果是这样,服务将成为更大应用的选择。

根据我的理解,Directive只不过是一个可以用于DOM操作的角度块。

为什么我可以在服务中做同样的事情时选择这个?

我是否应该在需要执行数据库操作并将数据填充回html控件时使用指令?

如果我想从angular进行REST API调用,我应该在哪里编写这些方法?

4 个答案:

答案 0 :(得分:4)

AngularJS 指令允许我们从字面上“指导”AngularJS将用户定义的行为与DOM元素相关联 - 为在Web应用程序中创建和使用自定义元素提供了极大的灵活性。

然而,服务将服务。您可以提供服务来处理您不希望在每个控制器中重复的重复和繁琐的任务(应用程序代码直接与视图交互的部分)。

  

如果我想从angular进行REST API调用,我应该写   那些方法?

那么,

您可以看到内置服务,例如 ng-resources ,这有助于对服务器进行简单的api调用,即ajax调用。

答案 1 :(得分:1)

您可以使用指令创建自己的HTML元素,属性,类或注释,以执行特殊操作。您甚至可以让其他人重复使用此指令。

让我们说,我想要一个指令,只要我点击输入框就会自动选择所有文本。让我们称这个指令为select-all。让我们说,这是一个属性指令。

如果我使用此指令,我的DOM看起来像

<input type='text' select-all></input>

那就是它。您不需要知道select-all的代码所在的位置。您不必担心与其工作方式有关的任何事情。只需在您想要的任何元素中插入属性select-all,它就像魔法一样。

这是指令之美。您可以使用它来创建可重用的Web组件。

答案 2 :(得分:1)

除了提供的答案之外,在考虑创建新指令时,请考虑改为创建组件:

  • 配置稍微容易一些
  • 强制执行一些最佳做法
  • 推广基于组件的架构
  • 为未来做好准备:与Angular 2的工作方式更加兼容

可以在components documentation中找到更多信息,您可以在其中逐步了解如何构建组件。

要调用REST API,您可以使用$http服务。可以找到文档here。这是详尽的,所以我建议从here快速入手。

答案 3 :(得分:0)

以下是使用ServiceController进行REST调用的示例。

// the controller
(function(ng, undefined){
        "use strict";
            ng.module("app").controller('MyController', ['$scope',  'MyService', 
                function($scope, MyService){

                    $scope.myModel = {};// where you store your data

                    // call the service to retrieve data
                    MyService.getResourcesDataById( 187, function (result) {
                        $scope.myModel.data = result; // assign result
                    });
            }]);
})(angular);

// the service
(function(ng, undefined){
    "use strict";
        ng.module('app').factory("MyService", ["$http", function($http){

            return {
                getResourcesDataById : function(pId, fct){
                    // make the call
                    $http({
                        method: 'GET',
                        url: '/resources/data',
                        params: {
                            id : pId                        }
                    })

                    .then(function(data){
                        // callback function with the result
                        fct(data);
                    })
                }
            }
        }])

})(angular);