Model: the data structure

View: visual display of your model (DOM)

Controller: manages models, retrieves data

controller

controller

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 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>

"Application Programming Interface"

Protocols, tools for building software

Exposes components (data) in specified formats

Allows web queries of content

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 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

Use a form for requesting data

Use directives to display data

Do something interesting

Link

Spotify challenge (due before class in one week)