27. <!DOCTYPEhtml>
<html data-ng-app>
<head></head>
<body>
<input type="text"data-ng-model="displayName"/>
<divdata-ng-click="update"ng-controller="myCtrl">
</div>
</body>
</html>
Initializes the app. Can be anonymous or named.
Creates a property on the ViewModel
References a controller named “myCtrl”, which creates a new ViewModel.
References a controller method to call on a click event
28. <divng-app="App">
<div>
<input type="text" data-ng-model="firstName"/>
<div>{{firstName}}</div>
</div>
</div>
•Binds ViewModelsto HTML elements
•Uses {{…}} syntax
•References a property of a ViewModel
•Supports two-way binding
This example will display whatever the user types
38. <!--CSS media query on a link element -->
<linkrel="stylesheet"media="(max-width: 800px)"href="example.css"/>
<!--CSS media query within a style sheet -->
<style>
@media (max-width: 600px) {
.facet_sidebar{
display: none;
}
}
</style>
//media query with JavaScript
varmq= window.matchMedia("(max-width:600px)");
mq.addListener(function () {
//do something;
});
39. <!--Stack the columns on mobile by making one full-width and the other half-width -->
<divclass="row">
<divclass="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<divclass="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!--Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<divclass="row">
<divclass="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<divclass="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<divclass="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!--Columns are always 50% wide, on mobile and desktop -->
<divclass="row">
<divclass="col-xs-6">.col-xs-6</div>
<divclass="col-xs-6">.col-xs-6</div>
</div>
