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

This blog is part of 1 Tute Sets.

AngularJs tutorials
  • Tutorial 2- AngularJS Directives

    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 161
    Comment on it

    Hi all,

    In this we will discuss about Directives. Directives are core features of AngularJS.

    Directive is introduced as a new syntax. They are markers on a DOM element which have a special behavior to it. Just for an example only HTML don't know how a date picker will perform, so for that we need directives.

    AngularJS directives controls the rendering of HTML inside an AngularJS application. You can implement your own directives too.

    Here are main four types of directives:

    • Element directives
    • Attribute directives
    • CSS class directives
    • Comment directives

    ng-app -

    The directive initializes an AngularJS application. the ng-app describe in the root element for example in html or body start tag, and it tells angularJs that div or element are owner of angular application. Only one AngularJS application can be auto-bootstrapped per HTML document.

    Example :-

    <section ng-app="">
    
    <p><input type="text" ng-model="name"></p>
    <p>your name: {{ name }}</p>
    
    </section> 
    

    ng-model -

    Binds values of HTML controls like input, textarea, select to application data or in other way you can say this directive defines the model/variable to be used.

    Example :-

     <div ng-app="">
    
    <p>Name: <input type="text" ng-model="name"></p>
    <p>Your name : {{ name}}</p>
    
    </div> 
    

    ng-init -

    This directive initialize the application data it means ng-init defines initial values for AngularJS app. usually we will not use ng-init instead of this we will use controller or module.

    Example :-

    <div ng-init="name=['mukul' , 'kant' , 'evon' , 'technologies']" >
          <ul>
            <li ng-repeat="names in name">{{names}}</li>
          </ul>
        </div>
    

    ng-repeat

    ng-repeat simply repeat a html element it means this works like a loop.

      <div ng-init="name=['mukul', 'kant','is','here']" >
          <ul>
            <li ng-repeat="names in name">{{names}}</li>
          </ul>
        </div>
    

    in this example li will repeat with all array data.

    Tutorial 3- AngularJS Directives

 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: