Tuesday, 27 June 2017

AngularJS - Expressions

AngularJS - Expressions


Using numbers

<p>Expense on Books : {{cost * quantity}} Rs</p>

Using strings

<p>Hello {{student.firstname + " " + student.lastname}}!</p>

Using object

<p>Roll No: {{student.rollno}}</p>

Using array

<p>Marks(Math): {{marks[3]}}</p>

Example

Following example will showcase all the above mentioned expressions.
testAngularJS.htm
<html>
   
   <head>
      <title>AngularJS Expressions</title>
   </head>
   
   <body>
      <h1>Sample Application</h1>
      
      <div ng-app = "" ng-init = "quantity = 1;cost = 30; student = {firstname:'Mahesh',lastname:'Parashar',rollno:101};marks = [80,90,75,73,60]">
         <p>Hello {{student.firstname + " " + student.lastname}}!</p>
         <p>Expense on Books : {{cost * quantity}} Rs</p>
         <p>Roll No: {{student.rollno}}</p>
         <p>Marks(Math): {{marks[3]}}</p>
      </div>
      
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      
   </body>
</html>

Output

Open textAngularJS.htm in a web browser. See the result.

Related Posts:

  • AngularJS - MVC Architecture AngularJS - MVC Architecture Model View Controller or MVC as it is popularly called, is a software design pattern for developing web … Read More
  • AngularJS - First Application AngularJS - First Application Before we start with creating actual HelloWorld application using AngularJS, let us see what are the actual parts o… Read More
  • AngularJS - Environment Setup Try it Option Online You really do not need to set up your own environment to start learning AngularJS. Reason is very simple, we already have set… Read More
  • AngularJS - Overview What is AngularJS? AngularJS is an open source web application framework. It was originally developed in 2009 by Misko Hevery and Adam Abrons. It i… Read More
  • Angularjs - Home AngularJS Tutorial AngularJS is a very powerful JavaScript Framework. It is used in Single Page Application (SPA) projects. It extends HTML … Read More

0 comments:

Post a Comment