Angular.js: Part II
Forms and APIs
{review}
M-V-C
Model: the data structure
View: visual display of your model (DOM)
Controller: manages models, retrieves data
M-V-C
controller
controller
Syntax/concept review
Angular directive
<input ng-model="name">Angular expression
<text ng-repeat="title in titles">{{title}}</text>Create a module
var myApp = angular.module('myApp', [])Adding a controller
myApp.controller('myCtrl', function($scope) {
// Get and set variables
}){forms}
Forms
Forms are awesome
<!-- Angular HTML properties enforce restrictions -->
<input ng-minlength="NUMBER">Angular functionality for validation, formatting
<!-- Stores variables for reference -->
myForm.name.$invalid<!-- Conditional visibility -->
<p ng-show="myForm.name.$invalid">Error</p>
<!-- Conditional Classes -->
<p ng-class="{'DESIRED_CLASS' : EXPRESSION TO BE EVALUATED}"></p>
{fork then clone this repo}
{start running a local server}
cd Desktop/angular-2
python -m SimpleHTTPServer 8080
# See page at localhost:8080/form{complete form exercise with a partner}
API
"Application Programming Interface"
Protocols, tools for building software
Exposes components (data) in specified formats
Allows web queries of content
Ajax request
Asynchronous data request
Syntax:
var data;
$.ajax({
url:'https:..../json?year=2015&$limit=50000',
type: "get",
success:function(dat) {
data = dat
// Do something w/ your data!
},
dataType:"json"
}) Used to get/push data from servers/databases
Angular $http request
Angular applications often need data
Syntax:
var myApp = angular.module('myApp', [])
myApp.controller('myCtrl', function($scope, $http) {
$http.get('URL')
.then(function(response) {
$scope.data = response.data
})
})Built in request format
{complete data-request exercise}
API
