AngularJS Program 1 – Display basic html content


To download the bootstrap.css file – Click Here

To download the angular.js file – Click Here


Double-curly binding is used to write an expressions in AngularJS.

Html-List.html

<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>My HTML File</title>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="lib/angular/angular.js"></script>
</head>
<body>

    <p>Nothing here {{'yet' + '!'}}</p>
    
    <p>1 + 2 = {{ 1 + 2 }}</p>
    

    <p>Total number of phones: 2</p>
    
    <ul>
    
        <li>
        <span>Nexus S</span>
        <p>
        Fast just got faster with Nexus S.
        </p>
        </li>
        

        <li>
        <span>Motorola XOOM&#8482; with Wi-Fi</span>
        <p>
        The Next, Next Generation tablet.
        </p>
        </li>
        
    </ul>
     
</body>
</html>

    



app.css

/* app css stylesheet */

body {
  padding-top: 20px;
}

.phones {
  list-style: none;
}

.thumb {
  float: left;
  margin: -1em 1em 1.5em 0em;
  padding-bottom: 1em;
  height: 100px;
  width: 100px;
}

.phones li {
  clear: both;
  height: 100px;
  padding-top: 15px;
}


 

You can leave a response, or trackback from your own site.

Leave a Reply