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

This blog is part of 1 Tute Sets.

Angularjs for Beginners
  • Chapter 2: What is Angular Js and Directives with example

    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 499
    Comment on it

    Angularjs is a javascript library which is perfect for single page application(SAPs). Angularjs is nothing just a javascript library which extends HTML with new markups. Single page application are those web application which will load a single web page and dynamically call other pages when user interacts with application, this shows that many of the works happens on the client side in javascript.

     

    In simple word we can say that Angularjs is a client side javascript framework for adding interactivity to framework.

    Lets take a small example and step by step to write a small example with explanation.

    <html>
      <head>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      </head>
      <body>
          <div ng-app ng-init="qty=1;cost=2">
              <b>Invoice:</b>
              <div>
                Quantity: <input type="number" min="0" ng-model="qty">
              </div>
                <div>
                Costs: <input type="number" min="0" ng-model="cost">
              </div>
                <div>
                <b>Total:</b> {{qty * cost | currency}}
              </div>
        </div>
     </body>
    </html>


    In the above code in <head></head> I have used one angular.min.js which is used for using angularjs framework. Then in <body></body> section we will see the <div></div>

     

    <div ng-app ng-init="qty=1;cost=2">

    There in <div> we can see we have ng-app and ng-init that are called as directives. Directives are the marker on the Html tag that tells angular to run or reference javascript code.

    This is the basic example of angular in which we have used directives and regular expression.

 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: