Front End, IT, Uncategorized

(6) Data binding using {{expression}}

  • Data binding binds AngularJS expressions with AngularJS data.
  • {{ X }} is bound with ng-model=”X”.
  • In the following example:
  • {{favc}} is bound with ng-model=”favc”.
  • Notice that there is a default value id defined using ng-init=”favc=’Pink’. Try to modify the default color value.
  • Also, notice that ng-app=”” is defind for the main div.
Front End, IT, Uncategorized

(5) AngularJS Expressions (ng-bind)

  • AngularJS expressions can also be written inside a directive: ng-bind=”expression”.
  • In the following example, the user will enter the first name and last name in two separated input fields. A paragraph will be generated that contain: Your name is “firstName” “lastName”.
  • Try to do the same function using {{expression}} format.

 

Front End, IT

(4) AngularJs Expressions {{Expression}}

  • AngularJS binds data to HTML using Expressions.
  • AngularJS expressions can be written inside double braces: {{ expression }}.
  • AngularJS solve the expression, and return the result.
  • AngularJS expressions can contain literals, operators, and variables like JavaScript expressions.
  • If you remove the ng-app directive, HTML will display the expression as it is, without solving it.
  • Look at the following code, and review the used expressions.
  • Note: Notice that ng-app is written inside the html tag, as we use more than one div. Try to write it in anther tag, such as in the first div only.
expressions
AngularJs Expressions

Continue reading “(4) AngularJs Expressions {{Expression}}”

Front End, IT

(2) AngularJs Introduction – ng-directives

  • AngularJS extends HTML with ng-directives.
  • AngularJS directives are HTML attributes with an ng prefix such as (ng-app, ng-model, ng-bind).
  • ng-app: defines an AngularJS application.
  • ng-model: binds the value of HTML controls (input, select, textarea) to application data.
  • ng-bind: binds application data to the HTML view.
  • ng-init:  initializes AngularJS application variables.
1edit
AngularJs ng-directives

Continue reading “(2) AngularJs Introduction – ng-directives”

Front End, IT

(1) What is AngularJs?

  • Before learning AngularJs, you should already learn HTML, CSS, and JavaScript.
  • AngularJS is a JavaScript-based open-source front-end web application framework mainly maintained by Google.
  • It is easy to learn.
  • It extends HTML with new attributes.
  • You can view some websites that are built using AngularJs: madewithangular
  • You can download AngularJs from https://angularjs.org/.
  • You can download the script file and save it locally and call it in your  html file using script tag.
  • You can include CDN link directly to your html file using script tag (You can get it from http://www.angularjs.org).
  • Review and try the following simple code: