<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- Required for bootstrap -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<script data-require="angular.js@1.6.5" data-semver="1.6.5" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="script.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body ng-app="myApp">
<div class="container-fluid">
<div class="jumbotron">
<h1>Angular JS and Bootstrap</h1>
</div>
<my-custom-angular-directive></my-custom-angular-directive>
<section class="well well-sm">Data Binding</section>
<div ng-controller="personCtrl" style="margin:15px">
<!-- Binding to a style attribute -->
<p class="topic">Binding to a style attribute using an expression and two-way binding 'ng-model'.</p>
<p>When you type an HTML color into the input box, below, the value of the background property will be changed.</p>
<code>
<input style="background:<span>{</span>{color}}" ng-model="color" value="<span>{</span>{color}}"/>
</code>
<form style="margin:15px;">
Type a color to change the background:
<br>
<input style="background:{{color}}" type="text" ng-model="color" value="{{color}}" />
</form>
<!-- Two-way binding using "ng-model" -->
<p class="topic">Two-way binding using "ng-model"</p>
<p>When you type something in the two input boxes below the model will be updated reflecting the change below the input boxes.</p>
<code>
<input ng-model="firstName"><br>
<input ng-model="lastName" >
</code>
<form>
First name:
<br>
<input ng-model="firstName">
<br> Last name:
<br>
<input ng-model="lastName">
</form>
<!-- One-way binding using "ng-bind" -->
<p class="topic">One-way binding using "ng-bind"</p>
<code>
First name: <span ng-bind="firstName"></span></p>
<br>Full name: <span ng-bind="firstName + ' ' + lastName"></span></p>
</code>
<p class="exampleFont exampleBlock">First name: <span ng-bind="firstName"></span></p>
<p class="exampleFont exampleBlock">Full name: <span ng-bind="firstName + ' ' + lastName"></span>
</p>
<!-- One-way binding using an "expression" -->
<p class="topic">One-way binding using an "expression"</p>
<code>
First name: <span>{</span>{firstName}}</p>
<br>Full name: <span>{</span>{firstName + " " + lastName}}</p>
</code>
<p class="exampleFont exampleBlock">First name: {{firstName}}</p>
<p class="exampleFont exampleBlock">Full name: {{firstName + " " + lastName}}</p>
<!-- One-way binding using an "expression" and JSON -->
<p class="topic">One-way binding using an "expression" and JSON</p>
<p>Full name: {{person.firstName + " " + person.lastName}}</p>
<!-- One-way binding using an "ng-bind" and JSON -->
<p class="topic">One-way binding using an "ng-bind" and JSON</p>
<p class="exampleFont exampleBlock">Full name: <span ng-bind="person.firstName + ' ' + person.lastName"></span>
</p>
<!-- Binding to a function in the controller -->
<p class="topic">Binding to a function in the controller</p>
<p class="exampleFont exampleBlock">Full name: {{fullName()}}</p>
<code>
<ul ng-controller="namesCtrl"><br>
<li ng-repeat="x in nameAndCountry | orderBy:'name'"><br>
<span>{</span>{ x.name + ', ' + x.country }}<br>
</li><br>
</ul>
</code>
<div ng-controller="namesCtrl">
<section class="well well-sm">Building a bootstrap list with ng-repeat</section>
<ul class="list-group">
<li class="list-group-item" ng-repeat="x in nameAndCountry | orderBy:'name'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
<section class="well well-sm">Building tablular layout with ng-repeat</section>
<p class="topic">Using bootstrap with grid layout</p>
<div class="row">
<div class="col-sm-4">
<div class="radio">
<label><input type="radio" name="optradio" ng-click="orderBy('name')">Sort by name</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio" ng-click="orderBy('country')">Sort by country</label>
</div>
</div>
<div class="col-sm-4">
<div class="dropdown">
<button class="btn btn-xs btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Sort
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li style="font-weight:bold;padding-left:5px" ng-click="orderBy('name')">Name</li>
<li style="font-weight:bold;padding-left:5px" ng-click="orderBy('country')">Country</li>
</ul>
</div>
</div>
</div>
<p class="topic">Using a table</p>
<table width="25%" class="table table-striped table-hover">
<tbody>
<tr ng-repeat="x in nameAndCountry | orderBy:myOrderBy">
<td>{{x.name}}</td>
<td ng-bind="x.country"></td>
</tr>
</tbody>
</table>
<form>
Name:
<br>
<input ng-model="name">
<br>Country:
<br>
<input ng-model="country">
<br>
<br>
<button ng-click="addPerson()">Add</button>
</form>
</div>
</div>
</div>
</body>
</html>
(function () {
'use strict';
var app = angular.module("myApp", []);
app.run(function($rootScope) {
// This variable has global scrope
$rootScope.color = 'Coral';
});
app.directive("myCustomAngularDirective", function() {
return {
template : "<p style='font-size:16px;color:{{color}}'>A variable named 'color' is defined as " +
"<b>{{color}}</b> in the rootScope.<br> This variable will be used in the input boxes as well untill the color is changed. " +
"At that time the model in the contoller will be updated with a local color variable but " +
"the global variable will not be updated as indicated by color of this paragraph.</p>"
};
});
app.controller('personCtrl', function($scope) {
const privateFirstName = "Jerry";
const privateLastName = "Brown";
//$scope is the model in the Angular MVC app
$scope.person = {
firstName: 'Jeremy',
lastName: 'Smith'
};
$scope.firstName = "Mark";
$scope.lastName = "Baird";
$scope.fullName = function() {
return privateFirstName + " " + privateLastName;
};
});
app.controller('namesCtrl', function($scope) {
//$scope is the model in the Angular MVC app
$scope.name = "";
$scope.country = "";
$scope.nameAndCountry = [{
"name": 'Mark Baird',
"country": 'USA'
}, {
"name": 'Jerry Brown',
"country": 'Sweden'
}, {
"name": 'Bob Bennet',
"country": 'Mars'
}, {
"name": 'Jermy Anderson',
"country": 'France'
}];
$scope.orderBy = function(x) {
$scope.myOrderBy = x;
};
$scope.addPerson = function(){
$scope.nameAndCountry.push(
{
"name": $scope.name,
"country": $scope.country
}
);
$scope.name = "";
$scope.country = "";
}
});
})();
body {
font-family: sans-serif;
font-size: 12px;
}
section {
font-size: 24px;
font-weight: bold;
padding-left: 5px;
border-left: 5px solid lightblue;
border-top: 2px solid lightblue;
margin-top: 24px;
margin-bottom: 12px;
}
.topic {
padding: 0;
margin: 0;
margin-bottom:8px;
margin-top: 15px;
font-weight: bold;
font-size: 16px;
font-family:sans-serif
}
.listnumber {
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: 12px;
font-weight: bold;
line-height: 1;
color: #fff;
text-align: center;
vertical-align: middle;
background-color: #808080;
border-radius: 10px;
}
.exampleFont{
font-family: "Times New Roman", Times, serif;
font-size:14px;
}
.exampleBlock{
margin-bottom:15px;
}
.dropdown-menu li:hover {
cursor: pointer;
}
code{
padding:5px;
margin:10px;
display:block;
background:white;
}
form{
margin:10px;
}
<section class="well well-sm">Building tablular layout with ng-repeat</section>
<p class="topic">Using bootstrap with grid layout</p>
<div ng-controller="namesCtrl">
<div class="row">
<div class="col-sm-4">
<div class="radio">
<label><input type="radio" name="optradio" ng-click="orderBy('name')">Sort by name</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio" ng-click="orderBy('country')">Sort by country</label>
</div>
</div>
<div class="col-sm-4">
<div class="dropdown">
<button class="btn btn-xs btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Sort
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li style="font-weight:bold;padding-left:5px" ng-click="orderBy('name')">Name</li>
<li style="font-weight:bold;padding-left:5px" ng-click="orderBy('country')">Country</li>
</ul>
</div>
</div>
</div>
<p class="topic">Using a table</p>
<table width="25%" class="table table-striped table-hover">
<tbody>
<tr ng-repeat="x in nameAndCountry | orderBy:myOrderBy">
<td>{{x.name}}</td>
<td ng-bind="x.country"></td>
</tr>
</tbody>
</table>
</div>