AngularJS |指示

AngularJS是一个开源MVC框架，与JavaScript框架非常相似。
指令是DOM元素上的标记，它告诉Angular JS将指定的行为附加到该DOM元素，甚至使用其子元素转换DOM元素。简单的AngularJS允许使用称为“指令”的新属性扩展HTML。 AngularJS具有一组内置指令，这些指令为应用程序提供功能。它还定义了自己的指令。
可以使用一些函数来定义指令，这些函数包括：元素名称，属性，类，注释。

为什么要使用它?

• 它支持为不同类型的元素创建自定义指令。
• 当相同的元素或匹配的元素位于前面时，指令将被激活。
• 通过帮助他们使用新的语法，它可以赋予HTML更多的功能。
• 指令类(如组件类)可以实现生命周期挂钩，以影响其配置和行为。

指令组件： AngularJS指令使用前缀ng-扩展属性。下面讨论了一些指令组件：

• ng-app：这是一个自动引导的AngularJS应用程序，它表示所有AngularJS都应具有根元素。

  例子：

   
        
   
      AngularJS ng-app Directive 
    
       
       
   
    
   
        
      ng-app directive 
        
       
          {{ name }} is the portal for geeks. 
       
   
    
   

  输出：
  

• ng-controller： AngularJS中的ng-controller指令用于将控制器添加到应用程序。它可用于添加可在某些事件(例如单击等)上调用的方法，函数和变量，以执行特定操作。

  例子：

   
   
    
   
      ng-controller Directive 
    
       
       
   
    
   
        
      GeeksforGeeks 
      ng-controller Directive 
        
       
          Name:  
           
            
          You entered: {{name}} 
       
        
       
          var app = angular.module('app', []); 
          app.controller('geek', function ($scope) { 
              $scope.name = "geeksforgeeks"; 
          }); 
       
   
    
   

  输出：
  

• ng-bind：用于将特定元素的文本内容与在给定表达式中输入的值绑定/替换。每当ng-bind指令中表达式的值更改时，指定的HTML内容的值就会更新。

  例子：

   
   
        
   
      ng-checked Directive 
    
       
       
   
    
   
        
      GeeksforGeeks 
      ng-bind Directive         
        
       
          num1:  
           
            
          num2:  
           
            
          Product:  
       
        
       
          var app = angular.module("gfg", []); 
          app.controller('app', ['$scope', function ($app) { 
              $app.num1 = 1; 
              $app.num2 = 1; 
              $app.product = function () { 
                  $app.result = ($app.num1 * $app.num2); 
              } 
          }]); 
       
   
    
   

  输出：
  

AngularJS指令的优点：

• 指令有助于创建重复和独立的代码。
• 他们通过将特定于需求的行为功能整合到一处，从而对代码进行模块化。它不会在中央控制器中创建对象，也不会使用多种JavaScript方法来操作它们。
• 这种类型的模块化代码将具有可以处理其自身功能和数据的多个指令，并且工作应与其他指令隔离。
• 另外一个好处是，HTML页面和Angular脚本变得不那么混乱，而且组织得更好。