Archive for July, 2013

AngularJS Program 6 – Multiple view pages using ng-view directive

multipleViews-AngularJS.html

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

  <div ng-view></div>

</body>
</html>


app.css

/* app css stylesheet */

body {
  padding-top: 20px;
}

Read more »

AngularJS Program 5 – Fetch data from json Data Set

jsonDataSet-AngularJS.html

<html ng-app>
<head>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="lib/angular/angular.js"></script>
<script src="js/jsonDataset_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" />
                Sort by:
                <select ng-model="orderProp">
                    <option value="name">Alphabetical</option>
                    <option value="snippet">Snippet</option>
                    <option value="age">Newest</option>
                    <option value="-name">Desc Alphabetical</option>
                    <option value="-snippet">Desc Snippet</option>
                    <option value="-age">Desc Newest</option>
                </select>             

Read more »

AngularJS Program 4 – Filtering Repeaters with Sorting

sorting-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">
                Search: <input ng-model="query">
                Sort by:
                <select ng-model="orderProp">
                    <option value="name">Alphabetical</option>
                    <option value="snippet">Snippet</option>
                    <option value="age">Newest</option>
                    <option value="-name">Desc Alphabetical</option>
                    <option value="-snippet">Desc Snippet</option>
                    <option value="-age">Desc Newest</option>
                </select>
                
                
                <ul class="phones">
                    <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">{{phone.name}}
                    <p>{{phone.snippet}}</p>
                    </li>
                </ul>
        </div>
    </div>
    

Read more »