{"id":37,"date":"2018-09-20T19:18:00","date_gmt":"2018-09-20T19:18:00","guid":{"rendered":"https:\/\/kindsonthegenius.com\/blog\/2018\/09\/20\/angularjs-tutorial-for-beginners-5-angularjs-expressions\/"},"modified":"2019-02-13T05:15:04","modified_gmt":"2019-02-13T04:15:04","slug":"angularjs-tutorial-for-beginners-5-angularjs-expressions","status":"publish","type":"post","link":"https:\/\/kindsonthegenius.com\/blog\/angularjs-tutorial-for-beginners-5-angularjs-expressions\/","title":{"rendered":"AngularJS Tutorial for Beginners 5 – AngularJS Expressions"},"content":{"rendered":"

This lesson would be brief and contains a simple exercise, make sure you do it.<\/p>\n

<\/ins>
\nAngularJS Expressions are expression written inside a normal html file but are interpreted by AngularJS. AngularJS expressions are enclosed in double curly braces like this:<\/p>\n

<\/div>\n
{{ expression }}<\/span><\/div>\n
\n
<\/div>\n<\/div>\n
They can also be written inside a directive using an assignment operator, for example:<\/div>\n
<\/div>\n
ng-model = {{ expression }}<\/span><\/div>\n
<\/div>\n
AngularJS will evalulate the expression, and output the result exactly where the expression is written in the html file.<\/div>\n
<\/div>\n
\n

AngularJS expression can contain strings, numbers, operators and other variables.<\/p>\n

Examples of AngularJS expressions are:<\/p>\n<\/div>\n

{{ 88 \/ 4 }}<\/span>
\n{{ firstname + “, ” + lastname }}<\/span>
\n{{ (2 * 5)\/10 }}<\/span><\/p>\n

<\/div>\n
Exercise<\/b><\/div>\n
This exercise follows from Lesson 4.<\/div>\n
Create a new file in the same folder you placed Lesson 4 and save it as Lesson5.html.<\/div>\n

 <\/p>\n

Place the following code in this file and take some time to go through the code to understand how the angularJS expressions are formed. Also take not of the use of arrays.<\/div>\n
\n

<\/p>\n

\n
<!doctype html><\/span><\/pre>\n
<html<\/span> ng-app<\/span>><\/span>
\n<head><\/span>
\n<title><\/span>AngularJS Tutorial for Beginners<\/title><\/span><\/p>\n
<script <\/span>src=<\/span>“angular.min.js”<\/span>><\/script><\/span>
\n<script <\/span>src=<\/span>“Scrips.js”<\/span>><\/script><\/span><\/p>\n
<\/head><\/span><\/p>\n
<body><\/span>
\n<h1><\/span>AngularJS Expression – Lesson 5<\/h1><\/span><\/p>\n
<div<\/span> ng-app =<\/span> “”<\/span> ng-init =<\/span> “quantity = 1; price = 30; student = {firstname:’Kindson’,lastname:’Munonye’,regno:242}; code = ‘CS101’; scores = [80,90,75,73,60]”<\/span>><\/span>
\n<p><\/span>Student {{student.firstname + ” ” + student.lastname}}!<\/p><\/span>
\n<p><\/span>Code: {{code}}<\/p><\/span>
\n<p><\/span>Cost on Books : {{price * quantity}} USD<\/p><\/span>
\n<p><\/span>Reg No: {{student.regno}}<\/p><\/span>
\n<p><\/span>Scores(English): {{scores[2]}}<\/p><\/span>
\n<\/div><\/span>
\n<\/body><\/span>
\n<\/html><\/span><\/p>\n<\/div>\n
<\/ins>
\nNote on Arrays <\/b>
\nArrays are used in the same way in AngularJS as in JavaScript. In the example, a one-dimensional array called scores has been initialized:<\/p>\n
scores = [80,90,75,73,60]<\/span><\/pre>\n
To refer to a single element of the array you can use the index of the array and remember the the first element of the array has an index of 0.
\nSo scores[0] refers to 80
\nscores[1] refers to 90 and so on.<\/p>\n
I hope that by now you are very clear with AngularJS expressions. If you have any challenge, do leave a comment below. In Lesson 6, we would then examine angularJS controllers in more details.\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"
This lesson would be brief and contains a simple exercise, make sure you do it. AngularJS Expressions are expression written inside a normal html file … <\/p>\n","protected":false},"author":2,"featured_media":486,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[113],"tags":[],"_links":{"self":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/37"}],"collection":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/comments?post=37"}],"version-history":[{"count":2,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/37\/revisions"}],"predecessor-version":[{"id":487,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/37\/revisions\/487"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/media\/486"}],"wp:attachment":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/media?parent=37"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/categories?post=37"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/tags?post=37"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}