spca2014 hillier 3rd party_javascript_libraries
TRANSCRIPT
3rd Party JavaScript LibrariesYou Need to Know
Scot Hillier
MVP
Scot Hillier Technical Solutions, LLC
"../_api/web/lists/getByTitle('Contacts')/itemCount"
"GET"
"accept" "application/json;odata=verbose"
function
var
"contacts"
"../_api/web/lists/getByTitle('Contacts')/items"
"?$select=Id,FullName,FirstName,Title,WorkPhone,Email"
"&$orderby=Title,FirstName"
//initialize adapter
"OData"
("/odata/"
//create query
"Contacts"
"LastName" "startsWith" "C"
//execute query
//success
//error
//create metadata store
var new
//Define entities
'Customer'
'Customers'
false
"resultsTable" data-bind "foreach: get_contacts()"
data-bind "text: get_lname()"
data-bind "text: get_fname()"
data-bind "text: get_phone()"
function
var ko.observableArray()
function
function
function
//update observable array
function
http://angularjs.org/
https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js
Module
Routes
View Controller
Directives Factory
$scope
data-ng-app
data-ng-controller
data-ng-click
<!DOCTYPE html> <html data-ng-app><head></head><body>
<input type="text" data-ng-model="displayName"/><div data-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
<div ng-app="App"><div>
<input type="text" data-ng-model="firstName"/><div>{{firstName}}</div>
</div></div>
• Binds ViewModels to HTML elements• Uses {{…}} syntax
• References a property of a ViewModel
• Supports two-way binding
This example will display
whatever the user types
//modulevar myapp = angular.module("MyApp", []);
<!-- html --><div data-ng-app = "MyApp">
Reference dependent modules
//controllermyapp.controller("welcomeCtrl", ["$scope",
function welcomeCtrl($scope) {
//model$scope.welcomeMessage = "Hi";
});
<!-- html --><div data-ng-controller="welcomeCtrl">
• Build up the $scope (a.k.a, View Model)
<div ng-app="App"><div ng-controller="welcomeCtrl">
<h3>{{welcomeMessage}}</h3></div>
</div>
• Bind the $scope to the HTML elements
<!-- CSS media query on a link element --><link rel="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 JavaScriptvar mq = window.matchMedia("(max-width:600px)");mq.addListener(function () {
//do something;});
<!-- Stack the columns on mobile by making one full-width and the other half-width --><div class="row"><div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div><div class="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 --><div class="row"><div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div><div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div><div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop --><div class="row"><div class="col-xs-6">.col-xs-6</div><div class="col-xs-6">.col-xs-6</div>
</div>
