Angular JS.docx - AngularJS is a JavaScript Framework AngularJS is a JavaScript framework It is a library written in JavaScript AngularJS is distributed

Angular JS.docx - AngularJS is a JavaScript Framework...

This preview shows page 1 - 3 out of 9 pages.

AngularJS is a JavaScript Framework AngularJS is a JavaScript framework. It is a library written in JavaScript. AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag: < script src =" .9/angular.min.js">< /script > AngularJS Extends HTML AngularJS extends HTML with ng-directives . The ng-app directive defines an AngularJS application. The ng-model directive binds the value of HTML controls (input, select, textarea) to application data. The ng-bind directive binds application data to the HTML view. < !DOCTYPE html > < html > < script src =" .9/angular.min.js">< /script > < body > < div ng-app =""> < p > Name: < input type ="text" ng-model ="name">< /p > < p ng-bind ="name">< /p > < /div >
Image of page 1
< /body > < /html > Example explained: AngularJS starts automatically when the web page has loaded. The ng-app directive tells AngularJS that the <div> element is the "owner" of an AngularJS application . The ng-model directive binds the value of the input field to the application variable name . The ng-bind directive binds the content of the <p> element to the application variable name . AngularJS Directives As you have already seen, AngularJS directives are HTML attributes with an ng prefix. The ng-init directive initializes AngularJS application variables. < div ng-app ="" ng-init ="firstName='John'"> < p > The name is < span ng-bind ="firstName">< /span >< /p >< /div > Alternatively with valid HTML: < div data-ng-app ="" data-ng-init ="firstName='John'"> < p > The name is < span data-ng-bind ="firstName">< /span >< /p >< /div > You can use data-ng-
Image of page 2
Image of page 3

You've reached the end of your free preview.

Want to read all 9 pages?

  • Summer '17
  • Amila

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture