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

    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 219
    Comment on it

    Hii,

    This blog is in continuation with my previous introductory blog on angularJs, in this blog  I will discuss about directives in angularJs.

    Directives:

    In angularJs "Directives" are used to extend the functionality of a HTML static document by binding data to HTML with some expressions..
    We can use it in two ways either we can define our own directory or we can use the set of built-in directives.
    ng-app,ng-init,ng-model etc are built-in directives of angularjs.

     

    Here's an example of angularjs using directive code:
    In this example we had used few angularjs built-in directives


    1)ng-app directive is used to initialise an AngularJS application.

    2) ng-init directive is used to initialise application data.

    3) ng-model directive is used to bind any html control's value to an application data.

    4) ng-bind directive is used to bind an application data to the HTML view.

    Note: Must inclue this link in your document when you are using angularjs.

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

     

    Example: In this example, user can input their name dynamically in the input box given below,thier name will appear as output.

    Html:

    <div ng-app="" ng-init="Name='Ram'">
    <p>Input something in the input box:</p>
    <p>Name: <input type="text" ng-model="Name"></p>
    <p ng-bind="Name"></p>
    </div>

     

    Output:

    Input something in the input box:

    Name:[Sita] <-------this is an input box,whatever name you will input, the output is as written below:

    Sita

 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: