Archive for the ‘AngularJS’ Category

AngularJS Program 3 – Filtering Repeaters

filter-AngularJS.html

<html ng-app>
<head>
<script src="lib/angular/angular.js"></script>
<script src="js/controllers.js"></script>
<title ng-bind-template="Google Phone Gallery: {{query}}">Google Phone Gallery</title>
</head>
<body ng-controller="PhoneListCtrl">
    
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span2">
                <!–Sidebar content–>
     
                Search: <input ng-model="query">
     
            </div>
            <div class="span10">
                <!–Body content–>
                
                <p>Total number of phones: {{phones.length}}</p>
                
                <ul class="phones">
                <li ng-repeat="phone in phones | filter:query">
                {{phone.name}}
                <p>{{phone.snippet}}</p>
                </li>
                </ul>
     
            </div>
        </div>
    </div>
    

Read more »

AngularJS Program 2 – Loop using ng-repeat and ng-controller directives

repeat-AngularJS.html

<html ng-app>
<head>
<script src="lib/angular/angular.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-controller="PhoneListCtrl">
    
    <p>Total number of phones: {{phones.length}}</p>
    <hr />
    <ul>
        <li ng-repeat="phone in phones">
        {{phone.name}}
        <p>{{phone.snippet}}</p>
        </li>
    </ul>
    <hr />
    Binding Value : {{hello}}
    <hr />
    <table border="1">
        <tr>
            <th>Row Number</th>
        </tr>
        <tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]">
            <td>{{'Row : ' + i}}</td>
        </tr>
    </table>
 

Read more »

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>
        

Read more »