FALLSEM2020-21_ITE1002_ETH_VL2020210105029_Reference_Material_I_03-Sep-2020_Angular_JS__directives-D - Download Angular JS Library Download it from

FALLSEM2020-21_ITE1002_ETH_VL2020210105029_Reference_Material_I_03-Sep-2020_Angular_JS__directives-D

This preview shows page 1 - 8 out of 23 pages.

Download Angular JS Library R.Vijayani / Asso Prof / SITE / VIT 23 Download it from AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag: <script src=" ngularjs/1.8.0/angular.min.js "></script>
Image of page 1
The AngularJS Components R.Vijayani / Asso Prof / SITE / VIT 24 AngularJS extends HTML with ng-directives . The AngularJS framework can be divided into following three major parts ng-app This directive defines and links an AngularJS application to HTML. Or AngularJS that the an HTML container element is the "owner" of an AngularJS application . ng-model This directive binds the values of AngularJS application data to HTML input controls . Or binds the value of the input field to the application variable. ng-bind This directive binds the AngularJS Application data to HTML tags. Or binds the content of the HTML element to the application variable.
Image of page 2
R.Vijayani / Asso Prof / SITE / VIT 25 <html><head> <script src = "" ></script> </head> <body><h1>Sample Application</h1><div ng-app = "" > <p>Enter your Name: <input type = "text" ng-model = "name" ></p> <p>Hello <span ng-bind = "name" ></span>!</p></div> </body> </html> ng-app directive indicates the start of AngularJS application. ng-model directive then creates a model variable named "name" which can be used with the html page and within the div having ng-app directive. ng-bind then uses the name model to be displayed in the html span tag whenever user input something in the text box.
Image of page 3
R.Vijayani / Asso Prof / SITE / VIT 26
Image of page 4
AngularJS Expressions can be written inside double braces: {{ expression }} or ng-bind="expression" <html ng-app ><head> <script src = " ular.min.js"></script> </head><body><div><label>Name:</label> <input type = "text" ng-model = "NameText" placeholder = "Enter a name here"> <hr /><h1>Hello {{ NameText }} !</h1> </div></body></html> R.Vijayani / Asso Prof / SITE / VIT 27
Image of page 5
AngularJS Directives R.Vijayani / Asso Prof / SITE / VIT 28 AngularJS directives are HTML attributes with an ng prefix . The ng-init directive initializes AngularJS application variables. <!DOCTYPE html> <html> <script src=" in.js"></script> <body> <div ng-app="" ng-init="firstName='John'" > <p>The name is <span ng-bind="firstName" ></span></p> </div></body></html>
Image of page 6
R.Vijayani / Asso Prof / SITE / VIT 29 <!DOCTYPE html> <html><script src=" .js"></script><body> <p>Change the value of the input field:</p> <div ng-app="" ng-init="myCol='lightblue'" > <input style="background-color:{{myCol}}" ng-model="myCol" > </div> <p>AngularJS resolves the expression and returns the result.</p>
Image of page 7
Image of page 8

You've reached the end of your free preview.

Want to read all 23 pages?

  • Spring '19
  • AngularJS, ng-directives,  AngularJS

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture