Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Angular Directives

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 340
    Comment on it

    Hello everyone , here we are going to take an overview of directives in angularjs. Angularjs provides us with a set of built-in directives which provides functionality to our application.We can also define our own directives in angularjs.

     

    We can create a new directive by using the .directive function.If we want to invoke the new directive we have to make an HTML element with the same tag name as that of the directive.To name the directive we use a camel case name and to invoke it we use "-".

    <body ng-app="myNewApp">
    
      <test-directive></test-directive> #here we are invoking the directive so we are using a dash       symbol
    
      <script>
       var app = angular.module("myNewApp", []);
       app.directive("TestDirective", function() {   #here we have named the directive
         return {
            template : "<h1>This is a test directive!</h1>"
          };
       });
     </script>
    
    </body>

     

    AngularJs Directive are prefixed with ng-

    1. ng-app directive
    2. ng-init directive
    3. ng-model directive
    • The ng-app directive helps us to initialize an angularjs application.
    <div ng-app = "testApp">
    </div>

     

    • The ng-init directive helps us to initialize an application data.
    <div ng-app="testApp" ng-init="firstName='Rahul'">
      <p>Your First Name is : {{ firstName }}</p>
    </div>
    

     

    • The ng-model directive helps us to bind the value of HTML controls to application data.
    <div ng-app="testApp" ng-init="firstName='Rahul'">
      <p>Name: <input type="text" ng-model="firstName"></p>
      <p>Your First Name is : {{ firstName }}</p>
    </div>

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: