Post
Ask Question

How to add static contents in AngularJs code

This code snippet is a reply to one of questions asked via an energetic email.
 
AngularJs is a robust framework, which provides great feature to develop web applications. Sometime we need to add / show static contents on our webpage/webapp. AngularJS provides a simple way to do the same:
 
  1. <tr>  
  2.        <td height="26">Current Release ver.:</td>  
  3.         <td>1.3.1 (as of dt. {{"Nov 07, 2014"}})</td>  
  4.  </tr> 
 In above curly braces will display the things as it is i.e. : Nov 07, 2014
 
 Following is the complete snippet defining a table with static contents:
 
  1. <body ng-app>  
  2.     <div>  
  3.         <h1>Here is a simple html table as on {{"November 07, 2014"}}</h1>  
  4.         <table>  
  5.             <caption><b>Importants of Angular JS</b></caption>  
  6.             <tbody>  
  7.                 <tr>  
  8.                     <td height="26">Official Name:</td>  
  9.                     <td>AngularJS</td>  
  10.                 </tr>  
  11.                 <tr>  
  12.                     <td height="26">Written or maintained by:</td>  
  13.                     <td><a href="href=http://www.google.co.in/about/company/" title="Google Inc." target="_blank">Google Inc.</a></td>  
  14.                 </tr>  
  15.                 <tr>  
  16.                     <td height="26">Released on:</td>  
  17.                     <td>2009</td>  
  18.                 </tr>  
  19.                 <tr>  
  20.                     <td height="26">Current Release ver.:</td>  
  21.                     <td>1.3.1 (as of dt. {{"Nov 07, 2014"}})</td>  
  22.                 </tr>  
  23.                 <tr>  
  24.                     <td height="26">Develop using:</td>  
  25.                     <td>Javascript</td>  
  26.                 </tr>  
  27.                 <tr>  
  28.                     <td height="26">Type:</td>  
  29.                     <td>Client side/cross-platform</td>  
  30.                 </tr>  
  31.                 <tr>  
  32.                     <td height="26">Links</td>  
  33.                     <td width="676">  
  34.                         <a href="http://angularjs.org">angularJS</a>  
  35.                         <a href="http://doc.angularjs.org">documentation</a>  
  36.                     </td>  
  37.                 </tr>  
  38.             </tbody>  
  39.         </table>  
  40.     </div>  
  41.   
  42.     <div>  
  43.         <table>  
  44.             <caption><b>Can do using angularJS</b></caption>  
  45.             <tbody>  
  46.                 <tr>  
  47.                     <td height="26">Sum</td>  
  48.                     <td>1 + 9 = {{1+9}}</td>  
  49.                 </tr>  
  50.                 <tr>  
  51.                     <td height="26">Minus</td>  
  52.                     <td>1 - 9 = {{1-9}}</td>  
  53.                 </tr>  
  54.                 <tr>  
  55.                     <td height="26">Multiply</td>  
  56.                     <td>1 X 9 = {{1*9}}</td>  
  57.                 </tr>  
  58.                 <tr>  
  59.                     <td height="26">Divide</td>  
  60.                     <td>1 / 9 = {{1/9}}</td>  
  61.                 </tr>  
  62.             </tbody>  
  63.             <p>and these are only few examples see source code of above and you can see the magic of { { } } curly braces</p>  
  64.         </table>  
  65.     </div>  
  66.     <script src="Scripts/angular.min.js"></script>  
  67. </body>  

 
 
 
 
 
Please note that - we can achieve the same thing using simple HTML. Here we saw one of the great feature of AngularJS